|
1 |
Total de visitas: 12096
Menu Sanfona em Jquery
Viva!
Tenho visto muita informação sobre este tipo de menus na internet, mas nada a meu ver que explique a um iniciante na matéria.
A programação deste tipo de menus tem a ver com aquilo que incluimos no código HTML da nossa página, particularmente o que escrevemos entre as tags>/Head>e.
Vou dar um exêmplo de um menu destes funcionando, em que o código para a realização do mesmo é o seguinte:
-
<HTML>
<HEAD>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<SCRIPT>
$(document).ready(function(){
$("dd").hide();
$("dt a").click(function(){
$("dd:visible").slideUp("slow");
$(this).parent().next().slideDown("slow");
return false;
});
});
</SCRIPT>
<TITLE>Simplest Accordion Menu using jQuery - DEMO</TITLE>
<STYLE>
dl { width: 300px; }
dl,dd { margin: 0; }
dt { background: #CCC; font-size: 18px; padding: 5px; margin: 2px; }
dt a { color: #000; }
dd a { color: #000; }
ul { list-style: none; padding: 5px; }</STYLE>
</HEAD>
<BODY>
<H2> </H2><dl>
<dt><a href="#">Menu 1</li></a></dt>
<dd>
<ul>
<li><a href="#">Menu 1 - Item 1</a></li>
<li><a href="#">Menu 1 - Item 2</a></li>
<li><a href="#">Menu 1 - Item 3</a></li>
</ul>
</dd>
<dt><a href="#">Menu 2</li></a></dt>
<dd>
<ul>
<li><a href="#">Menu 2 - Item 1</a></li>
<li><a href="#">Menu 2 - Item 2</a></li>
<li><a href="#">Menu 2 - Item 3</a></li>
</ul>
</dd>
<dt><a href="#">Menu 3</li></a></dt>
<dd>
<ul>
<li><a href="#">Menu 3 - Item 1</a></li>
<li><a href="#">Menu 3 - Item 2</a></li>
<li><a href="#">Menu 3 - Item 3</a></li>
</ul>
</dd>
</dl>
</BODY></HTML>
Aqui foi utilizada a biblioteca jquery-1.3.2.js que deve ser tranferida para a raíz do seu site por um programa de ftp como o filezilla.
o que se encontra dentro da tag style é o css do nosso menu que pode ser alterado a seu gosto
Local para o download da biblioteca:
Menu funcionado:
http://www.botecodigital.info/exemplos/menusanfona/index.php