Home + Webmaster + Script + Javascript + Menù + Slide Menù

Slide Menù

Uno script che genera un simpatico menu, l'effetto è gradevole e non richiama troppo l'attenzione dei navigatori.

<html>
<head>
<title>Slide menu</title>
<!------------------------------------------------------
Questo e' il foglio di stile che permette di definire
il colore dello sfondo e del testo

------------------------------------------------------->
<STYLE TYPE="text/css">

</STYLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
n = (document.layers) ? 1:0
ie = (document.all) ? 1:0
function init() {
	pulloutActive = 0
	if (n) {
		pullout1 = document.pulloutInterface.document.pulloutContent.document.pulloutContent1
		pullout2 = document.pulloutInterface.document.pulloutContent.document.pulloutContent2
		pullout3 = document.pulloutInterface.document.pulloutContent.document.pulloutContent3
		pullout4 = document.pulloutInterface.document.pulloutContent.document.pulloutContent4
	}
	if (ie) {
		pullout1 = pulloutContent1.style
		pullout2 = pulloutContent2.style
		pullout3 = pulloutContent3.style
		pullout4 = pulloutContent4.style
	}
	pulloutShown = pullout1		// the layer that is currently shown
	pulloutShown.xpos = 0
	pulloutNew = "none"			// the layer that we will be shown next
	pulloutNew.xpos = -285
}
// Pullout Function, starts the sequence
function pullout(which) {
	if (!pulloutActive && pulloutShown != which) {
		pulloutActive = 1  // this makes it so you can't start it again until it's finished
		pulloutNew = which
		pulloutNew.xpos = -285
		pulloutLeft()
	}
}

// Slide the old layer out of view
function pulloutLeft() {
	if (pulloutShown.xpos > -285) {
		pulloutShown.xpos -= 15
		pulloutShown.left = pulloutShown.xpos
		setTimeout("pulloutLeft()",30)
	}
	else {
		hide(pulloutShown)
		show(pulloutNew)
		setTimeout("pulloutRight()",50)
	}
}

// Slide the new layer into view
function pulloutRight() {
	if (pulloutNew.xpos < 0) {
		pulloutNew.xpos += 15
		pulloutNew.left = pulloutNew.xpos
		setTimeout("pulloutRight()",30)
	}
	else {
		pulloutShown = pulloutNew
		pulloutActive = 0  // stops the sequence
	}
}
// Show/Hide Functions
function show(showobj) {
	if (n) showobj.visibility = "show"
	if (ie) showobj.visibility = "visible"
}
function hide(hideobj) {
	if (n) hideobj.visibility = "hide"
	if (ie) hideobj.visibility = "hidden"
}

//-->
</SCRIPT>
</head>

<!-------------------------------------------------

Questi sono i nomi dei menu di sinistra

------------------------------------------------------->
<DIV ID="pulloutInterface">
<DIV ID="pulloutSidebar1"><P ALIGN=CENTER><A HREF="javascript:pullout(pullout1)">Primo gruppo</A></P></DIV>
<DIV ID="pulloutSidebar2"><P ALIGN=CENTER><A HREF="javascript:pullout(pullout2)">Secondo gruppo</A></P></DIV>
<DIV ID="pulloutSidebar3"><P ALIGN=CENTER><A HREF="javascript:pullout(pullout3)">Terzo gruppo</A></P></DIV>
<DIV ID="pulloutSidebar4"><P ALIGN=CENTER><A HREF="javascript:pullout(pullout4)">Quarto gruppo</A></P></DIV>

<!------------------------------------------------------

Ognuno dei gruppi che segue e' il testo che appare
quando si clicca su una delle voci di menu si sinistra

------------------------------------------------------->

<DIV ID="pulloutContent">
<DIV ID="pulloutContent1">
<P ALIGN="CENTER"><STRONG>Link 1</STRONG>
<TABLE BORDER=0 WIDTH=275><TD>
<P>Qui va inserito il testo che vuole richiamare dal menu di sinistra (Link 1).<BR><BR>
<a href="http://www.4yougratis.it">4you Gratis!</a>
</TD></TABLE>
</P>
</DIV>

<DIV ID="pulloutContent2">
<P ALIGN="CENTER"><STRONG>Link 2</STRONG>
<TABLE BORDER=0 WIDTH=275><TD>
<P>Qui va inserito il testo che vuole richiamare dal menu di sinistra (Link 2). 
</TD></TABLE>
</P>
</DIV>

<DIV ID="pulloutContent3">
<P ALIGN="CENTER"><STRONG>Link 3</STRONG>
<TABLE BORDER=0 WIDTH=275><TD>
<P>Qui va inserito il testo che vuole richiamare dal menu di sinistra (Link 3). Risorse per tutti i webmaster su 4you Gratis!</TD></TABLE>
</P>
</DIV>

<DIV ID="pulloutContent4">
<P ALIGN="CENTER"><STRONG>Link 4</STRONG>
<TABLE BORDER=0 WIDTH=275><TD>
<P>Qui va inserito il testo che vuole richiamare dal menu di sinistra (Link 4).</TD></TABLE>
</P>
</DIV>
</DIV>
</body>
</html>

Compatibilità: MsIE | Netscape

Javascript

Altre risorse:
Libri Javascript | Manuale Javascript

Guadagna con i sondaggi! Iscriviti adesso e potrai guadagnare qualche soldino partecipando ai sondaggi online!

E-Learning Scopri il catalogo dei corsi, da quello per webmaster a quelli di programmazione avanzata!

Linux Guida al sistema operativo open-source, completamente gratuito e potente.