Como crear un menú básico con HTML5 y CSS3
Tutorial de cómo realizar un menú sencillo con HTML5 y CSS3 utilizando degradados, sombras y bordes
redondeados
Estructura básica del menú en HTML
En HTML5 tenemos una etiqueta de navegación para nuestro documento “NAV” dentro de NAV podemos
incluir enlaces, listas o cualquier cosa para navegación del sitio, pero nosotros vamos utilizar listas que son
más fáciles de utilizar.
1
2 <nav>
<ul>
3 <li><a title="Opcion 1" href="#">Opción 1</a></li>
4 <li><a title="Opcion 2" href="#">Opción 2</a></li>
5 <li><a title="Opcion 3" href="#">Opción 3</a></li>
6 <li><a title="Opcion 4" href="#">Opción 4</a></li>
<li><a title="Opcion 5" href="#">Opción 5</a></li>
7 </ul>
8 </nav>
9
Cada elemento de la lista será un enlace, con esto podremos manejar como se nos antoje los enlaces,
con CSS3 vamos a darle el estilo magnifico que nos proporciona.
Aplicando estilos con CSS3 al menú de navegación
Vamos a darle estilos básicos a nuestro menú para empezar a darle código CSS3. Primero a darle un fondo al
cuerpo:
1 body{
2 background:#3CF;
3 }
A la etiqueta NAV le damos borde redondeado con un radio de 10px, degradado de blanco a gris, padding de
10px y un ancho de 950px.
1 nav{
2 /*Bordes redondeados*/
border-radius:10px;/*El estandar por defecto*/
3 background:#C6C6C6;/*color de fondo*/
4 padding:10px;
5 width:950px;
6 }
Recordemos que NAV es un contenedor para la lista, así que ahora pasamos a dar estilo a la etiqueta
de UL que contiene las listas, vamos a anular el estilo de lista, darle márgenes laterales de 10px y anular el
padding.
1 nav ul{
list-style:none;
2 margin:0 10px 0 10px;
3 padding:0;
4 }
Ahora a los elementos de la lista LI hacemos que floten a la izquierda para una vista horizontal y le damos
un margen derecho de 10px para darle separación con bordes redondeados de 5px de radio, tipo de fuente,
tamaño de 16px, centrado y sombras para el texto.
1 nav ul li{
2 /*Bordes redondeados*/
border-radius:5px;/*Estándar por defecto*/
3 float:left;
4 font-family:Arial, Helvetica, sans-serif;
5 font-size:16px;
6 font-weight:bold;
7 margin-right:10px;
text-align:center;
8 /*Sombras para texto*/
9 text-shadow: 0px 1px 0px #FFF;
10 }
Al pasar el puntero sobre el elemento LI se activara el evento HOVER cambiando el fondo de este. En los
degradados tenemos diferentes maneras de aplicarlo para cada navegador, en este caso para el estándar por
defecto, Opera y Firefox es igual, para Chrome y Safari es diferente pero con las mismas propiedades. De tipo
linear, empezamos por la parte alta hacia debajo de blanco a gris claro, con la sombra tenemos los
parámetros eje X, eje Y, enfoque y color.
1 nav ul li:hover{
2 /*Degradado de fondo*/
background:#E3E3E3;
3 box-shadow:1px -1px 0px #999;
4 border:1px solid #E3E3E3;
5 }
Cada elemento LI es también un contenedor, en este caso de enlaces, a estos enlaces le daremos color gris y
que sean bloques con padding de 10px, quitaremos la decoración de los enlaces. Las transiciones
en CSS3 tienen diferentes parámetros, esta vez utilizamos el tiempo de 0.4 segundos, el efecto linear y
aplicable a todas las propiedades básicas, ancho, color, margen, etc.
1 nav ul li a{
2 color:#999;
display:block;
3 padding:10px;
4 text-decoration:none;
5 }
La transición esta vez se activara al pasar el puntero, el evento HOVER de CSS que cambiara de color gris el
texto a negro, esto es sobre la etiqueta A de enlace.
1 nav ul li a:hover {
2 color:#000;
3 }
