Avatar billede sthen Nybegynder
01. oktober 2002 - 19:47 Der er 1 løsning

Menu sjusk

Har fået stykket et script sammen flere forskellige steder fra, som jeg havde tænkt mig som udgangspunkt for en menu.

Systemet virker tilsyneladende meget godt, men ved "MouseOver" på Gruppe+nr, placerer "popuppen" sig efter musens placering.

Hvorledes ændres dette, så popup-boxen holder samme afstand til venstre skærmkant.
Det er formodentlig noget med:
position:absolute; left: 200;
Men hvor sætter jeg det ind ???

<style>
<!--

table {
border:1px solid black;
width:155px
}

#menu tr td a {
padding:0px 10px 0px 10px;
font-family : Verdana;
background-color:white;
font-size : 12px;
font-weight : normal;
line-height : 20px;
color : black;
text-decoration:none;
display : block; width:100%;
}

#menu A:HOVER {
font-family : Verdana;
background-color:menu;
font-size : 12px;
font-weight : bold;
text-decoration: none;
color: black;
}

.menuskin{
position:absolute;
width:165px;
background-color:white;
border:1px solid black;
font:normal 10px Verdana;
line-height:16px;
z-index:100;
visibility:hidden;
}

.menuskin a{
text-decoration:none;
color:black;
padding-left:10px;
padding-right:10px;
display : block; width:100%;
}

#mouseoverstyle{
background-color:menu;
}

#mouseoverstyle a{
color:black;
font-weight:bold;
}


-->
</style>

<script language="JavaScript1.2">

//Pop-it menu- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

var linkset=new Array()
//SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT

linkset[0]='<div class="menuitems"><a href="http://www.link1a.dk">Link 1a</a></div>'
linkset[0]+='<div class="menuitems"><a href="http://www.link1b.dk">Link 1b</a></div>'
linkset[0]+='<div class="menuitems"><a href="http://www.link1c.dk">Link 1c</a></div>'

linkset[1]='<div class="menuitems"><a href="http://www.link2a.dk">Link 2a</a></div>'
linkset[1]+='<div class="menuitems"><a href="http://www.link2b.dk">Link 2b</a></div>'
linkset[1]+='<div class="menuitems"><a href="http://www.link2c.dk">Link 2c</a></div>'
linkset[1]+='<div class="menuitems"><a href="http://www.link2d.dk">Link 2d</a></div>'

////No need to edit beyond here

var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var ns6=document.getElementById&&!document.all
var ns4=document.layers

function showmenu(e,which){

if (!document.all&&!document.getElementById&&!document.layers)
return

clearhidemenu()

menuobj=ie4? document.all.popmenu : ns6? document.getElementById("popmenu") : ns4? document.popmenu : ""
menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj

if (ie4||ns6)
menuobj.innerHTML=which
else{
menuobj.document.write('<layer name=gui bgColor=#E6E6E6 width=165 onmouseover="clearhidemenu()" onmouseout="hidemenu()">'+which+'</layer>')
menuobj.document.close()
}

menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width
menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.height
eventX=ie4? event.clientX : ns6? e.clientX : e.x
eventY=ie4? event.clientY : ns6? e.clientY : e.y

//Find out how close the mouse is to the corner of the window
var rightedge=ie4? document.body.clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie4? document.body.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.thestyle.left=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX : ns6? window.pageXOffset+eventX : eventX

//same concept with the vertical position
if (bottomedge<menuobj.contentheight)
menuobj.thestyle.top=ie4? document.body.scrollTop+eventY-menuobj.contentheight : ns6? window.pageYOffset+eventY-menuobj.contentheight : eventY-menuobj.contentheight
else
menuobj.thestyle.top=ie4? document.body.scrollTop+event.clientY : ns6? window.pageYOffset+eventY : eventY
menuobj.thestyle.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.thestyle.visibility=(ie4||ns6)? "hidden" : "hide"
}

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

function delayhidemenu(){
if (ie4||ns6||ns4)
delayhide=setTimeout("hidemenu()",500)
}

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

function highlightmenu(e,state){
if (document.all)
source_el=event.srcElement
else if (document.getElementById)
source_el=e.target
if (source_el.className=="menuitems"){
source_el.id=(state=="on")? "mouseoverstyle" : ""
}
else{
while(source_el.id!="popmenu"){
source_el=document.getElementById? source_el.parentNode : source_el.parentElement
if (source_el.className=="menuitems"){
source_el.id=(state=="on")? "mouseoverstyle" : ""
}
}
}
}

if (ie4||ns6)
document.onclick=hidemenu

</script>

</head>
<body>

<div id="popmenu" class="menuskin" onMouseover="clearhidemenu();highlightmenu(event,'on')" onMouseout="highlightmenu(event,'off');dynamichide(event)">
</div>

<table id="menu" cellpadding="0" cellspacing="0">
<tr><td>
<a href="#" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()">Gruppe 1 ...</a>
</td></tr><tr><td>
<a href="#" onMouseover="showmenu(event,linkset[1])" onMouseout="delayhidemenu()">Gruppe 2 ...</a>
</td></tr>
</table>
Avatar billede sthen Nybegynder
02. oktober 2002 - 12:09 #1
Ligemeget - har selv løst det.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester