Forbedring af contextmenu?
Hej Alle!Jeg har en ganske udemærket contextmenu. Den fungerer således, at når der højreklikkes på linket genereres en context menu ud for det enkelte punkt. Menuen består af en div samt nogle links.
Når jeg bevæger min mus over linksne fungerer det fint. Men når jeg går lidt til højre for menuen, det vil sige jeg er stadig i menuen, men ikke i berøring med linkene, så er der ikke nogen hover effekt.
Og jeg tænkte så, findes der eventuelt nogen måde at gøre sådan, at uanset hvor du er i forbindelse med linket eller diven, at menuen stadig er aktiv.
Måske kan det løses via css, måske via Javascript?
¤¤¤¤¤¤¤¤¤¤¤ Script ¤¤¤¤¤¤¤¤¤¤¤¤¤
<html>
<head>
<style type="text/css">
#popitmenu{
position: absolute;
background-color: #297DE7;
border: 1px solid #2F7EDB;
font: normal 11px Tahoma, Verdana, Arial;
line-height: 20px;
z-index: 100;
padding-left: 5px;
visibility: hidden;
}
#popitmenu a{
background-color: #ffffff;
padding-left: 15px;
text-decoration: none;
color: #000000;
display: block;
}
#popitmenu a:hover{
background-color: #1065CE;
color: #ffffff;
cursor: default;
}
</style>
<script type="text/javascript">
var defaultMenuWidth="100px"
var linkset=new Array()
linkset[0]='<a href="link1.html">Link 1</a>'
linkset[0]+='<a href="link2.html">Link 2</a>'
var ie5=document.all && !window.opera
var ns6=document.getElementById
if (ie5||ns6)
document.write('<div id="popitmenu" onMouseover="clearhidemenu();" onMouseout="delayhidemenu();"></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
var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY
if (rightedge<menuobj.contentwidth)
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px"
else
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px"
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) {
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()",1000)
}
function clearhidemenu(){
if (window.delayhide)
clearTimeout(delayhide)
}
if (ie5||ns6)
document.onclick=hidemenu
</script>
</head>
<body>
<a href="#" onContextMenu="showmenu(event,linkset[0],120);return false;">Link</a>
</body>
</html>
