10 Tutoriais de como criar um menu em jQuery

Ultimamente tenho tido alguma dificuldade em criar menus de navegação interessante, agora que voltei a ser front-end. Procurei alguns modelos, exemplos, tutoriais e encontrei alguns muito interessantes, então mãos à obra!

1. Create Bounce out Vertical menu with jQuery

Aprenda a criar um menu vertical que abre e fecha descrições dentro de cada link.

DEMO | TUTORIAL

2. “Outside the Box” Navigation with jQuery

Aprenda a criar um menu como os do dock do Mac OS X.

DEMO | TUTORIAL

3. Vertical Scroll Menu with jQuery Tutorial

Um menu vertical que desliza conforme você arrasta o ponteiro do mouse para cima ou para baixo.

DEMO | TUTORIAL

4. Sexy Drop Down Menu w/ jQuery & CSS

Aprenda a fazer um menu com duas instâncias de click, uma na imagem e outra no texto. O link da imagem abre um submenu.

DEMO | TUTORIAL

5. Create Vimeo-like top navigation

Um menu minimalista mas com muitas funcionalidades inspirado pelo menu do site de videos Vimeo.

DEMO | TUTORIAL

6. Animated Drop Down Menu with jQuery

Quem nunca quiz fazer um jump menu como o que existia no topo dos sites da Envato?

DEMO | TUTORIAL

7. Sproing! – Make An Elastic Thumbnail Menu

Outro menu inspirado no dock do Mac OS X so que com imagens.

DEMO | TUTORIAL

8. Make a Mega Drop-Down Menu with jQuery

Um menu com conteúdo, cada submenu pode conter links, parágrafos e se fuçarmos um pouco mais, podemos inserir algumas imagens também.

DEMO | TUTORIAL

9. Superfish v1.4.8 – jQuery menu plugin by Joel Birch

Aprenda a criar menus estilo drop down com o plugin Superfish, ele passou por um grande update e parece estar mais leve e mais suave também.

DEMO | TUTORIAL

10. A Different Top Navigation

O pessoal do Nettuts quiz criar um menu um pouco diferente, até o nome do tutorial não poderia fugir muito disso, mas ao meu ver eles pecaram por não permitir que ao se tirar o mouse de cima do menu ele não se fechasse sozinho. Vale a pena aprender como foi feito pelo uso do CSS e do controle feito com o jQuery.

DEMO | TUTORIAL

MENU BÕNUS

Depois de uma bateria de tutoriais dessa, nada mais justo que pegar tudo o que aprendeu e colocar pra funcionar com um visual diferente, assim você pode testar as suas habilidades de estilização das técnicas ensinadas nos tutoriais. Então escolha o template de um menu abaixo e bons estudos!