Javascripts Pop up meny

Et effektivt og plassbesparende javascript hvor du får en meny automatisk opp når musen er over et bilde eller en knapp (Button).

En meny, med PopUp funksjon hvor du kan ha så mange linker som du ønsker, og lett å tilpasse. Lim inn scriptdel 1 mellom mellom HEAD taggene, og scriptdel 2 mellom BODY taggene der menyen ønskes.

Eksempel: Før musen over bildene over...

Legger du til flere linker må du huske og spesifisere dette i "linkset[]" delen i scriptdel 1, slik at det blir det samme i taggene i scriptdel 2.

Eks.: ("linkset[1]" må spesifiseres begge plasser og ha likt tall) Farger i PopUp menyen endrer du i STYLE settet i Trinn 1. Ønskes tekst i stedet for knappe link, erstattes bare knappens IMG tagg (GIF eller JPG bildet) med teksten du vil ha.

Scriptdel 1: Plasseres mellom <head> taggene

<style type="text/css">
#popitmenu{
position: absolute;
background-color: white;
border:1px solid black;
font: normal 12px Verdana;
line-height: 18px;
z-index: 100;
visibility: hidden;
}

#popitmenu a{
text-decoration: none;
padding-left: 6px;
color: black;
display: block;
}

#popitmenu a:hover{ /*hover background color*/
background-color: #cc0000;
}
    </style>
<script type="text/javascript">
//PopUp meny fra apasje.COM

var defaultMenuWidth="150px"

var linkset=new Array()

//Spesifiser linkset[] (0,1,2..etter hvor mange menyer og grunnlinker du vil ha, og target)
linkset[0]='<a href="http://www.apasje.com">apasje.COM</a>'
linkset[0]+='<hr>' //Optional Separator
linkset[0]+='<a href="http://www.apasje.com/underholdning/musikk">Musikk</a>'
linkset[0]+='<a href="http://www.apasje.com/underholdning/spill">Spill</a>'
linkset[0]+='<a href="http://www.apasje.com/video">Video</a>'
linkset[0]+='<a href="http://www.apasje.com/html">HTML hjelp</a>'

linkset[1]='<a href="http://www.filespree.com/">filespree.com</a>'
linkset[1]+='<a href="http://www.kazaa.com/">kazaa.com</a>'
linkset[1]+='<a href="http://www.neo-modus.com/">neo-modus.com</a>'
linkset[1]+='<a href="http://www.google.com">Google</a>'

////REDIGERING UNDER HER TRENGS IKKE
var ie5=document.all && !window.opera
var ns6=document.getElementById

if (ie5||ns6)
document.write('<div id="popitmenu" onMouseover="clearhidemenu();" onMouseout="dynamichide(event)"></div>')

function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

function showmenu(e, which, optWidth){
if (!document.all&&!document.getElementById)
return
clearhidemenu()
menuobj=ie5? document.all.popitmenu : document.getElementById("popitmenu")
menuobj.innerHTML=which
menuobj.style.width=(typeof optWidth!="undefined")? optWidth : defaultMenuWidth
menuobj.contentwidth=menuobj.offsetWidth
menuobj.contentheight=menuobj.offsetHeight
eventX=ie5? event.clientX : e.clientX
eventY=ie5? event.clientY : e.clientY
//Find out how close the mouse is to the corner of the window
var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.contentwidth)
//move the horizontal position of the menu to the left by it's width
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px"
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px"
//same concept with the vertical position
if (bottomedge<menuobj.contentheight)
menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px"
else
menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px"
menuobj.style.visibility="visible"
return false
}

function contains_ns6(a, b) {
//Determines if 1 element in contained in another- by Brainjar.com
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function hidemenu(){
if (window.menuobj)
menuobj.style.visibility="hidden"
}

function dynamichide(e){
if (ie5&&!menuobj.contains(e.toElement))
hidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
hidemenu()
}

function delayhidemenu(){
delayhide=setTimeout("hidemenu()",500)
}

function clearhidemenu(){
if (window.delayhide)
clearTimeout(delayhide)
}

if (ie5||ns6)
document.onclick=hidemenu
    </script>

Scriptdel 2: Plasseres mellom <body> taggene

SØK ressurser

HJELP til Hjemmesiden

Nyttige ressurser til ditt Hjemmesideprosjekt, alltid tilgjengelig. Klikk for å vise tilgjengelige ressurser.

Javascripts Pop up meny

SØK ressurser

HJELP til Hjemmesiden

FLERE ressurser