Quello che vado a presentarti è un semplicissimo modo di realizzare un menu ad effetto utilizzando jQuery. Se un menu con i soli CSS non ti basta questo è un buon modo per iniziare a prendere confidenza con javascript.
Si basa, come detto, sulla ormai famosissima libreria javascript jQuery e prevede un’animazione di tipo slide per mostrare i sottomenu. L’effetto è molto gradevole e la semplicità del codice permette diverse personalizzazioni anche senza grandi conoscenze di html e css.
Ecco i passi da seguire per realizzarlo…
per prima cosa devi includere jQuery:
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
Sempre all’interno del tag Head andiamo ora a richiamare la funzione che ci permette di animare il menu:
<script type="text/javascript">
$(document).ready(function(){
$("#menu .menu_head").click(function(){
$(this).next(".menu_body").slideToggle(300).siblings(".menu_body"
).slideUp("slow");
});});
</script>
Ti basterà modificare il valore slideToggle impostato a 300 per avere un menu più veloce o più lento nell’aprirsi.
La parte html è composta da una classica lista. Questo è il codice html da inserire dove vuoi che venga inserito il tuo menu:
<ul id="menu" class="menu_list">
<li class="menu_head"><a href="#">MENU 1</a></li>
<li class="menu_head"><a href="#">MENU 2</a></li>
<li class="menu_head"><a href="#">MENU 3*</a></li>
<ul class="menu_body">
<li><a href="#">MENU 3-1</a></li>
<li><a href="#">MENU 3-2</a></li>
</ul>
<li class="menu_head"><a href="#">MENU 4*</a></li>
<ul class="menu_body">
<li><a href="#">MENU 4-1</a></li>
<li><a href="#">MENU 4-2</a></li>
<li><a href="#">MENU 4-3</a></li>
<li><a href="#">MENU 4-4</a></li>
</ul>
<li class="menu_head"><a href="#">MENU 5</a></li>
<li class="menu_head"><a href="#">MENU 6*</a></li>
<ul class="menu_body">
<li><a href="#">MENU 6-1</a></li>
<li><a href="#">MENU 6-2</a></li>
<li><a href="#">MENU 6-3</a></li>
</ul>
<li class="menu_head"><a href="#">MENU 7</a></li>
</ul>
Per completare l’opera l’unica cosa che devi fare è inserire nel tuo css la seguente proprietà:
.menu_body {
display:none;
position: relative;
}
Questa serve a fare in modo che i secondi livelli del tuo menu siano inizialmente nascosti per permettere poi al javascript di attivarli con il click del mouse.
Ecco il risultato:
Gli altri stili inclusi nel mio esempio non sono necessari per il funzionamento del menu.
Download
L’esempio completo di stile lo puoi scaricare da qui:
Webquadro Menu Js (204)Ecco una lista di altre risorse che potrebbero interessarti:
Condividi
Se hai trovato interessante questo post, condividilo con i tuoi amici tramite i social network:
Commenti
Trackback e Pingback
[...] Se invece vuoi un menu dinamico che faccia uso di javascript prova a seguire questo tutorial: Semplice menu javascript con jQuery [...]
Invia un commento