Layer må ikke skubbe den eksisterende tekst væk
Jeg vil gerne lave en kontekst-menu der komme frem ved klik på et element. Menuen skal komme frem lige ved elementet, og når det kommer frem skal resten af siden elementer ikke berøres af det.Jeg har lavet følgende kode, men som man se hvis man prøver at "køre" koden i en browser, så skubbes den eksisterende tekst væk.
Jeg regner med at det skyldes at layeret position er relativ, for vælger jeg absolut, er problemet væk. Men så "åbner" menuen sig i stedet et uønsket sted på siden...
Hvad kan man gøre?
<---- Kode ---->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" language="JavaScript">
/********************************************************************************
Copyright (C) 1999 Thomas Brattli
This script is made by and copyrighted to Thomas Brattli at www.bratta.com
Visit for more great scripts. This may be used freely as long as this msg is intact!
I will also appriciate any links you could give me.
********************************************************************************/
//Default browsercheck, added to all scripts!
function checkBrowser(){
this.ver=navigator.appVersion
this.dom=document.getElementById?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
this.ie4=(document.all && !this.dom)?1:0;
this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
return this
}
bw=new checkBrowser()
//With nested layers for netscape, this function hides the layer if it's visible and visa versa
function showHide(div,nest){
obj=bw.dom?document.getElementById(div).style:bw.ie4?document.all[div].style:bw.ns4?nest?document[nest].document[div]:document[div]:0;
if(obj.visibility=='visible' || obj.visibility=='show') {obj.visibility='hidden';obj.display='none'}
else {obj.visibility='visible';obj.display='block'}
}
</script>
<style>
.contextmenu {
position:relative;
z-index:10;
left:15px;
top:-10px;
visibility:hidden;
display:none;
background:silver;
width:150px;
}
</style>
</head>
<body>
<a href="#" onclick="showHide('menu');">Klik menuen frem</a>
<span class="contextmenu" id="menu" onClick="showHide('menu');">Menuen er her...</span>
Denne tekst skal altså blive stående - også når man klikker menuen frem...
</body>
</html>
