Menu sanfona com JQuery apenas utilizando as tags UL e LI
Publicado por João Pinto Neto 09/01/2008
[ Hits: 14.454 ]
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
Nenhum comentário foi encontrado.
IA Turbina o Desktop Linux enquanto distros renovam forças
Como extrair chaves TOTP 2FA a partir de QRCODE (Google Authenticator)
Linux em 2025: Segurança prática para o usuário
Desktop Linux em alta: novos apps, distros e privacidade marcam o sábado
IA chega ao desktop e impulsiona produtividade no mundo Linux
Atualizando o Fedora 42 para 43
Como saber se o seu e-mail já teve a senha vazada?
Como descobrir se a sua senha já foi vazada na internet?
Warcraft II Remastered no Linux? (6)
O programa assinador digital (5)









