SummArg | Cursos y recursos para webmasters

14/12/2010

Los mejores tutoriales y recursos para hacer tus barras de navegación

El menu de una web es uno de los elementos mas importantes. Debe ser bonito, accesible, liviano, ligeramente animado y facil de agregar y retirar links.

Aquí les dejamos una selección de 42 tutoriales para tener un menú fantástico, utilizando CSS2, CSS3 o Javascript. La mayoría de ellos ofrecen un demo para descargar y poder apreciarlos funcionando.

1. Menu CSS3 vertical minimalístico

Utilizando unicamente CSS3 podemos lograr este menu a partir de una lista desordenada de enlaces. Esto incluye el uso de la técnica de sprites, en donde a partir de un archivo de imagen obtenemos todas las imagenes necesarias para el menú.

El tutorial nos ofrece el código completo para descargar, que incluye lo referente a imagenes en formato JPG y PSD, totalmente libres para ser utilizados en tus proyectos.

Artículo en español | TutorialZine [EN] | Demo

2. CSS3 Dropdown Menu

Elegante menú CSS3 con algunos trucos para que se vea bien en navegadores antiguos. Si el navegador no soporta CSS3, sólo se pierde el efecto de redondeado de bordes. El autor deja disponible una versión que utiliza una imagen para lograr el degradado, y otra que utiliza CSS3 (con una propiedad soportada por escasos navegadores).

WebDesignerWall Tutorial [EN] | Demo

3. Slick Menu CSS3

En muy pocas líneas se puede lograr este menú que no lleva imágenes ni javascript alguno. Se vale de las propiedades gradient (linear, radial) y transition para lograr el efecto. Claro que este mismo menú puede crearse utilizando sprites y jQuery como pueden ver en este tutorial.

insicdesigns [EN] | Demo

4. Menu animado en CSS3

Llamativo menú animado que sólo se basa en CSS3 para sus efectos. Lamentablemente solo los navegadores webkit pueden ver todos los efectos en funcionamiento, los menos modernos pueden ver el menu pero con algunas discrepancias. El autor se inspiró en menues que utilizan jQuery para sus efectos y logró un gran trabajo que demuestra las aplicaciones de CSS3.

tobypitman tutorial [EN] | Demo

5. Overlay Effect Menu con jQuery

Todos los tutoriales de Codrops ofrecen para descargar un .zip con el ejercicio completo y funcionando.

Codrops tutorial [EN] | Demo

6. Mega CSS3 dropdown menu

Recientemente comentamos la existencia de este tutorial que nos permite colocar diversos tipos de contenido dentro de un menu, ideal para websites que necesitan guiar con mayor precisión a sus navegantes. Tutsplus ofrece descargar en un .zip todos los archivos de su ejercicio funcionando.

Tutsplus [EN] | Demo

7. Menu animado con jQuery

Con una hermosa animación cada item se despliega para dejarnos ver determinado contenido antes de ingresar a una nueva sección. Utiliza el plugin easing para lograr un efecto mas profesional.

Buildinternet tutorial [EN] | Demo

8. Menu estilo Lavalamp con CSS3 y jQuery

Menu basado en la creación de Ganesh con jQuery y CSS3.

insicdesign tutorial [EN] | Demo

9. Collapsing site navigation con jQuery

Codrops tutorial [EN] | Demo

10. CSS3 Animated Bubble Buttons

Sólo utilizando CSS3 estos botones tienen hermosas animaciones que hacen uso de la propiedad transition. El autor ofrece un comprimido con el demo funcionando.

TutorialZine [EN] | Demo

11. Slide Down Box Menu con jQuery y CSS3

Codrops tutorial [EN] | Demo

12. LavaLamp menu con jQuery

El original menu LavaLamp utiliza Mootools para su animación. Esta adaptación utiliza jQuery. Recientemente en SummArg realizamos un tutorial explicando cómo implementar este tipo de menues en WordPress.

Ganesh Tutorial [EN] | LavaLamp y WordPress [ES] | Demo

13. Menu animado con CSS3 sólo o con jQuery

Dos opciones, una sólo con CSS3 (navegadores webkit) y otra con jQuery (todos los navegadores).

webdesignerdesk [EN] | Demo

14. Menu desplegable con rebote

Con jQuery y su plugin easing se puede lograr un menu colapsable que tenga un efecto de rebote al abrir cada item. Está disponible todo el ejemplo en un archivo comprimido.

webdesignerdesk tutorial [EN] | Demo

15. Fly-out Menu con cufon, CSS3 y jQuery

Codrops tutorial [EN] | Demo

16. CSS Sprites & Javascript menu

alistapart tutorial [EN] y Demo

17. Vertical scroll menu con jQuery

Los items de este menu se deslizan verticalmente y esto permite ubicar gran cantidad de elementos.

Quenes tutorial [EN] | Demo

18. Divertido menu con animación realizado en CSS3

Designshack tutoria [EN] | Demo

19. Menu estilo Apple usando jQuery

Tutorial que nos muestra paso a paso cómo construir este elegante menú. También ofrecen para la descarga todos los archivos con el demo funcionando en un .zip.

kriesi.at tutorial [EN] | Demo

20. Menu animado con CSS y jQuery

tutsplus tutorial [EN] | Demo

21. Navegación por pestañas usando CSS

blixt tutorial y demo

22. Backgrounds animados con jQuery

Snook tutorial [EN] | Demo

23. CSS Dock menu

ndesign-studio tutorial [EN] | Demo

24. Otro Dock Menu

zurb tutorial y demo

25. CSS3 Horizontal Drop Line Tab Menu

skyrocketlabs tutorial [EN] | Demo

26. Rounded Menu

Codrops tutorial [EN] | Demo

27. CSS Sprite menu

Buildinternet tutorial [EN] | SummArg [ES]

28. Barra de navegación estilo Vimeo

jankoatwarpspeed tutorial [EN] | Demo

29. Menu de miniaturas elástico

Buildinternet tutorial [EN] | Demo

30. Barra de navegación por pestañas “Sweet”

Marcofolio tutorial [EN] | Demo

31. Barra de navegación “burbujas” con jQuery

Codrops tutorial [EN] | Demo

32. Menu “mazo de cartas” con CSS3

designlovr tutorial [EN] | Demo

33. Fade in & out al pasar el puntero

Con un poco de javascript y CSS podemos hacer aparecer el menu en la posición top aún cuando hayamos hecho scroll hacia abajo en busca de otros contenidos. Interesante opción!

Codrops tutorial [EN] | Demo

34. Image Menu con jQuery

Aholatechsupport tutorial [EN] | Demo

35. Slide Out Navigation Menu

Codrops tutorial [EN] | Demo

36. HoverAccordion, plugin para jQuery

berndmatzner tutorial [EN] y demos

37. Set de Menues CSS

Codrops tutorial y download [EN] | Demo

38. Superfish menu

plugin para jQuery download y demo

39. Mega dropdown menu con jQuery

sitepoint tutorial [EN] | Demo

40. Redimensión con jQuery

Utilizando CSS y jQuery este menu se redimensiona de acuerdo al ancho que se le indique.

Codrops tutorial [EN] | Demo

41. Kwicks para jQuery

jeremymartin resources [EN] | Demo

42. Garagedoor

gayadesign tutorial [EN] | Demo

Dejar un comentario

  1. Información Bitacoras.com…

    Valora en Bitacoras.com: No hay resumen disponible para esta anotación…

  2. cynthia

    Muy buenos tutoriales y recursos !.. sigan así, es muy buena la web

Dejar un comentario