CSS3: Cómo crear un menú minimalista y elegante

Hoy haremos algo sencillo y práctico: Un simple menú de navegación animado con CSS3, el cual se verá aceptable en navegadores viejos, y funcionará a la perfección en la siguiente generación de navegadores. ¿Comenzamos?

El menú se organiza como una lista no ordenada. Esta es la mejor estructura para un menú, ya que es semánticamente correcta y a su vez, permite darle estilo fácilmente a los enlaces del menú. Aquí usaremos un poco de XHTML:



  
Home

  
About

  
Services

  
Portfolio

  
Contact us

Dentro de cada li tenemos un hipervínculo con un span dentro. Por defecto, estos spans estarán escondiddos y sólo serán visibles cuando te posiciones sobre el enlace. Cada enlace tiene un nombre de class único, que es usado para darle un único fondo y estilo al span que contiene.

Una vez que hemos ubicado la estructura básica, ya podemos comenzar a crear los efectos y estilos CSS3. Esto funcionará incluso en navegadores que no soporten transiciones animadas en CSS3, como por ejemplo, IE6.


{
margin:0;
padding:0;
}
body{
font-size:14px;
color:#666;
background:#111 no-repeat;
/* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
font-family:Arial, Helvetica, sans-serif;
}
#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}

Para darle estilo al fondo de body, primero seleccionamos un color de fondo. que actuará como respaldo, y luego añadiremos dos gradientes radiales con CSS3 como imagenes de fondo. En el caso de que el navegador de quien visita nuestro sitio no soporte gradientes, entonces serán salteados y se mostrará el color de fondo que seleccionamos como respaldo.


#navigationMenu span{
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
transition: 0.25s;
}
#navigationMenu a{
background:url('img/navigation.jpg') no-repeat;
height:39px;
width:38px;
display:block;
position:relative;
}
#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}

La propiedad transition de CSS3 es una muy poderosa. Te permite animar los cambios que ocurren en un elemento cuando las pseudo-propiedades hacen efecto. Por ejemplo, en nuestro menú, cuando el usuario mueve el cursor sobre un enlace de navegación, la pseudo-propiedad :hover hace efecto, mostrando el span que de otra manera permanecería escondido.

Sin que haya sido definida la propiedad transition, el cambio sería instantaneo. Pero al definirla, podemos animarlo. Aquí estamos avisando al navegador de que la duración de la animación será de 250 milisegundos.

Las transiciones son soportadas, actualmente, sólo en navegadores basados en webkit (Safari y Chrome), pero se espera que Firefox 4 también lo soporte, por lo que nos preparamos para ello, especificando una -moz-transition.


#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover {   background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}
#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}
#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}
#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}
#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}

Finalmente, especificamos cinco diseños diferentes para los enlaces de navegación. Todas las imágenes de fondo para los enlaces están contenidas dentro de un sólo archivo de sprite. Allí hay estado "normal" y "posicionado sobre", uno debajo del otro.. Cuando el cursor se posicione sobre ellos, se mostrará la versión apropiada de la imagen de fondo.

¡Y listo! Haciendo clic en el siguiente enlace podras descargar todos los archivos usados en este tutorial, incluyendo el archivo "navigation.jpg" (necesario para que el menú funcione) y un archivo .PSD para que puedas crear fácilmente tu propio diseño.

Haz clic en este enlace para descargar los archivos del tutorial >>

Haz clic en este enlace para ver una demostración >>

¡Esperamos que te sea de utilidad!

Fuente original del artículo: TutorialZine