JavaScript: Ha popupmenyer på sidan [1]

HA POPUPMENYER PÅ SIDAN [1]

Detta menysystem fungerar med NN4, NN6, IE4, IE5, IE6 och Opera 5.
Tänk på att du kan välja om du vill centrera menyn på din sida eller om du vill placera den på en fast punkt på sidan.

Liknande script: Popup 1 - Popup 2 - Popup 3

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;}
	#undermeny1 {position:absolute; visibility:hidden;}

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;}
#undermeny1 {position:absolute; visibility:hidden;}

#meny2	{position:absolute; visibility:hidden;}
#undermeny2 {position:absolute; visibility:hidden;}

#meny3	{position:absolute; visibility:hidden;}
#undermeny3 {position:absolute; visibility:hidden;}

/*	Nedan väljer du hur rubrikerna och länkarna ska se ut (t.ex. textfärg):	*/
/* Menyer vanligt: */			.menyRubrikClass {font-family:arial,verdana; text-decoration:none; color:darkblue; font-weight:bold; cursor:default}
/* Menyer då musen är på dem: */	.menyRubrikClass:hover {font-family:arial,verdana; text-decoration:none; color:darkblue; font-weight:bold; cursor:default}
/* Menyer då man besökt dem: */	.menyRubrikClass:visited {font-family:arial,verdana; text-decoration:none; color:darkblue; font-weight:bold; cursor:default}
/* Menyer då man trycker på dem: */	.menyRubrikClass:active {font-family:arial,verdana; text-decoration:none; color:darkblue; font-weight:bold; cursor:default}
/* Länkar vanligt: */			.menyLankClass {font-family:arial,verdana; text-decoration:none; color:blue;}
/* Länkar då musen är på dem: */	.menyLankClass:hover {font-family:arial,verdana; text-decoration:none; color:yellow;}
/* Länkar då man besökt dem: */	.menyLankClass:visited {font-family:arial,verdana; text-decoration:none; color:red;}
/* Länkar då man trycker på dem: */	.menyLankClass:active {font-family:arial,verdana; text-decoration:none; color:orange;}
//-->
</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.                          *---

//***---Lagrets placering räknat från översta vänstra hörnet:
pixelNer=0;
pixelVanster=0;   //Om du vill centrera sidan så strunta i att ändra denna

//***---Vill du inte centrera menyn skriver du "nej" på båda dessa. Vill du ha menyn centrerad på sidan så skriver du "ja" på NÅGON av dessa (dock inte båda). Du kan välja att centrera i förhållande till besökarens skärmstorlek eller i förhållande till den faktiska storleken sidan fått i webbläsaren (man tar alltså hänsyn till om det finns frames eller om besökaren t.ex. inte har webbläsaren maximerad). Troligtvis så vill du centrera i förhållande till webbläsarstorleken.
skaVaraCentreradIForhallandeTillSkarmstorlek="nej";
skaVaraCentreradIForhallandeTillWebblasarstorlek="nej";

//***---Rubrikernas storlek i bredd och höjd. 
lagerBredd=150;
lagerHojd=20;

//***---Ändra inte dessa värden om du inte vet vad du gör!!! Dessa är namnen på DIV-elementen men ska inte ändras om du absolut inte måste (och då bara om du vet vad du håller på med)!
lagernamn="meny";			//dina menyers lager ska alltså heta "meny1", "meny2" etc.
lagernamn2="undermeny";		//de menyer som sedan poppar fram ska heta "undermeny1", "undermeny2" etc.

//***---"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.
rubrikFarg="silver";
menyerFarg="silver";

//***---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="#cccccc";

//***---Så här många millisekunder ska det ta från det att musen dras från lagret tills lagret dras in. OBS: För Netscape är det lite kinkigare än för explorer, så jag rekommenderar inte att värdet är lägre än 400, även om det fungerar fint i Explorer med mindre än 400 kan Netscapeanvändare med ett lägre värde av misstag få menyn borttagen bara för att musen råkar åka en bit bort från själva länkarna.
stangInterval=400;

//***---Länkarna ska öppnas i vilken frame? Detta är samma som TARGET="x"
popupmenyTarget="_self";	//"_top", "_self", "_blank", "framensNamn" kan anges.

//***---Nu till det roliga, bestäm vilka rubriker som ska finnas med. Ha med hur många som helst.
rubriker=new Array("Om oss","Vänner","Ö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("Altavista",		"JavaScript.nu",		"Netscape");
meny3lankar=new Array(  "http://www.av.com/",	"http://www.JavaScript.nu/",	"http://www.netscape.com/");

//***---Detta ska INTE ändras!!! Låt raden nedan förbli omodifierad. Sätts 'varningFrameSaknas' till en tom sträng så varnar inte scriptet om den inte hittar den frame som anges i 'popupmenyTarget' ovan.
varningFrameSaknas="Framen '"+popupmenyTarget+"' hittas inte av scriptet.\nKontrollera stavningen av '"+popupmenyTarget+"' och se till så att du inte använder dig av frames i frames.\nScriptet klarar inte av frames i frames.\nInga garantier ges för att scriptet kommer att fungera som det ska nu!\nTrolig åtgärd som löser problemet: Ändra värdet på variabeln 'popupmenyTarget' i scriptet.\nÄndra värdet till ett framenamn som finns eller till t.ex. '_self'"

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

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

antalLager=rubriker.length;

webblasarnamn=navigator.appName;
if (skaVaraCentreradIForhallandeTillWebblasarstorlek=="ja" ||
    skaVaraCentreradIForhallandeTillSkarmstorlek=="ja")
{
	if (navigator.userAgent.toLowerCase().indexOf("opera")!=-1)
	{
		if (skaVaraCentreradIForhallandeTillWebblasarstorlek=="ja")
		{
			widthTmp=window.innerWidth;
			heightTmp=document.body.clientHeight;
		}
		else if (skaVaraCentreradIForhallandeTillSkarmstorlek=="ja")
		{
			widthTmp=screen.width;
			heightTmp=screen.height;
		}
	}
	else if (webblasarnamn == "Netscape")
	{
		if (skaVaraCentreradIForhallandeTillWebblasarstorlek=="ja")
		{
			widthTmp=window.innerWidth;
			heightTmp=window.innerHeight;
		}
		else if (skaVaraCentreradIForhallandeTillSkarmstorlek=="ja")
		{
			if(navigator.javaEnabled())
 			{
				javaStuff=java.awt.Toolkit.getDefaultToolkit().getScreenSize()
				widthTmp=javaStuff.width;
				heightTmp=javaStuff.height;
			}
		}
	}
	else if (webblasarnamn == "Microsoft Internet Explorer")
	{
		if (skaVaraCentreradIForhallandeTillWebblasarstorlek=="ja")
		{
			widthTmp=document.body.clientWidth;
			heightTmp=document.body.clientHeight;
		}
		else if (skaVaraCentreradIForhallandeTillSkarmstorlek=="ja")
		{
			widthTmp=screen.width;
			heightTmp=screen.height;
		}
	}

pixelVanster=parseInt(widthTmp/2-lagerBredd*antalLager/2);
}

function skrivUtMenyer()
{
	for (i=1; i<=antalLager; i++)
	{
	skrivUtDetta="";
	skrivUtDetta+=("<DIV ID='"+lagernamn+""+i+"' onMouseOver=\"visaMeny('"+lagernamn2+""+i+"')\" onMouseOut=\"doljMenyTimer('"+lagernamn2+""+i+"')\">")
	skrivUtDetta+=("<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=\""+lagerBredd+"\" HEIGHT=\""+lagerHojd+"\" BGCOLOR=\""+rubrikFarg+"\">");
	skrivUtDetta+=("<TR><TD><A HREF=\"javascript:void(0)\" onMouseOver=\"visaMeny('"+lagernamn2+""+i+"')\" onMouseOut=\"doljMenyTimer('"+lagernamn2+""+i+"')\" CLASS='menyRubrikClass'>"+rubriker[i-1]+"</A></TD></TR>");
	skrivUtDetta+=("</TABLE></DIV>")

skrivUtDetta+=("<DIV ID='"+lagernamn2+""+i+"' onMouseOver=\"visaMeny('"+lagernamn2+""+i+"')\" onMouseOut=\"doljMenyTimer('"+lagernamn2+""+i+"')\">")
	skrivUtDetta+=("<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=\""+lagerBredd+"\" BGCOLOR=\""+menyerFarg+"\">");
		antalUndermenyer=eval("meny"+i+"rubriker.length")
		for (j=0; j<antalUndermenyer; j++)
		{
			if (popupmenyTarget == "_self" || popupmenyTarget == "")
				skrivUtDetta+=("<TR><TD "+styleForTDelement+" onClick=\"self.location.href='"+eval("meny"+i+"lankar["+j+"]")+"'\" onMouseOver=\"this.style.backgroundColor='"+menyerFargMedMus+"'\" onMouseOut=\"this.style.backgroundColor=''\"><A HREF=\""+eval("meny"+i+"lankar["+j+"]")+"\" onMouseOver=\"visaMeny('"+lagernamn2+""+i+"')\" onMouseOut=\"doljMenyTimer('"+lagernamn2+""+i+"')\" CLASS='menyLankClass'>"+eval("meny"+i+"rubriker["+j+"]")+"</A></TD></TR>")
			else if (popupmenyTarget == "_blank")
				skrivUtDetta+=("<TR><TD "+styleForTDelement+" onClick=\"window.open('"+eval("meny"+i+"lankar["+j+"]")+"','newWindow');\" onMouseOver=\"this.style.backgroundColor='"+menyerFargMedMus+"'\" onMouseOut=\"this.style.backgroundColor=''\"><A TARGET=\"newWindow\" HREF=\""+eval("meny"+i+"lankar["+j+"]")+"\" onMouseOver=\"visaMeny('"+lagernamn2+""+i+"')\" onMouseOut=\"doljMenyTimer('"+lagernamn2+""+i+"')\" CLASS='menyLankClass'>"+eval("meny"+i+"rubriker["+j+"]")+"</A></TD></TR>")
			else if (popupmenyTarget == "_top")
				skrivUtDetta+=("<TR><TD "+styleForTDelement+" onClick=\"top.location.href='"+eval("meny"+i+"lankar["+j+"]")+"'\" onMouseOver=\"this.style.backgroundColor='"+menyerFargMedMus+"'\" onMouseOut=\"this.style.backgroundColor=''\"><A TARGET=\"_top\" HREF=\""+eval("meny"+i+"lankar["+j+"]")+"\" onMouseOver=\"visaMeny('"+lagernamn2+""+i+"')\" onMouseOut=\"doljMenyTimer('"+lagernamn2+""+i+"')\" CLASS='menyLankClass'>"+eval("meny"+i+"rubriker["+j+"]")+"</A></TD></TR>")
			else if ((typeof(eval("parent."+popupmenyTarget ))+"").toLowerCase().indexOf("object") != -1)	//Om framen (vars namn finns i popupmenyTarget) finns, så...
				skrivUtDetta+=("<TR><TD "+styleForTDelement+" onClick=\"parent."+popupmenyTarget+".location.href='"+eval("meny"+i+"lankar["+j+"]")+"'\" onMouseOver=\"this.style.backgroundColor='"+menyerFargMedMus+"'\" onMouseOut=\"this.style.backgroundColor=''\"><A TARGET=\""+popupmenyTarget+"\" HREF=\""+eval("meny"+i+"lankar["+j+"]")+"\" onMouseOver=\"visaMeny('"+lagernamn2+""+i+"')\" onMouseOut=\"doljMenyTimer('"+lagernamn2+""+i+"')\" CLASS='menyLankClass'>"+eval("meny"+i+"rubriker["+j+"]")+"</A></TD></TR>")
			else
			{
				if (varningFrameSaknas.length>0)
				{
					alert(varningFrameSaknas)
					varningFrameSaknas="";	//Så visas inte felet mer än en gång
				}
				skrivUtDetta+=("<TR><TD "+styleForTDelement+" onClick=\"parent."+popupmenyTarget+".location.href='"+eval("meny"+i+"lankar["+j+"]")+"'\" onMouseOver=\"this.style.backgroundColor='"+menyerFargMedMus+"'\" onMouseOut=\"this.style.backgroundColor=''\"><A TARGET=\""+popupmenyTarget+"\" HREF=\""+eval("meny"+i+"lankar["+j+"]")+"\" onMouseOver=\"visaMeny('"+lagernamn2+""+i+"')\" onMouseOut=\"doljMenyTimer('"+lagernamn2+""+i+"')\" CLASS='menyLankClass'>"+eval("meny"+i+"rubriker["+j+"]")+"</A></TD></TR>")	//Denna rad gör så att menyerna skrivs ut, trots att de troligtvis inte fungerar (vilket man meddelas om i så fall)
			}
		}
	skrivUtDetta+=("</TABLE></DIV>")
	document.write(skrivUtDetta);
	}
}

if (document.all)
		{
		lagerStart=document.all[lagernamn2+i].style;
		}
		else if (document.layers)
		{
		lagerStart=document.layers[lagernamn2+i];
		}
		else if (document.getElementById)
		{
		lagerStart=document.getElementById(lagernamn2+i).style;
		}
	lagerStart.width=lagerBredd
	lagerStart.top=pixelNer+lagerHojd
	lagerStart.left=pixelVanster+lagerBredd*(i-1);
	lagerStart.visibility="hidden";
	}
}

function doljMenyTimer(vilken)
{
doljAllaAndra(vilken);
skaDoljaMenyn=true;
setTimeout("doljMeny('"+vilken+"')", stangInterval);
}

if (skaDoljaMenyn)
	{
	lagerStart.visibility="hidden";
	}
}

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