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
<ul id="menu"> <li class="header">Menu</li> <li><a href="#" title="">Página inicial</a></li> <li><a href="#" title="">Notícias</a></li> <li class="parent"><a href="#" title="">Produtos</a> <ul class="sub-menu"> <li><a href="#" title="">Camisetas</a></li> <li><a href="#" title="">Calças</a></li> <li><a href="#" title="">Livros</a></li> </ul> </li> <li><a href="#" title="">Quem somos nós</a></li> <li><a href="#" title="">Contato</a></li> </ul>
Vejam que o sub-menu (que irá aparecer) fica dentro do <li> e fora do <a>.
Código CSS do menu
* {
margin: 0px;
padding: 0px;
}
body {
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
margin: 20px;
}
ul {
list-style: none;
}
ul#menu {
width: 170px;
border: 1px solid silver;
margin-top: 20px;
}
ul#menu li {
color: black;
line-height: 19px;
background: #F4F4F4;
}
ul#menu li.header {
background: #DFDFDF;
font-weight: bolder;
padding: 0px 3px;
font-size: 12px;
}
ul#menu li a {
color: black;
text-decoration: none;
display: block;
padding: 0px 3px;
outline: none;
}
ul#menu li.parent > a {
background: transparent url('../img/down.gif') right center no-repeat;
}
ul#menu li.aberto > a {
background: transparent url('../img/up.gif') right center no-repeat;
}
ul#menu li a:hover {
background-color: #EAEEFF;
}
ul#menu li ul.sub-menu {
display: none;
}
ul#menu li ul.sub-menu li a {
padding-left: 15px;
color: maroon;
}Bloco de código do efeito (jQuery)
$(function() {
// Evento de clique do elemento: ul#menu li.parent > a
$('ul#menu li.parent > a').click(function() {
// Expande ou retrai o elemento ul.sub-menu dentro do elemento pai (ul#menu li.parent)
$('ul.sub-menu', $(this).parent()).slideToggle('fast', function() {
// Depois de expandir ou retrair, troca a classe 'aberto' do <a> clicado
$(this).parent().toggleClass('aberto');
});
return false;
});
});–
É só juntar todas as peças (como foi feito no exemplo) e o seu menu irá funcionar que é uma maravilha! 
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.
Você também vai gostar de ler:
- Criando um sistema de destaques – Parte 1
- Criando um sistema de destaques – Parte 2
- O que é e como funciona o jQuery
- Validação de formulários com jQuery
- Entendendo os seletores do jQuery
Postado em CSS, HTML, Tutoriais, jQuery
Com as tags Classe, Código, Collapse, comentários, CSS, Documentação, Download, Evento, Expand, Header, HTML, JavaScript, jQuery, Menu, Scripts, Tutorial, URL, XHTML
Escrito por Thiago Belem
Gostou desse artigo?
Não se esqueça de assinar o RSS e divulgue-o para o mundo:
