Menu sanfona com JQuery apenas utilizando as tags UL e LI [Javascript]

Menu sanfona com JQuery apenas utilizando as tags UL e LI

Publicado por João Pinto Neto 09/01/2008

[ Hits: 14.555 ]

Homepage: http://joaopintoneto.com/

Download acordionmenu.tar.gz

0 0

Denuncie Favoritos Indicar

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.

Esconder código-fonte

<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>

Scripts recomendados

Mudando o layout dinamicamente

Comentários

Nenhum comentário foi encontrado.