Hello gente!

Hoje a doideira vai ser fazer um menu accordion usando o nosso amigo Jquery. Nesse exemplo usei css para dar alguns efeitos de cores, blza?

Abaixo o script do nosso menu.

$(document).ready(function(){
var menus = {
menu1: 1,
menu2: 2,
menu3: 3,
menu4: 4
}
// passando os parametros para a função
$.each(menus, function(i, val){
//esconde todos os submenus
$(‘ul li ul’).hide();
// mostra somente o primeiro submenu
$(‘ul li ul:first’).show();
$(‘#’+i).click(function(){
//crio uma variavel pra selecionar os submenus
var prox = $(this).next();
// então uso o efeito slideUp em todos os submenus
$(prox).parent().parent().find(‘ul’).slideUp(‘normal’);
// e mostro somente os submenus
//que fazem parte do menu que foi clicado
$(prox).slideDown(‘normal’);
return false;
});
});
});

HTML

<ul id=”boxMenus”>
<li>
<a href=”#” id=”menu1″ class=”menu”>TRABALHOS</a>
<ul>
<li><a href=”#”>&raquo; Web Design</a></li>
<li><a href=”#”>&raquo; Design Gráfico</a></li>
</ul>
</li>
<li>
<a href=”#” id=”menu2″ class=”menu”>NOTÍCIAS</a>
<ul>
<li><a href=”#”>&raquo; Tecnologia</a></li>
<li><a href=”#”>&raquo; Robótica</a></li>
<li><a href=”#”>&raquo; Mundo</a></li>
</ul>
</li>
<li>
<a href=”#” id=”menu3″ class=”menu”>CONTATO</a>
</li>
<li>
<a href=”#” id=”menu4″ class=”menu”>CURSOS</a>
<ul>
<li><a href=”#”>&raquo; CSS</a></li>
<li><a href=”#”>&raquo; XHTML</a></li>
<li><a href=”#”>&raquo; PHP</a></li>
<li><a href=”#”>&raquo; JQuery</a></li>
</ul>
</li>
</ul>

Para ver o menu funcionando clique aqui.
Dúvidas comentem ai, blza? até a próxima galera. abraços.


segunda-feira, 8 junho - 2009
por


  1. Lauro A L Brito on segunda-feira 8, 2009

    Excelente – Parabéns
    Realmente a gente apanha um bocado quando programando em js pelo fato de não termos um bom debugger a disposição.


0

Spam protection by WP Captcha-Free


Tweetar