Menu sanfona com JQuery apenas utilizando as tags UL e LI
Publicado por João Pinto Neto 09/01/2008
[ Hits: 13.971 ]
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>
Nenhum comentário foi encontrado.
Como agendar um backup automático do PostgreSQL no Cron evitando o problema de senha
Como preparar o Vim/Neovim para corrigir ortografia em português
Dark Web e Malwares na internet, quanto custa?
Configuração básica do Conky para mostrar informações sobre a sua máquina no Desktop
Como verificar o hash de um arquivo baixado da Internet e como criar um hash
Debian 12 - IPTABLES - removendo NFTABLES
OverWatch 2 - Abrindo portas do jogo no Iptables.
Como instalar o adaptador wifi USB Intelbras ACtion A1200 no Linux Mint
Como normalizar seus arquivos MP3 para que fiquem no mesmo volume
Instalação do Programa Imposto de Renda Pessoa Física 2023 [RESOLVIDO]... (6)
Instalando e compilando o GCC/G++ erro (4)
[C/C++] BRT - Bulk Renaming Tool
[Shell Script] Criação de Usuarios , Grupo e instalação do servidor de arquivos samba
[Shell Script] Tire screenshots com Scrot facilmente com Zscrot
[Shell Script] DioPSI - Script multidistro para instalar programas
[Shell Script] ARS Vídeos - Cortador de vídeos e webcam shooter