Ok, vis du laver en fil der hedder
dropmenu.js der indeholder dette:
var selectordiv,dmcy=0,dmcx=0,dropchk=0;selectors=[];
var stalkleft=0; // px til højre for mus (tal) px til venstre for mus (-tal)
var stalktop=0; // px til nedenunder mus (tal) px over for mus (-tal)
var IE=((document.all) && (navigator.userAgent.indexOf('Opera')== -1))?true:false;
document.onclick=function(){if(dropchk<=0){selectordiv.style.display="none";dropchk=0;}else dropchk+=-2;}
if(!IE)document.captureEvents(Event.mousemove)
window.onload=function(){
selectordiv=document.getElementById("selectordiv");
selectordiv.style.display="none";
selects=document.getElementsByTagName("select");
while(selects.length>0){
opts=selects[0].getElementsByTagName("option");
tmp=[];
for(j=0;j<opts.length;j++){
tmp[tmp.length]=opts[j].childNodes[0].nodeValue;
}
tmp2=document.createElement("div");
tmp2b=document.createTextNode(tmp[selects[0].selectedIndex]);
tmp2.appendChild(tmp2b);tmp2.className="selecters";
tmp2.setAttribute("id",selects[0].name);tmp2.onclick=function(){dropf(this);}
selectors[selects[0].name]=tmp;
a=selects[0].parentNode;a.replaceChild(tmp2,selects[0]);
}
}
function dropf(tn){
while(tn2=selectordiv.childNodes[0])selectordiv.removeChild(tn2);
tmp=selectors[tn.id];
for(i=0;i<tmp.length;i++){
tmp2=document.createElement("a");
tmp2.href="#";
tmp2b=document.createTextNode(tmp[i]);
tmp2.onclick=function(){dropt(this,''+tn.id+'');return false;}
tmp2.appendChild(tmp2b);selectordiv.appendChild(tmp2);
}
dropchk++;selectordiv.style.display="block";
}
document.onmousemove=function(e){
if(!dropchk){
if(IE){
dmcst=(tmenu=document.documentElement.scrollTop)?tmenu:document.body.scrollTop;
dmcsl=(lmenu=document.documentElement.scrollLeft)?lmenu:document.body.scrollLeft;
dmcy=event.clientY+dmcst;dmcx=event.clientX+dmcsl;
}else{dmcy=e.pageY;dmcx=e.pageX;}
selectordiv.style.top=dmcy+stalktop+"px";
selectordiv.style.left=dmcx+stalkleft+"px";
}
}
function dropt(tn,o){
document.getElementById(o).childNodes[0].nodeValue=tn.childNodes[0].nodeValue;
}
og en anden fil der hedder style.css med dette indhold:
.selecters{
width:100px;
text-align:right;
border:2px solid #000;
cursor:pointer;
}
/* ^ - Slet evt. den css del det er blot en style demo - eller ret den så feltets fremvisning passer */
#etellerandet1{
border-color:#f00;
}
/* Du kan evt. også style enkelte felter ved at style ved hjælp af #namesomduharsatpåselect'en */
/* Årsagen til dette er at name konverteres til en id i scriptet */
#selectordiv{
border:2px solid #000;
background:#ccc;
width:200px;
text-align:center;
position:absolute;
top:0px;left:0px;
display:none;
}
/* ^ - border og background i ovenstående er blot til style demo */
#selectordiv a{
background:#ccc;color:#000;
display:block;width:100%;
text-decoration:none;
}
/* ^ - Slet evt. den css del det er blot en style demo */
#selectordiv a:hover{
background:#888;color:#ddd;
}
/* ^ - Slet evt. den css del det er blot en style demo */
@media print{
.selecters{
border:0px;
}
}
så kan du gøre så test.html ser sådan her ud:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" src="dropmenu.js"></script>
</head><body>
<select size="1" name="etellerandet1">
<option>Test 1 - 1</option>
<option>Test 1 - 2</option>
<option>Test 1 - 3</option>
</select>
<br><br><br>
<select size="1" name="nogetandet2">
<option>Test 2 - 1 ---</option>
<option>Test 2 - 2 ---</option>
<option selected="selected">Test 2 - 3 ---</option>
</select>
<br><br><br>
<select size="1" name="ellernogettredje3">
<option>Test 3 - 1 ...</option>
<option>Test 3 - 2 ...</option>
<option>Test 3 - 3 ...</option>
</select>
<div id="selectordiv">a</div></body></html>
.... d.v.s. at det bare er en henvisning til de to filer med
henhldsvis css og javascript du skal indsætte en henvisning til
inde under head delen på dine nuværende dokumenter ... :o)
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" src="dropmenu.js"></script>
Ny bruger
Nybegynder
Opret
Preview
