Morton 13 de diciembre de 2010 a las 09.33
   Imprimir artículo
elWebmaster.com

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


css3wide1Hoy 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?

Fuente original del artículo: TutorialZine
Traducción realizada por elWebmaster.com

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

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:

  1. <ul id="navigationMenu">
  2.     <li> <a class="home" href="#">
  3. <span>Home</span>
  4. </a></li>
  5.     <li> <a class="about" href="#">
  6. <span>About</span>
  7. </a></li>
  8.     <li> <a class="services" href="#">
  9. <span>Services</span>
  10. </a></li>
  11.     <li> <a class="portfolio" href="#">
  12. <span>Portfolio</span>
  13. </a></li>
  14.     <li> <a class="contact" href="#">
  15. <span>Contact us</span>
  16. </a></li>
  17. </ul>

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.

  1. {
  2.  
  3. margin:0;
  4. padding:0;
  5. }
  6.  
  7. body{
  8. font-size:14px;
  9. color:#666;
  10. background:#111 no-repeat;
  11.  
  12. /* CSS3 Radial Gradients */
  13. background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
  14. background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));
  15.  
  16. font-family:Arial, Helvetica, sans-serif;
  17. }
  18.  
  19. #navigationMenu li{
  20. list-style:none;
  21. height:39px;
  22. padding:2px;
  23. width:40px;
  24. }

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.

  1. #navigationMenu span{
  2.  
  3. width:0;
  4. left:38px;
  5. padding:0;
  6. position:absolute;
  7. overflow:hidden;
  8.  
  9. font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
  10. font-size:18px;
  11. font-weight:bold;
  12. letter-spacing:0.6px;
  13. white-space:nowrap;
  14. line-height:39px;
  15.  
  16. -webkit-transition: 0.25s;
  17.  
  18. -moz-transition: 0.25s;
  19. transition: 0.25s;
  20. }
  21.  
  22. #navigationMenu a{
  23. background:url('img/navigation.jpg') no-repeat;
  24.  
  25. height:39px;
  26. width:38px;
  27. display:block;
  28. position:relative;
  29. }
  30.  
  31. #navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
  32. #navigationMenu a:hover{
  33. text-decoration:none;
  34.  
  35. -moz-box-shadow:0 0 5px #9ddff5;
  36. -webkit-box-shadow:0 0 5px #9ddff5;
  37. box-shadow:0 0 5px #9ddff5;
  38. }

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.

  1. #navigationMenu .home { background-position:0 0;}
  2. #navigationMenu .home:hover {   background-position:0 -39px;}
  3. #navigationMenu .home span{
  4. background-color:#7da315;
  5. color:#3d4f0c;
  6. text-shadow:1px 1px 0 #99bf31;
  7. }
  8.  
  9. #navigationMenu .about { background-position:-38px 0;}
  10. #navigationMenu .about:hover { background-position:-38px -39px;}
  11. #navigationMenu .about span{
  12. background-color:#1e8bb4;
  13. color:#223a44;
  14. text-shadow:1px 1px 0 #44a8d0;
  15. }
  16.  
  17. #navigationMenu .services { background-position:-76px 0;}
  18. #navigationMenu .services:hover { background-position:-76px -39px;}
  19. #navigationMenu .services span{
  20. background-color:#c86c1f;
  21. color:#5a3517;
  22. text-shadow:1px 1px 0 #d28344;
  23. }
  24.  
  25. #navigationMenu .portfolio { background-position:-114px 0;}
  26. #navigationMenu .portfolio:hover{ background-position:-114px -39px;}
  27. #navigationMenu .portfolio span{
  28. background-color:#d0a525;
  29. color:#604e18;
  30. text-shadow:1px 1px 0 #d8b54b;
  31. }
  32.  
  33. #navigationMenu .contact { background-position:-152px 0;}
  34. #navigationMenu .contact:hover { background-position:-152px -39px;}
  35. #navigationMenu .contact span{
  36. background-color:#af1e83;
  37. color:#460f35;
  38. text-shadow:1px 1px 0 #d244a6;
  39. }

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
Traducción realizada por elWebmaster.com

NOTA: A través de esta traducción, elWebmaster.com busca difundir este práctico e interesante artículo a la comunidad de webmasters de habla hispana. No serán respondidas las consultas que sean realizadas a través de los comentarios. En caso de tener alguna duda o inconveniente con respecto al funcionamiento de lo aquí explicado, les rogamos consultar al autor del artículo original. Muchas gracias.


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (9)

  1. Diseño web cadiz dice:

    Es muy interesante este material y muy completo muchas gracias y sigan publicando

  2. Erik dice:

    Lei un poco de prisa pero me preguntaba si se podra hacer el mismo menu de forma horizaontal aunque los botones tuvieran que ser mas anchos.
    Saludos

  3. Milton pacheco dice:

    Yo compre en geekmex.com un libro con ejemplos y un dvd con miles de codigos de ejemplo que por fin me estan ayudando a comprender todo eso de los estilos que para mi han sido un dolor de cabeza, con estos codigos que proporcionas me sigue ayudando a aprender, gracias bro.

  4. julio alberto dice:

    Excelente pero me queda una duda si ALGUIEN puede ayudarme si la css3 tambien viene con dreanweaver cs4 grasias.
    ESTUVO EXCELENTE EL TUTORIAL mUCHAS GRACIAS

  5. Ciencia Al Poder dice:

    @julio alberto: CSS es un estándar web, no “viene” en ningún software, sino que el software lo implementa. De hecho, el CSS se usa (o “es soportado”) principalmente en los navegadores web (Firefox, Internet Explorer, Opera, Chrome, etc). Luego es ya cada uno el que decide cómo lo implementa, con más o menos incompatibilidades, lo que nos ocasiona quebraderos de cabeza a los que desarrollamos cosas 😛

  6. jo$e dice:

    Excelente, a ponerlo enpractica, gracias.

  7. TARJETAS DE VISITA dice:

    Siempre es bueno estar actualizado gracias y sigan publicando

  8. Francisco dice:

    quisiera saber si este menú se puede implementar en una pagina de blogger y como seria si se puede.

    Gracias y saludes desde Nicaragua

  9. Alex dice:

    Excelente el menú. Quisiera saber como se podria aplicar a blogger este menu flotante en el borde izquierdo de pantalla.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder