Menú Simple con etiqueta menú en HTML5 y CSS3

Escrito por Jose M Ramirez en . Publicado en Tutoríal

Menú Simple con etiqueta menú en HTML5 y CSS3

La promesa de HTML5 se basa en la semántica, que no es más que llamar las cosas por su nombre. Esto hace el código más simple para el maquetador, quien edite a futuro y los crawler de buscadores. Sin embargo a pesar del esfuerzo de los exploradores más modernos en integrar todas las características de HTML5 y CSS3, aun no todo soportan los atributos de la etiqueta ‘menu’. Aunque si soportan la etiqueta como tal y podemos empezar a usarla para empezar a poner el código de nuestros sitios al día recordando que para garantizar que se visualice perfectamente debemos usar algunos trucos.

Básicamente lo haremos será tratar nuestra etiqueta ‘menu’ como un ‘div’ y crearemos una clase para que mediante reglas de CSS podamos crear un menú con efecto hover cambiando de color al posicionar el mouse sin necesidad de usar imágenes de reemplazo. El siguiente código es completamente editable y está hecho para que cualquier que lo necesite pueda usarlo libremente, además de personalizarlo o sirva también para crear menús más complejos y elaborados.

Lo primero que haremos será crear nuestra etiqueta ‘menu’, asignaremos una clase llamada también ‘menu’ aunque la misma puede tener el nombre que cada quien quiera asignarle siempre que sirva para recordar, para los efectos de este tutorial usaremos el nombre del elemento que estamos creando.

<menu class="menu"></menu>

Incluimos una lista dentro de nuestra etiqueta y el texto lo incluimos dentro de la etiqueta ‘span’ que luego definiremos como se mostrara en nuestro CSS.

<menu class="menu">  
<ul>  
<li><a href="#"><span>INICIO</span></a></li>  
<li><a href="#"><span>BLOG</span></a></li>  
<li><a href="#"><span>SECCIONES</span></a></li>  
<li><a href="#"><span>CONTACTO</span></a></li>  
<li><a href="#"><span>AYUDA</span></a></li>  
</ul>  
</menu>

Ahora pasamos a nuestro estilo es que es lo más importante de este código hará todo el trabajo del efecto que veremos en el menú.

.menu{
width: 100%;
overflow:hidden;
}
.menu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana; 
list-style-type: none; 
text-align: center; 
}
.menu li{
display: inline;
margin: 0;
}
.menu li a{
display:inline-block;
text-align:center; 
text-decoration: none; 
color: white; 
background:#0080C0; 
margin: 0;
margin-right:2px; 
width:100px; 
height:30px; 
}
.menu a span{
position:relative;
top:25%; 
}
.menu li a:visited{
color: white;
}
.menu a:hover{
background:#00A5F4; 
}

En el archivo descargable esta todo el código completamente comentado de igual forma cualquier duda no esperes para dejar un comentario.

Etiquetas:,

Trackback desde tu sitio.

Dejar un Comentario

Sígueme en twitter

Twitter

Suscríbete al Feed

RSS-Feed

Red de Blogs

Red de Blogs iBlogLabs