Menu sanfona com JQuery apenas utilizando as tags UL e LI
Publicado por João Pinto Neto 09/01/2008
[ Hits: 14.149 ]
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>
Fechar janela pop up automaticamente
Nenhum comentário foi encontrado.
Compartilhando a tela do Computador no Celular via Deskreen
Como Configurar um Túnel SSH Reverso para Acessar Sua Máquina Local a Partir de uma Máquina Remota
Configuração para desligamento automatizado de Computadores em um Ambiente Comercial
Como renomear arquivos de letras maiúsculas para minúsculas
Imprimindo no formato livreto no Linux
Vim - incrementando números em substituição
Efeito "livro" em arquivos PDF
Como resolver o erro no CUPS: Unable to get list of printer drivers
É cada coisa que me aparece! - não é só 3% (3)
Melhorando a precisão de valores flutuantes em python[AJUDA] (5)
[Python] Automação de scan de vulnerabilidades
[Python] Script para analise de superficie de ataque
[Shell Script] Novo script para redimensionar, rotacionar, converter e espelhar arquivos de imagem
[Shell Script] Iniciador de DOOM (DSDA-DOOM, Doom Retro ou Woof!)
[Shell Script] Script para adicionar bordas às imagens de uma pasta