Menu sanfona com JQuery apenas utilizando as tags UL e LI
Publicado por João Pinto Neto 09/01/2008
[ Hits: 14.284 ]
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>
Indica a pagina dependendo da resolução do usuario
Trocar imagem quando o mouse estiver em cima da imagem
Nenhum comentário foi encontrado.
tux-gpt - Assistente de IA para o Terminal
Instalação e configuração do Chrony
Programa IRPF - Guia de Instalação e Resolução de alguns Problemas
O Que Fazer Após Instalar Ubuntu 25.04
O Que Fazer Após Instalar Fedora 42
Debian 12 -- Errata - Correções de segurança
Instalando o Pi-Hole versão v5.18.4 depois do lançamento da versão v6.0
Liberação de alguns links no squid (23)
NAT LoopBack - Hairpin NAT (1)
Alguém poderia me ajudar a escolher peças pra montar um desktop? (14)