Menu sanfona com JQuery apenas utilizando as tags UL e LI
Publicado por João Pinto Neto 09/01/2008
[ Hits: 14.267 ]
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>
SCROLBAR COM EFEITO MOVE COLOR !!!!
Nenhum comentário foi encontrado.
Como gerar qualquer emoji ou símbolo unicode a partir do seu teclado
Instalar e Configurar o Slackware Linux em 2025
Como configurar os repositórios do apt no Debian 12 em 2025
Passkeys: A Evolução da Autenticação Digital
Instalação de distro Linux em computadores, netbooks, etc, em rede com o Clonezilla
Configurando o Conky para iniciar corretamente no sistema
3 configurações básicas que podem melhorar muito a sua edição pelo editor nano
Como colorir os logs do terminal com ccze
Instalação Microsoft Edge no Linux Mint 22
Como configurar posicionamento e movimento de janelas no Lubuntu (Openbox) com atalhos de teclado
firefox nao guarda meus logins nos sites (1)
Instalar debian testing (13) "por cima" do debian 12 (2)
Erro de segmentação «Segmentation fault (core dumped)» ao retornar obj... (1)