Creando un menú con HTML5 y CSS3

Volviendo con los artículos sobre HTML5 hoy vamos a ver cómo hacer un menú horizontal básico utilizando html5 y CSS3 (sobre todo CSS3).

En fin, en el marcado poca chicha hay. Es decir, lista desordenada de toda la vida, y el único cambio es que usaremos la etiqueta nav:

<nav>
  <ul>
<ul>
	<li><a class="hiddenSpellError">title="Primero" href="#">First</a></li>
</ul>
<ul>
	<li><a class="hiddenSpellError">title="Segundo" href="#">Second</a></li>
</ul>
<ul>
	<li><a class="hiddenSpellError">title="Tercero" href="#">Third</a></li>
</ul>
<ul>
	<li><a class="hiddenSpellError">title="Cuarto" href="#">Fourth</a></li>
</ul>
<ul>
	<li><a class="hiddenSpellError">title="Quinto" href="#">Fifth</a></li>
</ul>
  </ul>
<!--<span class="hiddenSpellError" pre=""-->nav>

Con esto la parte HTML5 ya está liquidada. Ahora toca empezar a trastear con CSS3. Lo primero es el css de la sección NAV, donde pondremos bordes redondeados, degradado de blanco a gris y definiremos el tamaño. Luego a los elementos de lista les quitaremos el botón de lista y los flotaremos a la izquierda(como en cualquier menú horizontal tradicional). También añadiremos una transición a cada enlace. Como CSS3 todavía no está estandarizado hay que usar propiedades espcíficas para cada navegador. En el futuro debería funcionar en todos con la propiedad estandar.

nav{
    /*Borde redondeado*/
    -webkit-border-radius:9px;/*Chrome y Safari*/
    -moz-border-radius:9px;/*Firefox*/
    -o-border-radius:9px;/*Opera*/
    border-radius:9px;/*Estandar*/
    /*Color degradado*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#BBB));/*Chrome y Safari*/
    background-image: -moz-linear-gradient(top center, #FFF, #BBB);/*Firefox*/
    background-image: -o-linear-gradient(top, #FFF, #BBB);/*Opera*/
    background-image: linear-gradient(top, #FFF, #BBB);/*Estandar*/
    overflow:hidden;
    padding:12px;
    width:890px;
}

nav ul{
    list-style:none;
    margin:0 10px 0 10px;
    padding:0;
}

nav ul li{
    /*Borde redondeado*/
    -webkit-border-radius:6px;/*Chrome y Safari*/
    -moz-border-radius:6px;/*Firefox*/
    -o-border-radius:6px;/*Opera*/
    border-radius:6px;/*Estandar*/
    float:left;
    font-size:16px;
    font-weight:bold;
    margin-right:11px;
    text-align:center;
    /*Sombras*/
    text-shadow: 0px 1px 0px #FFF;
}

nav ul li a{
    color:#AAA;
    display:block;
    padding:10px;
    text-decoration:none;
    /*Transiciones*/
    -webkit-transition: 0.3s linear all;
    -moz-transition: 0.3s linear all;
    -o-transition: 0.3s linear all;
    transition: 0.3s linear all;
}

Bueno, tenemos el color de fondo, tenemos los bordes, tenemos la lista en formato horizontal… ¿Qué nos falta? Pues nos falta definir qué ocurre cuando naveguemos sobre los enlaces, cuando pongamos el ratón encima. Para eso utilizamos la pseudo-clase :hover de toda la vida, pero en este caso con degradados y sombras. Además, el texto se oscurecerá.

nav ul li:hover{
    /*Color degradado*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to( #E3E3E3));/*Chrome y Safari*/
    background-image: -moz-linear-gradient(top center, #FFF, #E3E3E3);/*Firefox*/
    background-image: -o-linear-gradient(top, #FFF, #E3E3E3);/*Opera*/
    background-image: linear-gradient(top, #FFF, #E3E3E3);/*Estandar*/
    /*Sombras*/
    -webkit-box-shadow:  1px -1px 0px #999;/*Chrome y Safari*/
    -moz-box-shadow:  1px -1px 0px #999;/*Firefox*/
    -o-box-shadow:  1px -1px 0px #999;/*Opera*/
    box-shadow:  1px -1px 0px #999;/*Estandar*/
    border:1px solid #E3E3E3;
}

nav ul li a:hover {
    color:#000;
}

Y ahí tenéis un menú con estilo css3 bien chulo, recordad si lo testeáis que en los navegadores antiguos no va a funcionar, así que si tenéis IE6 o 7… instalad un navegador actualizado, que son gratis, joder.

Anuncios

5 comentarios en “Creando un menú con HTML5 y CSS3

    1. Gracias por lo de genio @luck_rx pero no lo soy, sólo soy un informático en paro que tiene un blog donde comenta sus soluciones, porque cuando curraba muchas veces otros bloggers facilitaron mi trabajo (y cuando vuelva a currar volverán a hacerlo, seguro).

      ¿Quieres añadir submenús? Hice también una entrada sobre el tema, explicando cómo hacerlo haciendo uso de jQuery para escribir menos líneas:

      https://donnierock.wordpress.com/2012/05/17/menu-desplegable-con-jquery/

      Espero que te sirva de ayuda este código para introducir submenús en el otro. Un saludo!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s