Sidemenu

Dette script genererer en menu som sidder "skjult" til venstre på din hjemmeside. Når en besøgende kører musen hen over den synlige del af menuen, glider resten af menuen frem.

Der er mange indstillingsmuligheder i dette script.

Javascript

Eksempel >>

Sådan gør du:

Scriptet består af to dele ... en style, som indsættes i din head sektion og selve scriptet, som indsættes i din body sektion.

Trin 1

Stylen bruges til at definere udseendet på din menu. Du kan selv definere en del af værdierne, men du må KUN ændre, det som er markeret med rødt.

Indsæt denne <style> kode imellem <head> og </head>.:

Definer selv værdierne markeret med rødt.

Top er afstanden fra toppen af siden til starten på menuen. Background-color og layer-background-color skal have samme hexaværdi.

Trin 2

Indsæt dette script imellem <body> og </body>:

<script language="JavaScript1.2">

//Script hentet fra @-beynder
//http://www.a-begynder.dk
//Stedet for webmasters ... vi har næsten alt til hjemmesider
//----------------------------------------------------------

var ns4=document.layers?1:0
var ie4=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0

if (ie4||ns6)
document.write('<div id="slidemenubar2" style="left:-154" onMouseover="pull()" onMouseout="draw()">')
else
document.write('<layer id="slidemenubar" onMouseover="pull()" onMouseout="draw()">')

var sitems=new Array()
var sitemlinks=new Array()

//Indtast dine linktekster her. Du kan tilføje flere linier efter behov
sitems[0]="Startsiden"
sitems[1]="Hvorfor @-begynder?"
sitems[2]="Se vores scripts"
sitems[3]="Link1"
sitems[4]="Link2"
sitems[5]="Link3"
sitems[6]="Link4"
sitems[7]="Link5"
sitems[8]="Link6"
sitems[9]="Link7"

// Indtast url til dine links her. Disse skal svare overens med linkteksterne herover
sitemlinks[0]="http://www.a-begynder.htm"
sitemlinks[1]="../../scripts.htm"
sitemlinks[2]="../../scripts.htm"
sitemlinks[3]="../../scripts.htm"
sitemlinks[4]="../../scripts.htm"
sitemlinks[5]="../../scripts.htm"
sitemlinks[6]="../../scripts.htm"
sitemlinks[7]="../../scripts.htm"
sitemlinks[8]="../../scripts.htm"
sitemlinks[9]="../../scripts.htm"

// Her kan du definere om links skal åbnes i et andet vindue eller ramme.
// _self svarer til samme ramme. _blank svarer til et nyt vindue.
var target="_blank"

// Her kan du definere hastigheden som menuen glider ind og ud med
udHast=40
indHast=120

////////////////////////////////////////////////////////////
/////// Du skal ikke ændre noget under denne linie /////////

for (i=0;i<=sitems.length-1;i++)
document.write('<a href='+sitemlinks[i]+' target="'+target+'">'+sitems[i]+'</a><br>')

function regenerate(){
window.location.reload()
}
function regenerate2(){
if (ns4)
setTimeout("window.onresize=regenerate",400)
}
window.onload=regenerate2
if (ie4||ns6){
document.write('</div>')
themenu=(ns6)? document.getElementById("slidemenubar2").style : document.all.slidemenubar2.style
rightboundary=0
leftboundary=-150
}
else{
document.write('</layer>')
themenu=document.layers.slidemenubar
rightboundary=150
leftboundary=10
}
function pull(){
if (window.drawit)
clearInterval(drawit)
pullit=setInterval("pullengine()",udHast)
}
function draw(){
clearInterval(pullit)
drawit=setInterval("drawengine()",indHast)
}
function pullengine(){
if (ie4&&themenu.pixelLeft<rightboundary)
themenu.pixelLeft+=5
else if (ns6&&parseInt(themenu.left)<rightboundary)
themenu.left=parseInt(themenu.left)+5
else if( ns4&&themenu.left<rightboundary)
themenu.left+=5
else if (window.pullit)
clearInterval(pullit)
}
function drawengine(){
if (ie4&&themenu.pixelLeft>leftboundary)
themenu.pixelLeft-=5
else if (ns6&&parseInt(themenu.left)>leftboundary)
themenu.left=parseInt(themenu.left)-5
else if(ns4&&themenu.left>leftboundary)
themenu.left-=5
else if (window.drawit)
clearInterval(drawit)
}
</script>

Definer selv værdierne markeret med rød. Bemærk links kan angives enten med relativ eller absolut sti. (relativ = ../dinside.htm, absolut = http://www.hjemmeside.dk).

Det færdige html dokument <html>

<body>


<script language="JavaScript1.2">

//Script hentet fra @-beynder
//http://www.a-begynder.dk
//Stedet for webmasters ... vi har næsten alt til hjemmesider
//----------------------------------------------------------

var ns4=document.layers?1:0
var ie4=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0

if (ie4||ns6)
document.write('<div id="slidemenubar2" style="left:-154" onMouseover="pull()" onMouseout="draw()">')
else
document.write('<layer id="slidemenubar" onMouseover="pull()" onMouseout="draw()">')

var sitems=new Array()
var sitemlinks=new Array()

//Indtast dine linktekster her. Du kan tilføje flere linier efter behov
sitems[0]="Startsiden"
sitems[1]="Hvorfor @-begynder?"
sitems[2]="Se vores scripts"
sitems[3]="Link1"
sitems[4]="Link2"
sitems[5]="Link3"
sitems[6]="Link4"
sitems[7]="Link5"
sitems[8]="Link6"
sitems[9]="Link7"

// Indtast url til dine links her. Disse skal svare overens med linkteksterne herover
sitemlinks[0]="http://www.a-begynder.htm"
sitemlinks[1]="../../scripts.htm"
sitemlinks[2]="../../scripts.htm"
sitemlinks[3]="../../scripts.htm"
sitemlinks[4]="../../scripts.htm"
sitemlinks[5]="../../scripts.htm"
sitemlinks[6]="../../scripts.htm"
sitemlinks[7]="../../scripts.htm"
sitemlinks[8]="../../scripts.htm"
sitemlinks[9]="../../scripts.htm"

// Her kan du definere om links skal åbnes i et andet vindue eller ramme.
// _self svarer til samme ramme. _blank svarer til et nyt vindue.
var target="_blank"

// Her kan du definere hastigheden som menuen glider ind og ud med
udHast=40
indHast=120

///////////////////////////////////////////////////////
///// Du skal ikke ændre noget under denne linie //////

for (i=0;i<=sitems.length-1;i++)
document.write('<a href='+sitemlinks[i]+' target="'+target+'">'+sitems[i]+'</a><br>')

function regenerate(){
window.location.reload()
}
function regenerate2(){
if (ns4)
setTimeout("window.onresize=regenerate",400)
}
window.onload=regenerate2
if (ie4||ns6){
document.write('</div>')
themenu=(ns6)? document.getElementById("slidemenubar2").style : document.all.slidemenubar2.style
rightboundary=0
leftboundary=-150
}
else{
document.write('</layer>')
themenu=document.layers.slidemenubar
rightboundary=150
leftboundary=10
}
function pull(){
if (window.drawit)
clearInterval(drawit)
pullit=setInterval("pullengine()",udHast)
}
function draw(){
clearInterval(pullit)
drawit=setInterval("drawengine()",indHast)
}
function pullengine(){
if (ie4&&themenu.pixelLeft<rightboundary)
themenu.pixelLeft+=5
else if (ns6&&parseInt(themenu.left)<rightboundary)
themenu.left=parseInt(themenu.left)+5
else if( ns4&&themenu.left<rightboundary)
themenu.left+=5
else if (window.pullit)
clearInterval(pullit)
}
function drawengine(){
if (ie4&&themenu.pixelLeft>leftboundary)
themenu.pixelLeft-=5
else if (ns6&&parseInt(themenu.left)>leftboundary)
themenu.left=parseInt(themenu.left)-5
else if(ns4&&themenu.left>leftboundary)
themenu.left-=5
else if (window.drawit)
clearInterval(drawit)
}
</script>


</body>

</html>

Eksempel >>

Bemærk:

Hvis du bruger stylesheet. Vil dine links følge denne style, og ikke den værdi du definerer i stylen i din <head> sektion ved brug af denne kode.

Hint:

Højden af menuen sættes automatisk, så den passer til antallet af links. Du kan dog gøre menuen højere, hvis du ønsker.

Hvis du fx vil have en menu, der fylder hele venstre side, kan du i stylen indføre denne linie:

height:99%;

Og samtidig sætte Top til "2px". Menuen udfylder nu hele venstre side med lidt luft for oven og neden.

Hvor finder man de fedeste scripts ...?
... @-begynder

Til toppen >>

Annoncer her ...!