JavaScript: En flytande meny - www.JavaScript.nu

EN FLYTANDE MENY

Detta menysystem fungerar med NN4, NN6, IE4, IE5, IE6 och Opera 5.

F�r att scriptet ska fungera p� din sida M�STE du spara ner dessa bilder till den katalog som sidan med scriptet ska finnas i. Under bilden ser du vad bilden ska sparas som. F�rutom detta beh�ver du inte g�ra n�got mer. Det �r bara att kopiera och klistra scriptet till din hemsida.


iconmapp.gif	iconie2.gif

Detta s�tter du direkt efter din BODY-tagg (direkt efter <BODY>):

<STYLE TYPE="text/css">
<!--
/* Don't remove this line: Script by Omid Rouhani from JavaScript.nu */
/*
F�r varje meny ska du ha en "menyX-rad" och en "undermenyX-rad" i detta format:
	#meny1	{position:absolute; visibility:hidden; z-index:10;}
	#undermeny1 {position:absolute; visibility:hidden; z-index:10;}

Exempel:
* Ska du ha tre menyer, �ndra inget nedan.
* Ska du bara ha tv� menyer, ta bort raderna nedan som b�rjar p� #meny3 och #undermeny3.
* Ska du ha fyra menyer l�gger du till tv� rader som b�rjar med #meny4 och #undermeny4.
* etc.
*/

#meny1	{position:absolute; visibility:hidden; z-index:10;}
#undermeny1 {position:absolute; visibility:hidden; z-index:10;}

#meny2	{position:absolute; visibility:hidden; z-index:10;}
#undermeny2 {position:absolute; visibility:hidden; z-index:10;}

#meny3	{position:absolute; visibility:hidden; z-index:10;}
#undermeny3 {position:absolute; visibility:hidden; z-index:10;}

#meny4	{position:absolute; visibility:hidden; z-index:10;}
#undermeny4 {position:absolute; visibility:hidden; z-index:10;}

#meny5	{position:absolute; visibility:hidden; z-index:10;}
#undermeny5 {position:absolute; visibility:hidden; z-index:10;}

/*	Nedan v�ljer du hur rubrikerna och l�nkarna ska se ut:	*/
.menyRubrikClass {font-family:verdana,arial; text-decoration:none; font-weight:bold; color:white; cursor:default; font-size:12px}
A:visited:hover.menyRubrikClass {color:gold;}
A:visited.menyRubrikClass {color:white;}
A:hover.menyRubrikClass {color:gold;}
A.menyRubrikClass {color:black;}

.menyLankClass {font-family:verdana,arial; text-decoration:none; color:white; font-size:12px}
A:visited.menyLankClass {color:white;}
A:hover.menyLankClass {color:gold;}

#menyRamen	{position:absolute; z-index:3;}
//-->
</STYLE>

<SCRIPT LANGUAGE="javascript">
<!--This is one of many scripts which are available at:     *---
//--http://www.JavaScript.nu/javascript                     *---
//--This script is FREE, but you MUST let these lines       *---
//--remain if you use this script.                          *---

// ###########################################################################
// ################NEDAN �NDRAR DU DE L�TTASTE INST�LLNINGARNA################
// ###########################################################################

//***---Best�m vilka rubriker du ska ha nedan. Du kan ha hur m�nga menyer du vill.
rubriker=new Array("Om oss","V�nner","Bilder","Mat","�vriga l�nkar");

//***---Ha med l�nkarna som ska finnas med under var rubrik. Du best�mmer givetvis b�de vart l�nken ska g� och vad texten man ska trycka p� ska vara. Har du fler/f�rre menyer �n fem stycken �r det bara att l�gga till/ta bort rader nedan s� att du f�r s� m�nga som du ska ha menyer.
meny1rubriker=new Array("V�r policy",	"F�retaget");
meny1lankar=new Array(	"policy.html",	"foretag.html");

meny2rubriker=new Array("Kalle Anka",	"Musse Pigg");
meny2lankar=new Array(	"kalle.html",	"musse.html");

meny3rubriker=new Array("Paris",		"Kungen",	"Stockholm");
meny3lankar=new Array(	"paris.gif",	"king.gif",	"stockholm.jpg");

meny4rubriker=new Array("Kykling",		"Kalkon",		"Tomat",		"Ris",	"Pasta",		"Br�d");
meny4lankar=new Array(	"kykling.html",	"kalkon.html",	"tomat.html",	"ris.html",	"pasta.html",	"brod.html");

meny5rubriker=new Array("Altavista",		"Microsoft",		"Netscape");
meny5lankar=new Array(  "http://www.av.com/",	"http://www.msn.com/",	"http://www.netscape.com/");

//***---H�r anger du information om bilden bredvid rubrikerna
bildKatalog="iconmapp.gif";
bildKatalogHojd=15;	//Bildens h�jd
bildKatalogBredd=15;	//Bildens bredd

//***---H�r anger du information om bilden bredvid l�nkarna
bildSida="iconie2.gif";
bildSidaHojd=15;		//Bildens h�jd
bildSidaBredd=20;		//Bildens bredd

//***---H�r anger du hur l�nkarna ska �ppnas. Detta �r v�rdet man har i TARGET. Detta kan vara bara "_top", "_self", "_blank" eller "framensNamn" (namnet p� den frame d�r l�nkarna ska visas)
menyTarget="_self";	//"_top", "_self", "_blank", "framensNamn" kan anges.

//***---H�r anger du rubrikernas h�jd och bredd
menyernasHojd=20;
menyernasBredd=160;

//***---H�r anger du l�nkarnas h�jd. Bredden blir densamma som rubrikernas bredd.
varjeLanksHojd=17;

//***---"rubrikFarg" �r f�rgen p� det som man drar musen �ver f�r att en ny meny ska visas och "menyerFarg" �r f�rgen p� det f�lt d�r l�nkarna finns.
rubrikFarg1="#0099FF";
rubrikFarg2="#1188EE";
menyerFarg="#2277DD";

//***---Detta fungerar endast med Explorer 4 och upp�t: Menyerna �ndrar f�rg n�r musen dras �ver dem, v�lj f�rg h�r.
menyerFargMedMus="gray";

// ###########################################################################
// ##############NEDAN �NDRAR DU DE LITE SV�RARE INST�LLNINGARNA##############
// ###########################################################################

//***---H�r anger du hur menysystemet ska fungera. Testa dig fram och se vad som �r b�st p� din sida.
typ=0;	//Om detta �r -1 kommer undermenyerna ut p� v�nster sida, �r det 0 kommer de ut underifr�n. P� Netscape blir detta automatiskt 0. Dvs, har du -1 h�r s� p�verkas endast de med Explorer.
typ2=1;	//Om detta �r 1 �r alla undermenyerna lika l�nga, �r det 0 �r de olika l�nga
typ3=0;	//Om detta �r 1 �r menyn placerad l�ngst upp och rubbas inte d� musen r�r dem. Detta f�r endast vara 1 om "typ" �r 0.

//***---Ange hur l�ngt ifr�n sidans kant lagret ska placeras. Detta har man f�r att ta h�nsyn til scrollningslistorna. 17 respektive 4 �r v�rden som kan rekommenderas f�r de flesta sidor.
lagerMarginalHoger=17;
lagerMarginalNer=4;

//***---H�r anger du marginalerna i det flytande lagret.
marginalIsjalvaLagretUppe=0;
marginalIsjalvaLagretNere=17;

//***---Detta �r den flytande ramens namn. �ndra INTE detta om du inte vet vad du g�r
lagerSomFoljerMed="menyRamen";

//***---�ndra inte detta om du inte f�rst�tt vad detta �r. Detta p�verkar bara Netscape-anv�ndare. H�r anger du intervalet som ska placera menyn p� r�tt plats. Tiden anges i millisekunder. Explorer placerar lagret r�tt s� fort man scrollar sidan eller �ndrar f�nstrets storlek, Netscape d�remot g�r detta med det interval som anges h�r.
fordrojning=40;

//***---H�r anger du menyns placering inne i sj�lva lagret. V�rdena 0 och 0 rekommenderas.
placeringX=0;
placeringY=0;

//***---�ndra INTE dessa v�rden om du inte vet vad du g�r. H�r anger du rubrikernas och menyernas lagernamn.
menyernasNamn="meny";
underMenyernasNamn="undermeny";

//***---H�r skriver du in den text eller l�gger in koden till den bild som ska �ppna/st�nga det flytande lagret
stangaOppnaKnapp="<St�ng Menyn>";

// ###########################################################################
// ################�NDRA INGET NEDAN OM DU INTE VET VAD DU G�R################
// ###########################################################################

function kontrolleraTyper()
{
	if (typ*typ==1)	//Om typ �r -1 eller 1
	{
	typ3=0;
	}

if (typ==-1 && document.layers)
	{
	typ=0;
	}
}

function placeraUtMenyerOchVisaDem()
{
	for (i=0; i<antalMenyer; i++)
	{
	placera(menyernasNamn+(i+1), menyernasHojd*i+(placeringY+marginalIsjalvaLagretUppe)+(!typ3)*maxAntalLankar*varjeLanksHojd, placeringX);
	visa(menyernasNamn+(i+1));
	}
}

function visaUndermeny(lagerIndex)
{
doljaAllaUndermenyer()
	for (i=0; i<lagerIndex; i++)
	{
	placera(menyernasNamn+(i+1), (typ*typ)*(maxAntalLankar*varjeLanksHojd)+(!typ)*(!typ3)*(maxAntalLankar*varjeLanksHojd-lagretsHojd(underMenyernasNamn+lagerIndex))+menyernasHojd*i+(placeringY+marginalIsjalvaLagretUppe), placeringX);
	}

visa(underMenyernasNamn+lagerIndex);
	placera(underMenyernasNamn+lagerIndex, (typ*typ)*(maxAntalLankar*varjeLanksHojd)+(!typ)*(!typ3)*(maxAntalLankar*varjeLanksHojd-lagretsHojd(underMenyernasNamn+lagerIndex))+(placeringY+marginalIsjalvaLagretUppe)+menyernasHojd*i*(!typ), placeringX+menyernasBredd*(typ));

for (i=lagerIndex; i<antalMenyer; i++)
	{
	placera(menyernasNamn+(i+1), (typ*typ)*(maxAntalLankar*varjeLanksHojd)+(!typ)*(!typ3)*(maxAntalLankar*varjeLanksHojd-lagretsHojd(underMenyernasNamn+lagerIndex))+(placeringY+marginalIsjalvaLagretUppe)+menyernasHojd*i+lagretsHojd(underMenyernasNamn+lagerIndex)*(!typ), placeringX);
	}
senastVisadeUndermenyn=lagerIndex;
}

function doljaAllaUndermenyer()
{
	for (i=0; i<antalMenyer; i++)
	{
	dolj(underMenyernasNamn+(i+1));
	}
}

function doljaAllaRubriker()
{
	for (i=0; i<antalMenyer; i++)
	{
	dolj(menyernasNamn+(i+1));
	}
}

function visaAllaRubriker()
{
	for (i=0; i<antalMenyer; i++)
	{
	visa(menyernasNamn+(i+1));
	}
}

function rubrikFargVarannan()
{
	if (varannanFarg)
	{
	varannanFarg=0;
	return rubrikFarg1;
	}
	else
	{
	varannanFarg=1;
	return rubrikFarg2;
	}
}

menynVisas=true;
function taBortMenyn()
{
	if (menynVisas)
	{
	menynVisas=false;
	doljaAllaUndermenyer()
	doljaAllaRubriker()

}
	else
	{
	menynVisas=true;
	visaAllaRubriker()
		if (senastVisadeUndermenyn!=-1)//Om ett lager visas
		{
		visa(underMenyernasNamn+senastVisadeUndermenyn);
		}
	}
}

function skrivUtMenyer()
{
document.write("<DIV ID='"+lagerSomFoljerMed+"'>")
	for (i=1; i<=antalMenyer; i++)
	{
	skrivUtDetta="";
	skrivUtDetta+=("<DIV ID='"+menyernasNamn+""+i+"' onMouseOver=\"visaUndermeny("+i+")\">")
	skrivUtDetta+=("<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=\""+menyernasBredd+"\" HEIGHT=\""+menyernasHojd+"\" BGCOLOR=\""+rubrikFargVarannan()+"\">");
	skrivUtDetta+=("<TR><TD><A HREF=\"javascript:void(0)\" onMouseOver=\"visaUndermeny("+i+")\" CLASS='menyRubrikClass'><IMG SRC='"+bildKatalog+"' BORDER=0 HEIGHT="+bildKatalogHojd+" WIDTH="+bildKatalogBredd+" VSPACE=0 HSPACE=0> "+rubriker[i-1]+"</A></TD></TR>");
	skrivUtDetta+=("</TABLE></DIV>")

skrivUtDetta+=("<DIV ID='"+underMenyernasNamn+""+i+"'>")
	skrivUtDetta+=("<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=\""+menyernasBredd+"\" BGCOLOR=\""+menyerFarg+"\">");
		antalUndermenyer=eval("meny"+i+"rubriker.length")
		for (j=0; j<antalUndermenyer; j++)
		{
		skrivUtDetta+=("<TR><TD HEIGHT='"+varjeLanksHojd+"' "+styleForTDelement+" onClick=\""+geTargetKod('javascript', eval("meny"+i+"lankar["+j+"]"))+"\" onMouseOver=\"this.style.backgroundColor='"+menyerFargMedMus+"'\" onMouseOut=\"this.style.backgroundColor=''\"><A HREF=\""+eval("meny"+i+"lankar["+j+"]")+"\" TARGET=\""+geTargetKod('lank')+"\" CLASS='menyLankClass'><IMG SRC='"+bildSida+"' BORDER=0 HEIGHT="+bildSidaHojd+" WIDTH="+bildSidaBredd+" VSPACE=0 HSPACE=0> "+eval("meny"+i+"rubriker["+j+"]")+"</A></TD></TR>")
		}
		for (j; j<maxAntalLankar && typ2; j++)
		{
		skrivUtDetta+=("<TR><TD HEIGHT='"+varjeLanksHojd+"'><FONT SIZE='-3'> </FONT></TD></TR>")
		}
	skrivUtDetta+=("</TABLE></DIV>")
	document.write(skrivUtDetta);
	}
document.write("<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=\""+menyernasBredd+"\" HEIGHT='"+lagerHeight+"'>");
	if (marginalIsjalvaLagretUppe!=0)
	{
	document.write("<TR BGCOLOR='yellow'><TD HEIGHT='"+marginalIsjalvaLagretUppe+"' VALIGN='bottom' ALIGN='center'><A HREF=\"javascript:taBortMenyn()\"><FONT FACE='arial,verdana' SIZE='-1'></FONT></A></TD></TR>")
	}
document.write("<TR><TD HEIGHT='"+(lagerHeight-marginalIsjalvaLagretUppe-marginalIsjalvaLagretNere)+"' VALIGN='bottom'> </TD></TR>")
	if (marginalIsjalvaLagretNere!=0)
	{
	document.write("<TR BGCOLOR='yellow'><TD HEIGHT='"+marginalIsjalvaLagretNere+"' VALIGN='bottom' ALIGN='center'><A HREF=\"javascript:taBortMenyn()\"><FONT FACE='arial,verdana' SIZE='-1'>"+stangaOppnaKnapp+"</FONT></A></TD></TR>")
	}
document.write("</TABLE>");
document.write("</DIV>");
}

function initieraNodvandigaVariabler()
{
antalMenyer=rubriker.length;

maxAntalLankar=0;
	for (i=1; i<=antalMenyer; i++)
	{
		antalUndermenyer=eval("meny"+i+"rubriker.length")
		if (antalUndermenyer>maxAntalLankar)
		{
		maxAntalLankar=antalUndermenyer;
		}
	}

//***--- Ange lagrets bredd och h�jd h�r.
			lagerWidth=menyernasBredd;
			lagerHeight=antalMenyer*menyernasHojd+maxAntalLankar*varjeLanksHojd+marginalIsjalvaLagretUppe+marginalIsjalvaLagretNere;

styleForTDelement="";
	if (document.all)
	{
	styleForTDelement="STYLE=\"cursor: hand\"";
	}
	varannanFarg=0;

if (menyTarget == "")
	{
	menyTarget="_self"
	}

senastVisadeUndermenyn=-1;	// -1 ==> inget lager visas
}

function oppnaFonster(URL)
{
	open(URL, 'theNewWindow');
}

function geTargetKod(typ, URL)
{
	if (typ == "lank")
	{
		if (menyTarget == "_blank")
		{
		return "theNewWindow"
		}
		else
		{
		return menyTarget;
		}
	}
	else
	{
		if (menyTarget == "_top")
		{
		return "top.location.href='"+URL+"'"
		}
		else if (menyTarget == "_self")
		{
		return "self.location.href='"+URL+"'"
		}
		else if (menyTarget == "_blank")
		{
		return "oppnaFonster('"+URL+"');"
		}
		else	//Om man har angett framens namn
		{
		return "parent."+menyTarget+".location.href='"+URL+"'"
		}
	}
}

kontrolleraTyper();
initieraNodvandigaVariabler();
skrivUtMenyer();
initieraLagrensAttribut();
placeraUtMenyerOchVisaDem();

start.top=sidPlaceringHojd+sidHojd-lagerHeight-lagerMarginalNer;
start.left=sidPlaceringBredd+sidBredd-lagerWidth-lagerMarginalHoger;
if (!(document.all && navigator.userAgent.indexOf("Opera") == -1))	//Allt f�rutom IE
	setTimeout("fixaPlacering()", fordrojning)
}

if (parseInt(navigator.appVersion)>=4)
{
gorOmLager()
window.onscroll=fixaPlacering;
window.onresize=fixaPlacering;
fixaPlacering();
}
//-->
</SCRIPT>

Om du inte vet hur du ska spara JavaScriptet till din hemsida, tryck d� h�r.