Tecnología y Coaching para Emprendedores

20+ Tutoriales para Crear Menús de Navegación con CSS

css

Diseñar un buen menú de navegación web no es tarea fácil, pues entran muchos puntos a tener en cuenta que van desde la densidad de contenido al diseño que queremos utilizar. Hace unos meses vimos una colección de consejos para el diseño de un buen menú de navegación, en el que vimos todos los puntos clave a tener en cuenta en la planificación y desarrollo de un menú de navegación web. Hoy recopilamos una colección de tutoriales online para aprender a crear menús de navegación con HTML y CSS, con menús para todos los gustos y niveles.

1. Menú de navegación estilo Youtube

Aprende a crear un menú al estilo de Youtube.

2. Crea un menú CSS con sprites de imágenes

Tutorial para crear un menú CSS usando un sprite.

3. Bulletproof CSS Sliding Doors

Tutorial para crear un menú de navegación basado en la técnica sliding doors. El autor explica como solventar problemas que pueden aparecer con el uso de esta técnica.

4. CSS Sliding Door usando una sola imagen

Tutorial para crear un menú de navegación basado en la técnica sliding doors con una sola imagen.

5. Tutorial para crear un menú desplegable con CSS

Este es un tutorial ideal para principiantes que quieren aprender a crear un menú desplegable con CSS, así como pop-outs.

6. Menú de CSS con infinitos submenús

Si necesitas un menú con diferentes niveles de navegación, este tutorial es para ti.

7. Menú de CSS avanzado

Te enseña como cortar el menú en slices con Photoshop y mostrarlo con CSS en la web.

8. CSS Graphic Menu With Rollovers
Aprende a crear un menu CSS con efectos de rollover.

9. CSS Dock Menu

Si te gusta Mac, este menú te encantará.

10. CSS Sprite Navigation Tutorial

Aprende a crear un menú de navegación con sprites.

11. CSS3 Dropdown Menu

Crea un menú desplegable con CSS3.

12. Menú avanzado con CSS

Crea un menú de navegación con las propiedades hover y position de CSS.

13. Crea un menú del estilo de Vimeo

Aprende a crear un menú de navegación del estilo de Vimeo.

14. Sexy Drop Down Menu con jQuery & CSS

Excelente tutorial para crear un menú de CSS atractivo.

15. CSS Overlapping Tabs Menu

Aprende a crear un menú con pestañas que se sobreponen.

16. Navigation Bar With Tabs Using CSS and Sliding Doors Effect

Barra de navegación con pestañas mediante la técnica de sliding doors.

17. Simple CSS Vertical Menu Digg-like

Menú de navegación del estilo de Digg.

18. jQuery Style Menu With CSS3

Excelente menú creado con jQuery y CSS3.

19. Create a Slick Menu using CSS3

Crea este menú con CSS3.

20. Create Windows 7 Start Menu Using CSS3 Only

Aprende a crear un menú como el de inicio de Windows 7 con sólo CSS3.

21. Simple CSS Vertical Menus

Tutorial ideal para principiantes.

Conclusión

En este post hemos recopilado una colección de tutoriales para crear menús de navegación con CSS tanto para principiantes como para personas con rodaje en el mundo del diseño y desarrollo web. Un buen menú de navegación es clave para conseguir el éxito de nuestros diseños web, por lo que vale la pena invertir tiempo en aprender a desarrollarlos lo mejor posible, tanto a nivel de código como de diseño.

Si quieres aprender diseño web, te recomiendo el curso de diseño web desde cero con HTML5 y CSS3 así como el curso de diseño web responsive, con los que vas a aprender todo lo que necesitas saber sobre diseño web a nivel profesional.

Te animo a compartir el artículo y a dejar un comentario.

Un abrazo!


Comentarios

  • walter1728

    muy bueno menú ya lo probé funcionan bien al principio cuesta pero después no es fácil
    ahora necesito ayuda si alguien tiene un buscador interno para mi web
    para insertarlo me lo pueden enviar o como configurarlo
    descargue un témplate trae un buscador por defecto pero no se como configurarlo
    me pueden ayudar para hacerlo