Translate to English Translate to Spanish Translate to French Translate to German Google-Translate-Portuguese to Italian Translate to Russian Translate to Chinese Translate to Japanese

Rating: 2.3/5 (185 votos)



ONLINE
1









Total de visitas: 12245

Menu Sanfona em Jquery

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>&nbsp;</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:

https://jquery.com/

 

Menu funcionado:

https://www.botecodigital.info/exemplos/menusanfona/index.php