Crear un menú horizontal con HTML 5 y CSS 3

En este tutorial se aprenderá a crear un menú horizontal utilizando la etiqueta <nav> de HTML5 y la estructura que ya se conoce.

Para poner los links del menú, utilizaremos la etiqueta <li> así como se muestra aquí:

<nav>
 <ul>
 <li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
 </ul>
 </nav>

Con el código anterior, el menú quedará como una lista vertical, sin estilo, únicamente los enlaces.

Aquí es donde entra el estilo, con CSS:

nav{
 width: 500px; /* Ancho del menú */
 height: 30px; /* Altura del menú */
 margin: 0 auto;
}

Se crea un atributo denominado nav, donde irán los estilos del menú, cabe aclarar que se debe llamar al CSS desde el archivo HTML donde irá el menú.

nav ul{
 list-style: none; /* Se elimina la viñeta */
 display: block;
 }
 
nav ul li{
 float: left; /* Se alinean los botones */
 margin: 0 5px; /* Distancia de separación entre botones */
}

Con lo anterior hacemos que los links ya no lleven el punto negro y que se alineen de forma vertical.

Ahora, para dar más estilo y colores al menú, podemos agregar al CSS lo siguiente:

nav ul li a, nav ul li a:link{
 text-decoration: none; /* Se quita el hipervínculo */
 font-size: 18px; /* Tamaño del texto del menú */
 color: #F0F8FF; /* Color del texto */
 padding: 3px 10px; /* Ancho y alto de los botones */
 cursor: pointer;
 transition: all 1s linear; /* Comienzan las transiciones CSS3 */
-moz-transition: all 1s linear;
-webkit-transition: all 1s linear; 
-o-transition: all 1s linear;
background-color: #078d12; /* Color de fondo para navegadores sin soporte CSS3 */
background: -webkit-radial-gradient(#00008B, #00FF7F); /* Degradado de fondo CSS3 */
 background: -moz-radial-gradient(#00008B, #00FF7F); /* Degradado de fondo CSS3 */
 -moz-border-radius: 7px 7px 0 0; /* Bordes redondeados */
-webkit-border-radius: 7px 7px 0 0;
}

De esta manera ya se tiene un menú más estilizado y listo para utilizar, aún en navegadores que no soporten la tecnología CSS3.

Grupo de WhatsApp: https://chat.whatsapp.com/Ch45FZaJcbxDb7WeHAOtAQ
Grupo de Telegram: https://t.me/Masterhacks_net

Donaciones
Gracias por apoyar el libre conocimiento!
Bitcoin: 3L2Y8LC5tmRffopnvv5J9DHe6wnrmyWVMm
Litecoin: MDtX7eRekxoRigMNtguziZqRdkr8CT5DKs
BCH: 3PnUezyhjWHQoBVfb1GpQJurMNbVjyvrVG
Ethereum: 0x1f786c3195b9a55e320848f240b1cfc37b159535

Deja un comentario

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