Menu sanfona com JQuery apenas utilizando as tags UL e LI
Publicado por João Pinto Neto 09/01/2008
[ Hits: 14.431 ]
Homepage: http://joaopintoneto.com/
Existem vários tutorias de menus que utilizam tags DL, DT, UL e LI, mas vários menus gerados dinamicamente utilizam apenas tags UL e LI.
Para resolver esse problema veja este script. Faça o download, que já vem com o jquery na versão que eu utilizo neste menu.
<html> <head> <title>JQuery - Menu Sanfona</title> <script type="text/javascript" src="jquery.js"></script> <style> #leftblock { float:left; font-family:Arial, Helvetica, sans-serif; font-size:10px; } #leftblock ul { margin:10px; padding:0; list-style:none; width:200px; } #leftblock ul li a { display:block; text-decoration:none; color:#666666; background:#FFFFFF; padding:5px; border-bottom:0; } #leftblock ul li a:hover { color:#FF3300; } #leftblock ul ul { margin:0px; top:0; } #leftblock li ul li a { padding:5px 20px; background:none; } </style> <script type="text/javascript"> var cores = new Array("#FFFFF5","#F5FFF5","#FFF5F5","#F5F5FF","#F5FFFF","#FFF5FF","#F9F9F9","#FDF5F5"); $(document).ready(function(){ $("#leftmenu ul").each(function(i){$(this).css({"backgroundColor":cores[i+1]})}); $("#leftmenu ul:not(:first)").hide(); $("#leftmenu li a").click(function() { $("#leftmenu li ul:visible").slideUp("slow"); $(this).parent().find("ul:eq(0)").slideToggle("slow"); }); }); </script> </head> <body> <div id="leftblock"> <ul id="leftmenu"> <li><a href="index.php">Pagina principal</a></li> <li><a href="#">Usuarios »</a> <ul> <li><a href="novo.php">Cadastrar</a></li> <li><a href="lista.php">Listar</a></li> </ul> </li> <li><a href="#">Centro de Distribuicao »</a> <ul> <li><a href="novo.php">Novo centro de distribuicao</a></li> <li><a href="lista.php">Listar centro de distribuicao</a></li> </ul> </li> <li><a href="#">Estoque »</a> <ul> <li><a href="novo.php">Novo produto em estoque</a></li> <li><a href="lista.php">Listar produtos em estoque</a></li> <li><a href="busca.php">Buscar item no estoque</a></li> </ul> </li> </ul> </div> <h1>Menu sanfona com JQuery</h1> Apenas usando as tags UL e LI. <br /> <br /> <br /> Por: João Pinto Neto<br /> e-mail: joaopintoneto at gmail dot com </body> </html>
Calculadora Bem Legal box shadow e border Radius
Indica a pagina dependendo da resolução do usuario
EFEITO NEVE REVISADO COM MAIS FLOCOS!
SCROLBAR COM EFEITO MOVE COLOR !!!!
Nenhum comentário foi encontrado.
Wayland em alta, IA em debate e novos ventos para distros e devices
Qt 6.10 e Python 3.14 puxam o ritmo do software livre nesta quarta
Atualizações de Apps, Desktop e Kernel agitam o ecossistema Linux nesta terça-feira
Miyoo Mini Plus + Onion OS (Linux)
IA local no bolso, novo visual no Raspberry Pi OS e mais destaques do software livre
Como mudar o nome de dispositivos Bluetooth via linha de comando
Adicionando o repositório backports no Debian 13 Trixie
queria saber como instalar o android power tools igual ao winux no lin... (7)
Como listar os arquivos em "bloquin... [RESOLVIDO] (6)
Como colocar atalho para uma pasta na área de trabalho do Ubuntu 24.04... (2)