JavaScript: Ha en egen h�germusknapp-meny

HA EN EGEN H�GERMUSKNAPP-MENY

Detta script fungerar p� NN 4 och IE 4 och b�ttre av respektive webbl�sare.
Fast i IE 4 samt NN 6 kommer f�rutom den egna h�gerknapp-menyn �ven den riktiga menyn fram. Denna kan man inte bli av med i IE 4 och NN 6.
Scriptet fungerar dock �nd� utan problem i alla NN 4 och IE 4 och b�ttre.
I NN 4 visas dock inte menyn om man h�gerklickar p� en bild eller p� text, d� visas webbl�sarens vanliga menyn.

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

/* H�r anger du l�nkarnas f�rg, typsnitt, storlek etc. */
.musMenyLankarMusAv	{color: black; font-family: "ms sans serif"; font-size: 8px; text-decoration:none}
.musMenyLankarMusPa	{color: white; font-family: "ms sans serif"; font-size: 8px; text-decoration:none}

#musMeny			{position:absolute; visibility:hidden;}

/* *************************************************
Nedan skapar du en rad f�r varje l�nk som ska finnas i menyn.
Du kan ha f�r m�nga rader nedan, men inte f�r f�.
Ska du exempelvis ha tv� l�nkar och ett "streck" i din meny
ska du ha 3 (=2+1) rader nedan, dvs:

#musMenyAv0			{position:absolute; visibility:hidden;}
#musMenyAv1			{position:absolute; visibility:hidden;}
#musMenyAv2			{position:absolute; visibility:hidden;}

...och sedan tre till...
#musMenyPa0			{position:absolute; visibility:hidden;}
#musMenyPa1			{position:absolute; visibility:hidden;}
#musMenyPa2			{position:absolute; visibility:hidden;}

M�rker du att ditt script inte fungerar kanske felet
�r att du m�ste l�gga till fler rader nedan.
Kom ih�g: Du kan ha fler rader �n l�nkar i menyn, inte tv�rt om.
Det �r allts� b�ttre med f�r m�nga rader �n f�r f�.
************************************************* */

#musMenyAv0			{position:absolute; visibility:hidden;}
#musMenyAv1			{position:absolute; visibility:hidden;}
#musMenyAv2			{position:absolute; visibility:hidden;}
#musMenyAv3			{position:absolute; visibility:hidden;}
#musMenyAv4			{position:absolute; visibility:hidden;}
#musMenyAv5			{position:absolute; visibility:hidden;}
#musMenyAv6			{position:absolute; visibility:hidden;}
#musMenyAv7			{position:absolute; visibility:hidden;}
#musMenyAv8			{position:absolute; visibility:hidden;}
#musMenyAv9			{position:absolute; visibility:hidden;}
#musMenyAv10		{position:absolute; visibility:hidden;}
#musMenyAv11		{position:absolute; visibility:hidden;}

#musMenyPa0			{position:absolute; visibility:hidden;}
#musMenyPa1			{position:absolute; visibility:hidden;}
#musMenyPa2			{position:absolute; visibility:hidden;}
#musMenyPa3			{position:absolute; visibility:hidden;}
#musMenyPa4			{position:absolute; visibility:hidden;}
#musMenyPa5			{position:absolute; visibility:hidden;}
#musMenyPa6			{position:absolute; visibility:hidden;}
#musMenyPa7			{position:absolute; visibility:hidden;}
#musMenyPa8			{position:absolute; visibility:hidden;}
#musMenyPa9			{position:absolute; visibility:hidden;}
#musMenyPa10		{position:absolute; visibility:hidden;}
#musMenyPa11		{position:absolute; visibility:hidden;}
//-->
</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.                          *---

// ###########################################################################
// ################# H�R �NDRAR DU HUR DITT SCRIPT SKA SE UT #################
// ###########################################################################

//***---H�r anger du f�rgen som menyn ska ha
tabellBakgrundsfarg="#C0C0C0";

//***---H�r anger du f�rgen p� det alternativ som musen �r p�
bakgrundsfargMusPa="#000080";

//***---H�r anger du marginalens f�rg (marginalen l�ngst upp och till v�nster)
marginalFargUppVanster="white";

//***---H�r anger du marginalens f�rg (marginalen l�ngst ner och till h�ger)
marginalFargNerHoger="black";

//***---L�nkarnas bredd och h�jd
lankBredd=150;
lankHojd=14;

//***---Marginalen mellan menyns text och menyns v�nstra kant
marginalVanster=3;

//***---Marginalen mellan l�nkarna och menyns yttre kant
menynsSidorStorlek=1;

//***---Du kan h�r �ndra om menyn ska dyka upp exakt d�r musen �r eller lite vid sidan om, �ndra som det behagar
flyttaLagretX=0;
flyttaLagretY=0;

//***---Dessa v�rden ska du INTE �ndra om du inte vet vad du g�r. Detta �r namnen p� de olika lagren.
musLagretsNamn="musMeny";
lagernamnAv="musMenyAv";
lagernamnPa="musMenyPa";

function laggTillMenyer()
{

// ###########################################################################
// ############ H�R �NDRAR DU VILKA L�NKAR SOM SKA FINNAS I MENYN ############
// ###########################################################################
// 
// Vill du inte l�gga till fler l�nkar i menyn och inte vill ta bort n�gra �ndrar du inget nedan!
// 
// L�gg till en meny genom att l�gga till en rad som denna nedan:
// /* X */	laggTillIMenyn("Sidans namn", "http://www.adress.se/sida.html", "_self");
// 
// (X = ett nummer	"_self" = det som ska st� inom TARGET-attributen.)
// 
// Vill du ha med ett streck skriver du bara:
// /* X */	laggTillIMenyn();
// 
// Ett exempel kan allts� vara:
// /* 1 */	laggTillIMenyn("L�nkar", "lankar.html", "_self");
// /* 2 */	laggTillIMenyn();
// /* 3 */	laggTillIMenyn("Bilder", "http://www.adress.se/bilder.html", "_top");
// 
// Vill du bara ta bort n�got fr�n menyn g�r du det simpelt genom att helt enkelt radera den rad du vill bli av med.
// 
// T�nk p�: Egentligen beh�ver du inte ha med  /* 1 */,   /* 2 */,  /* 3 */ etc (du kan ta bort detta om du vill).
// Anledningen till att jag har med detta �r f�r att skapa lite struktur nedan s� att du b�ttre ska se hur m�nga l�nkar du har.
// L�nkarna kommer visas i menyn i den ordning du skriver dem h�r, INTE efter det nummer du ger dem.

/* 1 */	laggTillIMenyn("Bak�t", goBack, "_self");
/* 2 */	laggTillIMenyn("Fram�t", goForward, "_self");
/* 3 */	laggTillIMenyn("Ladda om", reloadSite, "_self");
/* 4 */	laggTillIMenyn();
/* 5 */	laggTillIMenyn("L�gg till bland favoriter", bookmarkSite, "_self");
/* 5 */	laggTillIMenyn("Se sidans k�lla", viewPageSource, "_self");
/* 6 */		if (top.location!=self.location)laggTillIMenyn("Se framens k�lla", viewFrameSource, "_self");
/* 7 */	laggTillIMenyn();
/* 8 */		if (top.location!=self.location)laggTillIMenyn("Detta f�nster i helsk�rm", frameIHelskarm, "_self");
/* 9 */	laggTillIMenyn("Denna sida i ett nytt f�nster", thisSiteInANewWindow, "_self");
/* 10 */	laggTillIMenyn();
/* 11 */	laggTillIMenyn("Maila mig", "mailto:my@mail.com", "_self");
/* 12 */	laggTillIMenyn("Startsidan", "startsida.html", "_top");

antalLankar=rubrikerArray.length;
}

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

rubrikerArray=new Array();
lankarArray=new Array();
targetArray=new Array();

viewSource="view-source:";
goBack="javascript:history.go(-1)";
goForward="javascript:history.go(1)";
reloadSite="javascript:location.reload()";
bookmarkSite="javascript:bookmark(self.location.href,document.title);";
viewPageSource="javascript:self.location.href=viewSource+self.location.href";
viewFrameSource="javascript:top.location.href=viewSource+top.location.href";
frameIHelskarm="javascript:top.location.href=self.location.href";
thisSiteInANewWindow="javascript:function a(){open(self.location.href)}a()";

function bookmark(url, description)
{
//***---Denna text visas om man har Netscape.
netscape="Tryck f�rst p� OK och sedan p� CTRL+D f�r att bookmarka sidan."

if (navigator.appName=='Microsoft Internet Explorer')
{
window.external.AddFavorite(url, description);
}
else if (navigator.appName=='Netscape')
{
alert(netscape);
}
}

function visaDettaLager(lager)
{
geLagerstart(lager).visibility="visible"
}

function doljDettaLager(lager)
{
geLagerstart(lager).visibility="hidden"
}

function lysLager(lagerIndex)
{
slackAllaLager();
visaDettaLager(lagernamnPa+lagerIndex)
}

function slackAllaLager()
{
	for (i=0; i<antalLankar; i++)
	{
	doljDettaLager(lagernamnPa+i);
	}
}

function visaMenyn()
{
	geLagerstart(musLagretsNamn).visibility="visible";

for (i=0; i<antalLankar; i++)
	{
		geLagerstart(lagernamnAv+i).visibility="visible";
	}
}

function doljMenyn()
{
	geLagerstart(musLagretsNamn).visibility="hidden";

for (i=0; i<antalLankar; i++)
	{
		geLagerstart(lagernamnAv+i).visibility="hidden";
		geLagerstart(lagernamnPa+i).visibility="hidden";
	}
}

function initieraLager()
{
	geLagerstart(musLagretsNamn).zIndex=15;
	geLagerstart(musLagretsNamn).visibility="hidden";
	geLagerstart(musLagretsNamn).width=menynsSidorStorlek*2+lankBredd;
	geLagerstart(musLagretsNamn).height=menynsSidorStorlek*2+lankHojd*antalLankar;

for (i=0; i<antalLankar; i++)
	{
		geLagerstart(lagernamnAv+i).zIndex=5;
		geLagerstart(lagernamnAv+i).visibility="hidden";
		geLagerstart(lagernamnAv+i).width=lankBredd;
		geLagerstart(lagernamnAv+i).height=lankHojd;
		geLagerstart(lagernamnAv+i).top=menynsSidorStorlek+i*lankHojd;
		geLagerstart(lagernamnAv+i).left=menynsSidorStorlek;

geLagerstart(lagernamnPa+i).zIndex=10;
		geLagerstart(lagernamnPa+i).visibility="hidden";
		geLagerstart(lagernamnPa+i).width=lankBredd;
		geLagerstart(lagernamnPa+i).height=lankHojd;
		geLagerstart(lagernamnPa+i).top=menynsSidorStorlek+i*lankHojd;
		geLagerstart(lagernamnPa+i).left=menynsSidorStorlek;
	}
}

function skrivUtLager()
{
	skrivUt="";
	skrivUt+="<DIV ID='"+musLagretsNamn+"'>\n";
	skrivUt+="<TABLE BGCOLOR=\""+tabellBakgrundsfarg+"\" BORDERCOLORDARK="+marginalFargNerHoger+" BORDERCOLORLIGHT="+marginalFargUppVanster+" BORDER=1 CELLPADDING=0 CELLSPACING=0 HEIGHT="+(antalLankar*lankHojd+menynsSidorStorlek*2)+" WIDTH="+(lankBredd+menynsSidorStorlek*2)+"><TR><TD> ";
	skrivUt+="</TD></TR></TABLE>";

document.write(skrivUt);
	skrivUt="";

for (i=0; i<antalLankar; i++)
	{
		if (rubrikerArray[i]!="")
		{
			andraTabellFarg=" onMouseOver=\"lysLager("+i+")\" onMouseOut=\"slackAllaLager("+i+")\" onClick=\"doljMenyn();"+geJavaScriptLank(lankarArray[i], targetArray[i])+"\"";

skrivUt+="<DIV "+andraTabellFarg+" ID=\""+lagernamnAv+i+"\"><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 HEIGHT="+lankHojd+" WIDTH="+lankBredd+" BGCOLOR=\""+tabellBakgrundsfarg+"\"><TR><TD WIDTH='"+marginalVanster+"'><FONT SIZE='-2'> </FONT></TD><TD><A "+andraTabellFarg+" onCLick=\"doljMenyn();\" HREF=\'"+lankarArray[i]+"\' TARGET=\'"+targetArray[i]+"\' CLASS=\'musMenyLankarMusAv\'>"+rubrikerArray[i]+"</A></TD></TR></TABLE></DIV>\n";
			skrivUt+="<DIV "+andraTabellFarg+" ID=\""+lagernamnPa+i+"\"><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 HEIGHT="+lankHojd+" WIDTH="+lankBredd+" BGCOLOR=\""+bakgrundsfargMusPa+"\"><TR><TD WIDTH='"+marginalVanster+"'><FONT SIZE='-2'> </FONT></TD><TD><A "+andraTabellFarg+" onCLick=\"doljMenyn();\" HREF=\'"+lankarArray[i]+"\' TARGET=\'"+targetArray[i]+"\' CLASS=\'musMenyLankarMusPa\'>"+rubrikerArray[i]+"</A></TD></TR></TABLE></DIV>\n";
		}
		else
		{
			andraTabellFarg=" onMouseOut=\"slackAllaLager("+i+")\"";

document.write(skrivUt);
	skrivUt="";
	}

skrivUt+="</DIV>";
	document.write(skrivUt);
}

function klickArPaMenyn(musX, musY)
{
	if (geLagerstart(musLagretsNamn).visibility == "hidden")
		return false;

x1=parseInt(geLagerstart(musLagretsNamn).left);
x2=x1+parseInt(geLagerstart(musLagretsNamn).width);
y1=parseInt(geLagerstart(musLagretsNamn).top);
y2=y1+parseInt(geLagerstart(musLagretsNamn).height);

if (x1<=musX && musX<=x2 && y1<=musY && musY<=y2)
		return true;

return false;
}

function nomenu() 
{
event.cancelBubble = true 
event.returnValue = false;

return false; 
}

function clickdown(e)
{
	if (!klickArPaMenyn(Xmusposition, Ymusposition))
	{
	doljMenyn();

flytta_lager(musLagretsNamn,Xmusposition,Ymusposition);

if (document.all)
		{
 			if (event.button==2)
			{
				visaMenyn();
				return true;
			}
		}
		else if (document.layers || document.getElementById)
		{
			if (e.which == 3)
			{
				visaMenyn();
				return false;
			}
		}
	}
return false;
}

document.oncontextmenu=nomenu;
document.onmousedown=clickdown;

laggTillMenyer();
skrivUtLager();
initieraLager();
slackAllaLager();

if (document.all || document.getElementById)	//Explorer, Netscape 6
{
	document.onmousemove = musen_flyttar;	//musen_flyttar anropas d� musen flyttas
}
else if (document.layers)			//Netscape
{
	window.captureEvents(Event.MOUSEMOVE);
	window.onMouseMove = musen_flyttar;	//musen_flyttar anropas d� musen flyttas
}

var Xmusposition, Ymusposition;			//Variabler som inneh�ller musens position

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