Menu sanfona com JQuery apenas utilizando as tags UL e LI

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

[ Hits: 13.407 ]

Homepage: http://joaopintoneto.com/

Download acordionmenu.tar.gz




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

Calculadora Bem Legal box shadow e border Radius

Relógio

Jogo da Velha com JavaScript e SVG

Link feito aparti de java b

EFEITO NO BACK


  

Comentários

Nenhum comentário foi encontrado.


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner
Linux banner
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts