leitura de
Encontrou um problema no conteúdo? Por favor, deixe seu comentário!

Hoje vou ensinar como criar um menu usando listas (ol) e que tem o efeito de expandir/retrair feito com jQuery.

O efeito em sí é bem simples e fácil de ser modificado… O meu foi feito usando HTML puro e uma folha de estilos (CSS) pequena. No final do tutorial você vai encontrar o link pra download do arquivo .rar com o exemplo dessa aula.

Veja aqui um exemplo de como vai ficar o menu.

Bom… vamos lá!

Código (X)HTML do menu

Vejam que o sub-menu (que irá aparecer) fica dentro do <li> e fora do .

Código CSS do menu

Bloco de código do efeito (jQuery)

É só juntar todas as peças (como foi feito no exemplo) e o seu menu irá funcionar que é uma maravilha! :D

O código do efeito pode parecer um pouco complicado pra quem tá começando com jQuery, mas é só ler os comentários e procurar um pouco sobre cada função (slideToggle, toggleClass, click) na documentação que, com os exemplos de lá vai ficar tudo claro.

Faça aqui o download do arquivo .rar com os arquivos dessa aula.

Espero que tenham gostado, qualquer dúvida é só falar.

Thiago Belem / Blog

Thiago Belem


Publicado

Thiago Belem / Blog

Thiago Belem / Blog

Artigos e tutoriais sobre desenvolvimento WEB

Continue lendo