Técnicas para crear menús en CSS

Revisando el archivo del blog llegaba a dos artículos: un recopilatorio de los mejores ejemplos CSS y otro recopilatorio con tutoriales para crear botones CSS. Para completar el tema de CSS (Cascading Style Sheets), en el blog sixrevisions.com he encontrado una colección de excelentes técnicas de navegación que utilizan CSS para proporcionar a los usuarios una navegación más sencilla y accesible y un aspecto visual más atractivo.

Estas son una gran variedad de técnicas para crear menús en CSS que realmente muestran la capacidad de las hojas de estilo:

  1. The Menu menu

  2. Se cierne sobre un elemento del menú para mostrar un submenú. Si quieres utilizar este menú en tus trabajos simplemente copia el código fuente de su página. Demo en la página.

  3. Pure CSS hover menu

  4. Con esta técnica CSS, podrás crear un menú orientado verticalmente que muestre un submenú cuando un elemento del menú principal está seleccionado. Demo en la página.

  5. Matte CSS Menu

  6. Mate es un simple menú CSS con esquinas redondeadas usando sólo dos pequeñas imágenes de 13styles. Su creador es David Appleyard, que tiene un montón de simples y avanzados menús basados en CSS. Demo en la página.

  7. CSS Blur Menu

  8. Esta técnica de CSS muestra un método de creación de un menús que desdibuja los elementos del menú siguientes cuando se coloca el ratón sobre un elemento. Demo en la página.

  9. CSS Horizontal Menu

  10. Ian Main ofrece una gran cantidad de menús libres con estilo CSS y fácil de implementar en tus proyectos. Demo en la página.


  11. Woody CSS Menu

  12. Woody es un menú CSS que está listo para su uso ya que ha sido probado en: IE6, IE 7, Firefox, Opera, Safari y Chrome. Para modificarlo a tu gusto deberás comprar el archivo .psd. Demo en la página.

  13. Advanced CSS Menu

  14. Creado por Nick La, es uno de los más destacados de la lista de menús, utiliza la propiedad ‘CSS position’ y contiene un completo tutorial para personalizarlo a tu gusto. Demo en la página.

  15. Simple Yellow Tabbed

  16. Este menú es de la página CSS Menu Generator que contiene menús libres de alta calidad, además nos permite modificarlos desde la web y descargar el nuevo código directamente. Demo en la página.

  17. Vimeo-Like Top Navigation

  18. Está basado en el menú CSS de navegación de la web de videos Vimeo. Demo en la página.

  19. Simple CSS-based drop-down menu

  20. Técnica muy básica basada en menús desplegables CSS, excelente para cualquier tipo de menú. Demo en la página.

  21. Two Level Horizontal Navigation in CSS

  22. Veerle Pieters CSS ofrece un menú y tutorial creado con la propiedad CSS ‘text-indent’. Demo en la página.

  23. Tabbed Navigation Using CSS

  24. Excelente manual para la creación de un módulo de interfaz por pestañas basado puramente en CSS. Dentro de las pestañas de la página puedes conocer las instrucciones sobre la forma de aplicar esta técnica. Demo en la página.

  25. CSS Mini Tabs (the UN-tab, tab)

  26. Popular diseño CSS de la agencia SimpleBits, muestra la forma para la creación de mini pestañas. Ver el código fuente en la página de demostración para aprender cómo funciona (el código está con formato para facilitar su lectura). Demo en la página.

  27. CSS Block Navigation Menu

  28. Esta técnica de menú CSS permite crear un menú de navegación que contiene el título con las descripciones. Demo en la página.

  29. CSS Menu with Descriptions

  30. Esta técnica presenta un método para crear un menú que se expande horizontalmente cuando se pone el puntero del ratón sobre el. Demo en la página.

  31. CSS Hover Button

  32. Excelente tutorial para la creación de un menú de navegación mediante botones CSS. Demo en la página.

6 Comentarios en “Técnicas para crear menús en CSS”


  1. Gravatar Icon 1 Pedro 12 de Julio del 2009 a las 10:45 am
    Usando Safari Safari 530.17 en Mac OS Mac OS X

    Buena entrada Rubén ;)

  2. Gravatar Icon 2 rubendomfer 13 de Julio del 2009 a las 7:23 pm
    Usando Mozilla Firefox Mozilla Firefox 3.5 en Mac OS Mac OS X

    Gracias, aunque que te voy a contar a ti… :D

  3. Gravatar Icon 3 Oliver 17 de Julio del 2009 a las 8:42 pm
    Usando Mozilla Firefox Mozilla Firefox 3.5 en Windows Windows XP

    Oigan pero como ago para combertir esos menus a CSS porque me descargue uno para mi web y nesecito combertirlo en CSS o HTML

  4. Gravatar Icon 4 rubendomfer 18 de Julio del 2009 a las 12:30 am
    Usando Mozilla Firefox Mozilla Firefox 3.5.1 en Mac OS Mac OS X

    @Oliver: cada uno tiene su forma de descargar, para la mayoría basta con mirar el código fuente de la página de demostración.

  5. Gravatar Icon 5 charles 6 de Diciembre del 2009 a las 6:29 pm
    Usando Mozilla Firefox Mozilla Firefox 3.5.5 en Windows Windows NT

    esta muy bueno la info gracias (Y)

  6. Gravatar Icon 6 charles 7 de Diciembre del 2009 a las 4:58 pm
    Usando Mozilla Firefox Mozilla Firefox 3.5.5 en Windows Windows NT

    excelente recopilacion de menus

Dejar un comentario




Feeds

rss

  • Añadir a Google
  • Añadir a Netvibes
  • Añadir a Bloglines
  • Añadir a Wikio


Suscribete y recibirás un email cada día con los artículos del día anterior.

Introduce tu Email:

Powered by FeedBlitz

Fotografías Flickr

Alonso en Bahréin

estosololoarreglamossinellos

Browser

RSS Blogoff

  • Sincronizando el navegador: Mozilla Weave 17 Marzo, 2010
    Cuando la gente sigue mándandose mails a ellos mismos para guardar archivos, algo estamos haciendo mal. (Pau, creador de EyeOS en EBE ‘09) Bueno pues empiezo poquito a poco con el especial Sincroniza tu vida. Os recuerdo que mi situación actual es: ordenador de sobremesa con W7, portátil MacBook e iPhone. La idea: sincronizar dispositivos de [...] […]
    Kids