Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia Pessoal, preciso de um menu com 3 níveis.
Mas o segundo precisa ser horizontal e o 3º vertical.
Só consigo encontrar tudo vertical.
Tenho um que funciona bem mas é só 2 níveis e não consigo implementar o 3º.
Alguém poderia me ajudar?
Muito obrigada!
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.familysites.com.br/images/menu.jpg&key=5fa6a81f1325f4178710764abed5f77d6a1012815ae8a64774fe147f0c390040" alt="menu.jpg" />
Este é o código do menu acima.
<!doctype html><html lang="en"><head> <meta charset="utf-8" /> <title>jQuery UI Menu - Default functionality</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#menu a").click(function(){ var menu = $(this).parent().children('.submenu'); var submenu = $(this).parent().parent(); if(menu.length > 0 && menu.is(':hidden')){ $("#menu a").removeClass('ativo'); $(this).addClass('ativo'); $('.submenu').slideUp(); menu.slideDown(); } if(!submenu.hasClass('submenu') && menu.length == 0){ $("#menu a").removeClass('ativo'); $(this).addClass('ativo'); $('.submenu').slideUp(); } });}); </script> <style type="text/css"> *{ margin:0; padding:0;} ul{ list-style:none; } ul#menu{ width:500px; margin:0 auto;}ul#menu li{ float:left; position:relative; }ul#menu li a{ display:block; float:left; padding:0 15px; height:25px; line-height:25px; text-decoration:none; color:#333; border:1px solid #ccc;} ul#menu li a:hover, ul#menu li a.ativo{ background:#ccc;}ul#menu li a:hover{ background:#ccc; color:#FF0000; } ul#menu li ul{ display:none; position:absolute; top:25px; left:0; width:460px; background:#ccc;} /*ul#menu li:hover ul{ display:block;}*/ </style> </head><body> <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">Serviços</a> <ul class="submenu"> <li><a href="#">Serv 1</a> <ul class="submenu"> <li><a href="#">Serv 1.1</a></li> <li><a href="#">Serv 1.1</a></li> </ul> </li> <li><a href="#">Serv 2</a></li> <li><a href="#">Serv 3</a></li> </ul> </li> <li><a href="#">Produtos</a> <ul class="submenu"> <li><a href="#">Prod 1</a></li> <li><a href="#">Prod 2</a></li> <li><a href="#">Prod 2</a></li> </ul> </li> <li><a href="#">Cliente</a></li> <li><a href="#">Contato</a></li> </ul> </body></html>Poderiam ajudar?
:flores:
alguém poderia ajudar?
Carregando comentários...