Coisa rápida 🙂
JS
$(document).ready(function(){
$('#accordion-container > li > a').bind('click',function() {
var $next = $(this).next();
if ($next.is(':visible')) return false;
$(this).parent().parent().find('li > ul:visible').slideUp('normal');
$next.slideDown('normal');
return false;
});});
CSS
ul {
margin:0;padding:0;
list-style:none;
}
ul#accordion-container {
width:200px;
padding:2px;
}
ul#accordion-container > li {
margin-top:1px;
background:#555;
}
ul#accordion-container > li > a {
display:block;
padding: 4px;
color: #fff;
text-decoration:none;
outline:none;
}
ul#accordion-container > li > a:hover {
background: #000;
}ul.accordion-menu {
display:none;
background:#ccc;
}
ul.accordion-menu a {
display:block;
padding-left: 4px;
background:#ccc;
color:#555;
text-decoration:none;
outline:none;
}
ul.accordion-menu a:hover {
color:#fff;
}
HTML
<ul id="accordion-container"> <li> <a href="#">Menu 1</a> <ul class="accordion-menu"> <li><a href="#">link de menu</a></li> <li><a href="#">link de menu</a></li> <li><a href="#">link de menu</a></li> <li><a href="#">link de menu</a></li> <li><a href="#">link de menu</a></li> <li><a href="#">link de menu</a></li> </ul> </li> <li> <a href="#">Menu 2</a> <ul class="accordion-menu"> <li><a href="#">link de menu</a></li> <li><a href="#">link de menu</a></li> <li><a href="#">link de menu</a></li> <li><a href="#">link de menu</a></li> <li><a href="#">link de menu</a></li> <li><a href="#">link de menu</a></li> </ul> </li> <li> <a href="#">Menu 3</a> <ul class="accordion-menu"> <li><a href="#">link de menu</a></li> <li><a href="#">link de menu</a></li> <li><a href="#">link de menu</a></li> <li><a href="#">link de menu</a></li> <li><a href="#">link de menu</a></li> <li><a href="#">link de menu</a></li> </ul> </li> </ul>
[s]
JunioR
Juareznjunior's Weblog 
Muito bom esse exemplo!! Mas além desse preciso que quando o usuário clicar no menu aberto ele feche também… mexi no script e nada de resultado…
Refiz o exemplo do post, veja como ficou:
http://juarez.ecomtecnologia.com.br/jquery/accordion.html
[s]
Muito bom, mas não funciona no Internet Explorer 6! Fica completamente bugado.
No Firefox fica legal.
O velho “amigo” ie6 e seus problemas com css. Nada que um hack não resolva. Vai em frente amigo!!!
[s]
amigo
muito bom seu menu, adaptei sem problema as minhas necessidades, porem
como até foi comentado acima, precisava que ao clicar no menu o submenu fechasse e oq acontece eh q ele fecha, porém abre sozinho novamente..
caso vc conseguisse resolver o prolema ficaria grato
obrigado pela atencao
abrass
Coloca o fonte no jsbin para melhor visualização.
[s]