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 (já me deparei com isso). Para resolver esse problema veja este script.
Faça o download do jQuery aqui: http://code.google.com/p/jqueryjs/downloads/list
<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:
Postar um comentário