Una delle mie maggiori passioni, oltre a quella di scrivere sui blog, è quella di creare siti internet o di modificarne alcuni già creati. Oggi vi voglio presentare uno JavaScript che vi permette di avere un effetto Fisarmonica sul menu dei vostri siti internet. L’effetto, come dicevo prima, è applicato via JavaScript, che pesa meno di 1Kb, questo rende lo script più funzionale e veloce nel caricamento.
Esistono due tipi di menu a fisarmonica, nel primo vediamo che scorrendo sopra i link con il mouse i collegamenti si muovono e una volta tolto il mouse tornano al loro posto. Nella seconda variante invece, passando il mouse sopra i collegamenti, osserviamo che questi si muovono e che una volta tolto il mouse restano così come sono, senza riposizionarsi nel modo originale. Ora però vediamo quali script usare per rendere attivo questo JavaScript.
La prima cosa da fare è quella di inserire il seguente codice JavaScript, all’interno del vostro sito:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
slideMenu.build('sm',200,10,10,1);
});
Una volta inserito questo, andremo a creare il nostro menu con il seguente codice:
<ul class="sm"> </ul><ul class="sm">
<li> <img src="images/1.gif" alt="" /> </li> <li> <img src="images/1.gif" alt="" />
</li><li> <img src="images/2.gif" alt="" /> </li> <li> <img src="images/2.gif" alt="" />
</li><li> <img src="images/3.gif" alt="" /> </li> <li> <img src="images/3.gif" alt="" />
</li><li> <img src="images/4.gif" alt="" /> </li> <li> <img src="images/4.gif" alt="" />
</li></ul>
Terminate queste due operazione avremo un menu con effetto fisarmonica leggero e funzionale al 100%. Lo script è veramente comodo, un altro effetto 2.0 da inserire sul nostro sito personale. La prima versione di questo script, la trovate in questo sito, mentre la seconda è reperibile qui.
Via | Leigeber
#1Angelo
[…] Menu orizzontale con effetto fisarmonica via JavaScript! […]
#2mantio
sarebbe interessante capire come inserire questo menù in un csm esistente come joomla o wordpress
#3Sagro
@Mantio
Per Joomla esistono già dei plugin, anche gratuiti che lo fanno. Purtroppo non ricordo i nomi a appena li ritrovo ti faccio sapere =)
#4Muffsdaddy
Come si inserisce il codice Java Script all’interno del sito?
#5Angelo
Ciao muffsdaddy, dai un’occhiata qua, è tutto spiegato: http://noizexperience.blogspot.com/2008/06/come-realizzare-un-menu-orizzontale.html
#6elisa
come faccio a creare piu' istanze dello stesso menu?!?!
mi servirebbe per fare un elenco di servizi, divisi per categoria ma con lo stesso effetto..