HTML5 Demostración y Ejemplos

Menú responsive HTML y CSS Flex

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.

Menú responsive HTML y CSS Flex
Menú responsive HTML y CSS Flex

 

Nestor Tapia

Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

Un comentario

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad