JavaScript: Popupmenyer med tr�dstruktur [1]

POPUPMENYER MED TR�DSTRUKTUR [1]

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

F�r att f� med bilderna m�ste du spara dessa bilder till din hemsida.
Spara dem till samma katalog som sidan med scriptet ligger i. Spara bilderna med samma filnamn som st�r under bilderna. (i scriptet kan du �ndra vad bilderna ska heta och i vilken katalog dem ska ligga i):


iconmapp.gif	iconie2.gif

		Liknande script:
		L�nkar till...
		V�nster	Under	H�ger
L�nkarnas l�ngd...	Lika l�nga:	4	2	6
L�nkarnas l�ngd...	Olika l�nga:	3	1	5

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; z-index:10;}
#undermeny1 {position:absolute; visibility:hidden; background-color:#FFFFFF; z-index:10;}

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

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

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

#meny5	{position:absolute; visibility:hidden; z-index:10;}
#undermeny5 {position:absolute; visibility:hidden; background-color:#FFFFFF; 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;}
//-->
</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:
placeringX=180;
placeringY=0;

//***---Rubrikernas storlek i bredd och h�jd. 
menyernasHojd=20;
menyernasBredd=160;

//***---L�nkarnas h�jd (bredden blir givetvis samma som ovan) 
varjeLanksHojd=17;

//***---�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)!
menyernasNamn="meny";
underMenyernasNamn="undermeny";

//***---Bilden som visas bredvid rubrikerna. Ange bild, h�jd samt bredd
bildKatalog="iconmapp.gif";
bildKatalogHojd=15;
bildKatalogBredd=15;

//***---Bilden som visas bredvid l�nkarna. Ange bild, h�jd samt bredd
bildSida="iconie2.gif";
bildSidaHojd=15;
bildSidaBredd=20;

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

//***---De tv� raderna nedan �r sj�lva k�rnan i menysystemet. De kan anta v�rdena 0 och 1. �ndrar du detta v�rde �ndrar hela menyns beteende. Nedan beskrivs vad varje variabel g�r.
typ=0;	//Om detta �r -1 kommer undermenyerna ut p� v�nster sida, �r det 0 kommer de ut underifr�n, och �r det 1 kommer de p� h�ger sida
typ2=0;	//Om detta �r 1 �r alla undermenyerna �r lika l�nga, om det �r 0 �r menyerna lika l�nga som antalet l�nkar i menyn

//***---"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="#cccccc";
rubrikFarg2="#dddddd";
menyerFarg="#aaaaaa";

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

//***---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","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/");

//***---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 'menyTarget' ovan.
varningFrameSaknas="Framen '"+menyTarget+"' hittas inte av scriptet.\nKontrollera stavningen av '"+menyTarget+"' 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 'menyTarget' 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################
// ###########################################################################

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

function visaUndermeny(lagerIndex)
{
doljaAllaUndermenyer()
	for (i=0; i<lagerIndex; i++)
	{
	placera(menyernasNamn+(i+1), menyernasHojd*i+placeringY, placeringX);
	}

visa(underMenyernasNamn+lagerIndex);
	placera(underMenyernasNamn+lagerIndex, placeringY+menyernasHojd*i*(!typ), placeringX+menyernasBredd*(typ));

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

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

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

function skrivUtMenyer()
{
	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='-2'> </FONT></TD></TR>")
		}
	skrivUtDetta+=("</TABLE></DIV>")
	document.write(skrivUtDetta);
	}
}

function initieraNodvandigaVariabler()
{
	antalMenyer=rubriker.length;

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

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

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

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

initieraNodvandigaVariabler();
skrivUtMenyer();
initieraLagrensAttribut();
placeraUtMenyerOchVisaDem();
//-->
</SCRIPT>

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