Menú responsive HTML y CSS Flex. Hoy en día ya es imprescindible la utilización de estilos en nuestras páginas y proyectos web, sin embargo, tenemos que utilizar todas las ventajas de estos estilos que dan el toque final en el modo de visualización y estética de la web.
El desarrollo de este tutorial, es crear un menú de navegación para una vista de navegación de escritorio y también se visualice desde un dispositivo móvil.
Estos estilos de menús son muy utilizados en la actualidad, pero tienen que utilizarlo cuando tienen bastantes datos que mostrar, en ocasiones puedes hacer un simple menú flexible como el que describiremos en este artículo y con ello dar la mejor experiencia en la navegación al usuario.
Ahora, una página bien estructurada y con buenos estilos atraerá mas visitas, por lo tanto, mas ventas a nuestra empresa. En este artículo veremos la utilización de Flex para nuestro menú y animaciones a la hora de cargar la página web.
Menú responsive HTML y CSS Flex.
Utilizaremos dos archivos de estilos
- animatios.css
- style.css
<link rel="stylesheet" href="css/animations.css"> <link rel="stylesheet" href="css/style.css">
El uso del Flex
.navegacion nav {
display: flex;
justify-content: flex-end;
}
ul {
display: flex;
flex-flow: row wrap;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li a {
display: block;
text-align: center;
padding: 16px;
color: #ffffff;
font-size: 22px;
}Código HTML necesario para nuestro menú centrado y también para el modo móvil.
<div class="cabecera">
<div class="logo">Comenzando con la fotografía</div>
<header class="navegacion">
<nav>
<ul>
<li><a class="activo" href="#">Inicio</a></li>
<li><a href="#">Paisajes</a></li>
<li><a href="#">Retratos</a></li>
</ul>
</nav>
</header>
</div>Ejemplo completo de este modelo
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inicio - Comenzando con la fotografía</title>
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="contenido" class="slideUp">
<div class="cabecera">
<div class="logo">Comenzando con la fotografía</div>
<header class="navegacion">
<nav>
<ul>
<li><a class="activo" href="#">Inicio</a></li>
<li><a href="#">Paisajes</a></li>
<li><a href="#.html">Retratos</a></li>
</ul>
</nav>
</header>
</div>
<footer id="contenido3"></footer>
</div>
</body>
</html>Espero que les sea de utilidad esta breve explicación del uso de Flex. Les dejare el link de descarga del código completo.
