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.
