Menu sanfona com JQuery apenas utilizando as tags UL e LI

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

[ Hits: 13.971 ]

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

2° modelo de barra

Qual é meu navegador?

Musica no WEB SITE

Relógio

Efeito de Neon com CSS


  

Comentários

Nenhum comentário foi encontrado.


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts