Muy interesante el tutorial que se han currado los chicos de Nettuts, siempre a la última en lo que a diseño web se refiere y con tendencias muy bien marcadas, buscando lo simple pero dejando con la boca abierta a más de uno.

Este menú se caracteriza por ser bastante bonito y ser compatible con todos los navegadores, aunque su verdadera belleza se aprecia si lo vemos en un navegador compatible con los estándares HTML5 y CSS3, ya que de lo contrario no se podrán aplicar ciertos efectos.

Tenéis disponible el videotutorial que encabeza esta entrada y también el tutorial en modo texto, el cual os enlazo aquí.

Os aseguro que no es nada fácil diseñar un buen menú de navegación para una página web, y es que podríamos decir que está entre los tres o cuatro elementos más importantes para que la usabilidad y la accesibilidad de nuestra web sea correcta.

En Pro Blog Design se han currado una recopilación de los cuarenta mejores menús que han visto por ahí, y la verdad es que yo he pillado muchas ideas (que no copiado) para mis futuros menús, especialmente para aquellos multinivel que tan complicado es hacer que queden bien.

Tras el salto todos, enlazaditos a sus webs.

1. Fabric London

A beautiful minimalist menu with fast colors and a compact design.

2. Nopoko Graphics

Sleek looking tabs with drop shadow and a beautiful background pattern.

3. Culture Code

iPhone style menu for an Iphone app.

4. Box Wish

Simple, compact and sleek.

5. Mac Rabbit

Light colors and creative symbols make this menu stand out from the crowd.

6. Kyan Media

Solid colors and simple MouseOver effects make this menu pretty.

7. Loodo

A nice multi-colored menu. The tiny green car indicates the current page.

8. Firestone Live

A beautiful black and white themed menu with block fonts.

9. Matt Maxwell Design

A simple menu with beautiful contrasting colors.

10. Cognigen

Another simple, light-colored design with unique tabs.

11. Black Book Mag:

A black-and-white menu with a transparent effect.

12. Agachi

A simple multi-line menu with soft blue colors.

13. App Storm

A classy example of a minimalist multi-line menu.

14. Built By Buffalo

Wide tabs and simple fonts give this menu a pretty sophisticated look.

15. Clear Left

Another multi-line menu with a great color scheme.

16. Fashion Photography

A truly dynamic menu. A thumbnail pops up every time you hover on a menu item.

17. Mia and Maggie

A cool multi-line menu with the traditional underline effect.

18. Michael Austin

Wide tabs and simple colors.

19. Mint

Another wide-tabbed menu with a transparent effect.

20. Rockatee

Refreshing use of numbers with each menu item.

21.Ronny Pries

Chalk-on-blackboard effect makes the menu casual yet creative.

22. Royal Caribbean

Another great menu with elegant fonts and nice contrasting colors.

23. Small Stone

A really creative and unique menu for a DJ.

24. Sohtanaka

Pretty colors, elegant fonts and light effects.

25. The Resume Girl

Another creative menu with a nice casual look.

26. Sky Larkin

Each item in the menu is of a different color when you mouse over it. Really creative and fun.

27. Web Designer Wall

Another casual sticky-note style menu.

Vertical Designs:

28. Surfstation

One of the most elegant menus. Nice use of bullets in a minimalist design.

29. Alex Cohaniuc

An expandable vertical menu with lots of colors.

30. Carbonica

A casual arrow and a circle indicates the current page. The casual font also adds to the beauty of this menu.

31. District Solutions

Every item in this vertical menu turns a different color when you mouse over it.

32. IipVapi

A black-and-white vertical menu in the shape of a post card.

33. Intereactive

An elegant, multi-line vertical menu.

34. Power To The Poster

Sophisticated fonts and a transparent effect make this menu stand out.

35. Jeff Sarmiento

A colorful menu with extra large fonts and symbols.

36. McAllan Ridge

Another multi-line menu with a nice textured background.

37. Nando Designer

A casual menu with a notebook effect.

38. Pixel Media

Simple and elegant.

39. Nick Ad

A highly dynamic menu with great effects and contrasting colors.

40. Nocturnal Miami

Another vertical menu with a transparent effect.

En una página web algo realmente básico es dar una buena primera impresión, y eso en muchas ocasiones se ve en el menú que acompaña nuestra página web.

Navegando por la red me encontraba y en CSS Tricks han puesto un tutorial muy interesante para crear un menú de navegación que luce brutal, sobre todo porque parece todo Flash y es Flash = 0.

Tutorial | Menú jQuery

 Un sitio con una navegación a base de Pestañas es muy útil, ya que puedes tener una gran cantidad de contenido en un espacio muy reducido y ordenado.

He aquí un completo tutorial que enseña a crear un sistema de navegación por Pestañas animadas usando MooTools para ello. Además de usar el mencionado framework se utiliza PHP para programación del lado del servidor y Sprites CSS.

Para seguir el tutorial son necesarios conocimientos básicos de JavaScript y algunos conceptos de MooTools y experiencia con Frameworks ayudará.

Puedes descargar los archivos usados en el tutorial aquí y también puedes ver la demo funcionando aquí.

Enlace | NetTuts+

Hoy en día es muy común ver este tipo de menús en varios sitios, ya que ahorran espacio y se muestra todo mas ordenado y claro.

La mayoría de estos menús se realizan con JavaScript (o algunos de sus frameworks como jQuery o MooTools) o Flash, pero también se pueden hacer estos utilizando solo CSS, teniendo así una mayor compatibilidad con distintos navegadores.

En el tutorial se muestra de forma sencilla como lograr un Menú Vertical Desplegable solo con CSS que podrás adaptar sencillamente a cualquier sitio web o blog.

Enlace | Devin Olsen

De un tiempo hacia aquí se están popularizando de sobremanera los menús desplegables, pero como en todos los ámbitos del diseño, no todos son igual de bonitos ni quedan igual de bien.

Si queréis disponer de un menú con estilo, que luzca bien en vuestra web y que no sea muy pesado (poco más de 1 KB), deberíais probar nmcDropDown, ya que creo que reúne esas condiciones.

Para enteraros de cómo funciona y seguir los pasos que os proponen, nada mejor que una vuelta por la web de New Media Campaigns, dónde nos instruirán para ello.

Hoy es el día de jQuery y lo vamos a aprovechar, ya que este es el tercer post que hacemos gracias a la estupenda librería de John Resig y su equipo de desarrollo. Y además estos menús se integran de una forma tremenda con cualquier tipo de diseño.

Lo mejor de todo es que como todo buen plugin de jQuery, la implementación es altamente sencilla y no nos será de mucha dificultad integrarlo en nuestra página, haciendo nuestro sitio mucho más dinámico y funcional que antes.

Podéis visitar el sitio en el que se han currado esta pedazo de recopilación (cracks), que no es otro que 1stWebDesigner.