Menu orizzontale con effetto fisarmonica via JavaScript!
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