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



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.

2. Pure CSS hover menu



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.

3. Matte CSS Menu



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.

4. CSS Blur Menu



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.

5. CSS Horizontal Menu



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.




6. Woody CSS Menu



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.

7. Advanced CSS Menu



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.

8. Simple Yellow Tabbed



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.

9. Vimeo-Like Top Navigation



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

10. Simple CSS-based drop-down menu



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

11. Two Level Horizontal Navigation in CSS



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

12. Tabbed Navigation Using CSS



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.

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



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.

14. CSS Block Navigation Menu



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.

15. CSS Menu with Descriptions



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.

16. CSS Hover Button



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