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.