Avatar billede moreless Nybegynder
09. januar 2003 - 10:25 Der er 21 kommentarer og
1 løsning

dropdown menu

hej

jeg skal bruge en dropdown menu som består af layers der bliver shown, hidden ved mouseOver og mouseOut, den skal ligge ovenpå nogle billeder som ligger i en tabel, jeg har prøvet at bygge en i dw men det er noget hest! og jeg har prøvet at finde en open source på nettet men udenheld med at tilpasse den, dvs. at jeg ikke vil have et link til en open source men derimod gives der point for det korteste og mest simple script som der virker.

Og læs lige hele spm før svar, takker.

/moreless
Avatar billede cdc Novice
09. januar 2003 - 10:29 #1
Kan du selv bygge vider på den ?
Avatar billede moreless Nybegynder
09. januar 2003 - 10:32 #2
vil gerne have noget der ligner en færdig kode
Avatar billede cdc Novice
09. januar 2003 - 10:33 #3
hvad med den hos www.dhtmlcentral.com
Avatar billede cdc Novice
09. januar 2003 - 10:34 #4
Her er en jeg selv arbejder med, er lidt tilbage: http://hjem.get2net.dk/arntsen/eksperten/menu/menu10.htm#

den hos dhtmlcentral ligger her, hvor der er flere: http://www.dhtmlcentral.com/projects/coolmenus/?m=10
Avatar billede moreless Nybegynder
09. januar 2003 - 10:40 #5
kan du tilpasse din menu så det er et billede man klikker på og så kommer et layer frem nedenunder?
Avatar billede cdc Novice
09. januar 2003 - 10:41 #6
http://hjem.get2net.dk/arntsen/eksperten/menu/menu_01.htm er et billed med onMouseover i stedet for onClick
Avatar billede cdc Novice
09. januar 2003 - 10:42 #7
Avatar billede moreless Nybegynder
09. januar 2003 - 10:47 #9
hmm, kan du gøre sådan at det ikke er tabels.. det skal ligge ovenpå et billede så det skal være ren layer.
Avatar billede cdc Novice
09. januar 2003 - 10:49 #10
så skal man lave dem med id og layers, er intet problem, men jeg har ikke tid til det nu da jeg sidder på arbejde
Avatar billede cdc Novice
09. januar 2003 - 10:50 #11
layers flere <div> mente jeg
Avatar billede moreless Nybegynder
09. januar 2003 - 10:52 #12
nikolaj> det er en fin menu, men der er et problem menuen forsvinder ikke med mouseout?
Avatar billede nikolajdu Nybegynder
09. januar 2003 - 10:56 #13
Det ved jeg godt, men jeg kan lave den lidt om. Dog skal du også være pmørksom på at min bruger 2 billeder.

1. Til knappen.
2. Til overskriften

Jeg tænker altså ikke på guitaren - den er bare lir.

/Nikolaj
Avatar billede nikolajdu Nybegynder
09. januar 2003 - 10:59 #14
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
   
    <LINK REL="StyleSheet" HREF="css/ie.css" type="text/css">
    <style>
   
    .mitLayerDu {
    font-family:        verdana,arial;
    font-size:            12px;
    color:                #ffffff;
    background-color:    #333333;
    background-image:URL(guitar.gif);
    background-repeat:no-repeat;
    background-position : right;
}


a:link{color: #ffffff;text-decoration: none;}
a:visited{color: #ffffff;text-decoration: none;}
a:active{color: #FFCCFF;text-decoration: underline;}
a:hover{color: #FFCC00;text-decoration: underline;}


    </style>
   
    <script>

luk = false;
aaben = true
   
function showSel(billedet,linket) {
    thisSel = document.getElementById("mySel");
    if (thisSel.style.visibility == "hidden") {
        selL = xPos(billedet);
        selT = yPos(billedet);
        thisSel.style.left = selL + 0;
        thisSel.style.top = selT + 21;
        thisSel.style.visibility = "visible";
        document.getElementById("selFrame").style.visibility = "visible";
    }
    else {
        thisSel.style.visibility = "hidden";
    }
}


function yPos(what){
    var picY = getY(document.images[what]);
    return picY;
}

function xPos(what){
    var picX = getX(document.images[what]);
    return picX;
}

function getY(obj) {
    if (obj == document.body) {
        return obj.offsetTop
    }
    else {
        return obj.offsetTop + getY(obj.offsetParent);
    }
}
function getX(obj) {
    if (obj == document.body) {
        return obj.offsetLeft
    }
    else {
        return obj.offsetLeft + getX(obj.offsetParent);
    }
}
   
ns4 = (document.layers)? true:false
ie4 = (document.all && !document.getElementById)? true:false
ie5 =(document.getElementById)? true:false
ns6 = (document.getElementById && !document.all)?true:false;
clicked = false;

function ud(id){

var styleObj = (ns4)? document.layers[id] : (ie4)? document.all[id].style : document.getElementById(id).style;
styleObj.visibility = "hidden";
}


</script>
   
</head>

<body>
<span id="farvelDu" onmouseover="aaben=true;showSel('selPic','select.html');" onmouseout="ud('mySel');ud('selFrame');">
<img type="image" src="sel2.gif" id="selPic" width="136" height="21" onclick="aaben=true" onmousedown="showSel('selPic','select.html');">


<div id="mySel" style="position:absolute;visibility:hidden;" onmouseout="if(luk!=false){ud('mySel');ud('selFrame')}" onblur="ud('mySel');ud('selFrame');" onmouseover="aaben=false" >
    <div id="selFrame" class="mitLayerDu"style="position:absolute;top:0;left:0;width:135;height:180;z-index:2;border:0">
   
<a href="#" onmouseover="luk=false;" onclick="ud('mySel');ud('selFrame');">hej 1</a><br>
<a href="#" onmouseover="luk=false;" onclick="ud('mySel');ud('selFrame');">hej 2</a><br>
<a href="#" onmouseover="luk=false;" onclick="ud('mySel');ud('selFrame');">hej 3</a><br>
<a href="#" onmouseover="luk=false;" onclick="ud('mySel');ud('selFrame');">hej 4</a><br>
<a href="#" onmouseover="luk=false;" onclick="ud('mySel');ud('selFrame');">hej 5</a><br>
<a href="#" onmouseover="luk=false;" onclick="ud('mySel');ud('selFrame');">hej 6</a><br>
<a href="#" onmouseover="luk=false;" onclick="ud('mySel');ud('selFrame');">hej 7</a><br>
   
    </div>
</div>
</span>
</body>
</html>
Avatar billede nikolajdu Nybegynder
09. januar 2003 - 11:01 #15
Så nu virker linket også sådan :)
Avatar billede moreless Nybegynder
09. januar 2003 - 11:16 #16
puha jeg har lidt svært ved at overskue hvilke variabler der skal gå igen når der skal være to menuer, kan jeg få dig til at lave en med 2 menupunkter, og hvis du er frisk med lidt kommentarer?
Avatar billede nikolajdu Nybegynder
09. januar 2003 - 11:30 #17
Kigger lige på det.
Avatar billede nikolajdu Nybegynder
09. januar 2003 - 11:43 #18
Avatar billede moreless Nybegynder
09. januar 2003 - 11:45 #19
takker jeg prøver lidt at se om jeg kan få det til at hænge sammen med mit grafik og kode, vender tilbage..
Avatar billede nikolajdu Nybegynder
09. januar 2003 - 11:45 #20
Det er indholdet af de 2 <span></span> du skal kigge på.

Du kan lave så mange du har lys til. Bare husk at sætte et tal efter som jeg har gjort.

selPic1
mySel1
selFrame1

osv....
Avatar billede moreless Nybegynder
09. januar 2003 - 11:49 #21
ja nemlig, det forvirrede mig lidt hvad der hørte til selv definering og hvad der hører til javascriptet..
Avatar billede moreless Nybegynder
09. januar 2003 - 12:50 #22
fjong, en menu der virker takker..
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