Avatar billede krel Nybegynder
17. oktober 2007 - 19:49 Der er 17 kommentarer og
1 løsning

Drop down menu

Hey xperter!

Ved godt at dette emne har været oppe 1000+ gang før, men jeg syns ikke rigtig jeg kan finde hoved og hale i alle de forskellige tråde der er her på siden.

Jeg har også fundet et script fra dynamicdrive - men det fungere heller ikke helt som jeg gerne vil og så ville jeg også gerne lave min helt egen kode!

Bare så vi er enige er det en menu med tre overskrifter:

menu1            menu2            menu3
-undermenu
-undermenu
-undermenu
-undermenu

og altså ikke en <select size="1" name="navn"></select>

mvh.
Kristian
Avatar billede w13 Novice
18. oktober 2007 - 00:57 #1
Hej igen, Krel. Se om du kan få noget ud af følgende:
-----------------------------------------------------
<html>
<head>
<script type="text/javascript">
var menunormalcolor="";
var menuhovercolor="#c0c0c0";

function ShowSubmenu(elm,submenu){
    elm.style.backgroundColor=menuhovercolor;
    if(submenu=document.getElementById(submenu)){
        submenu.style.top=elm.offsetTop+elm.offsetHeight;
        submenu.style.left=elm.offsetLeft;
        submenu.style.display="inline";
    }
}
function HideSubmenu(elm,submenu){
    elm.style.backgroundColor=menunormalcolor;
    if(submenu=document.getElementById(submenu)) submenu.style.display="none";
}
</script>
</head>
<body>

<span onmouseover="ShowSubmenu(this)" onmouseout="HideSubmenu(this)">Forside</span>
<span onmouseover="ShowSubmenu(this,'submenu_andet')" onmouseout="HideSubmenu(this,'submenu_andet')">Andet</span>
<span onmouseover="ShowSubmenu(this,'submenu_mere')" onmouseout="HideSubmenu(this,'submenu_mere')">Og mere til</span>

<div id="submenu_andet" style="position:absolute;display:none;border:1px solid #000000;padding:10px">Hej<br>Test<br>Test2</div>

<div id="submenu_mere" style="position:absolute;display:none;border:1px solid #000000;padding:10px">Hello<br>Dejligt<br>Skønt</div>

</body>
</html>
-----------------------------------------------------
Jeg har prøvet at gøre det så enkelt som muligt.
Avatar billede krel Nybegynder
18. oktober 2007 - 23:45 #2
det vil jeg vøre w13 :D der går nok lidt for har en del arbejde frem til en gang i næste uge.. så vender tilbage med point hvis der er ok?
Avatar billede w13 Novice
19. oktober 2007 - 04:42 #3
Det er fint! ^^
Avatar billede krel Nybegynder
23. oktober 2007 - 18:05 #4
Så er der lidt tid ud i fremtiden som ikke bliver så tynget af arbejde :D
har kigget på dett script du har skrevet og har nogle spm:

1) Hvordan laver jeg en funktion så submenuen ikke forsvinder ligeså snart man fjerne musen fra link-teksten.

2) Jeg har proppet det i en tabel (da det endeligt ska ende i en tabel) men <div>'en skubber alt andet indhold længere ned af siden (hvilket ikke er så godt da jeg har en ny tabel lige efter den tabel som menuen skal ligge i!!) kan man gøre så div'en kommer 'over' alt andet på siden.

3) Kan man skubbe <div> så den ikke ligger lige under link-teksten men fx 20-30px under altså ca. sådan her:

menu (i stedet for) menu
____                    sub1
sub1                    sub2
sub2                    sub3
sub3

???????????????????
mvh.
Kristian
Avatar billede w13 Novice
23. oktober 2007 - 18:15 #5
Hvis du bruger position:absolute på hele menuen, kan du rykke den rundt med top:noget px; og left:noget px;, altså i CSS.

Spg. 1 kan løses ved at rette function HideSubmenu til:

function HideSubmenu(elm,submenu){
    setTimeout("elm.style.backgroundColor=menunormalcolor;if (submenu=document.getElementById(submenu)) submenu.style.display='none'",2000);
}

2000 kan så rettes til et mere passende tal. Det er vist millisekunder.
Avatar billede w13 Novice
23. oktober 2007 - 18:21 #6
Og svaret på spg. 3 er her:

        submenu.style.top=elm.offsetTop+elm.offsetHeight+30;

Hvor 30 indikerer det antal px, det skal rykkes længere ned.
Avatar billede krel Nybegynder
23. oktober 2007 - 19:49 #7
den skriver at elm ikke er defineret ...
Avatar billede w13 Novice
23. oktober 2007 - 20:57 #8
Så prøver vi:

function StartHide(elm,submenu){
    elm.style.backgroundColor=menunormalcolor;
    if(submenu=document.getElementById(submenu)) submenu.style.display="none";
}
function HideSubmenu(elm,submenu){
    setTimeout("StartHide("+elm+","+submenu+")",2000);
}
Avatar billede krel Nybegynder
24. oktober 2007 - 14:24 #9
så skriver den object ikke er defineret?
Avatar billede w13 Novice
24. oktober 2007 - 14:28 #10
Virkelig? Hvad så med:

function StartHide(elm,submenu){
    elm.style.backgroundColor=menunormalcolor;
    if(submenu=document.getElementById(submenu)) submenu.style.display="none";
}
function HideSubmenu(elm,submenu){
    setTimeout("StartHide(elm,submenu)",2000);
}
Avatar billede krel Nybegynder
24. oktober 2007 - 14:34 #11
tilbage ved elm...
jeg har en fra dynamicdrive men den er bare utrolig lang i kode og så ser det heller ikke super fedt ud med den der firkant med copyright osv der skal stå der hvis man vil bruge scriptet... men man kan vel låne lidt fra den måske?? wanna see??
Avatar billede w13 Novice
24. oktober 2007 - 14:37 #12
Sådan nogle koder er næsten aldrig lavet med gyldige koder og som regel forældet og al for lang. Min kode kan sagtens komme til at virke og den er helt gyldig, uptodate og fremtidssikker. =) Lige nu er jeg bare ikke hjemme, så kan ikke teste på samme måde.

Men prøv at skrive dynamicdrivekoden her.
Avatar billede krel Nybegynder
24. oktober 2007 - 14:40 #13
ok den kommer her:

<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a class="menu" href="#"></a>'
menu1[1]='<a class="menu" href="http://www.freewarejava.com">Freewarejava.com</a>'
menu1[2]='<a class="menu" href="http://codingforums.com">Coding Forums</a>'
menu1[3]='<a class="menu" href="http://www.cssdrive.com">CSS Drive</a>'

//Contents for menu 2
var menu2=new Array()
menu2[0]='<a class="menu" href="#"></a>'
menu2[1]='<a class="menu" href="http://msnbc.com">MSNBC</a>'
menu2[2]='<a class="menu" href="http://news.bbc.co.uk">BBC News</a>'

//Contents for menu 3
var menu3=new Array()
menu3[0]='<a class="menu" href="#"></a>'
menu3[1]='<a class="menu" href="http://msnbc.com">MSNBC</a>'
menu3[2]='<a class="menu" href="http://news.bbc.co.uk">BBC News</a>'
       
var menuwidth='133px' //default menu width
var menubgcolor='lightyellow'  //menu bgcolor
var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

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

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

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

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>
Avatar billede w13 Novice
24. oktober 2007 - 14:46 #14
Jaeh, den er lidt unødvendigt lang og ser vist ud til at være blevet lavet under IE4, så den er nogle år gammel. Virker den også i Firefox?

Skriv evt. din kode, hvor du bruger min menufunktion, så kan jeg lige afprøve den på min egen computer og få den til at fungere.
Avatar billede krel Nybegynder
24. oktober 2007 - 14:53 #15
hmm mener jeg faktisk den gør men er ikke helt sikker....

#kode
<html>
<head>
</script>
<script type="text/javascript">
var menunormalcolor="";
var menuhovercolor="";

function ShowSubmenu(elm,submenu){
    elm.style.backgroundColor=menuhovercolor;
    if(submenu=document.getElementById(submenu)){
        submenu.style.top=elm.offsetTop+elm.offsetHeight+30;
        submenu.style.left=elm.offsetLeft;
        submenu.style.display="inline";
    }
}
function StartHide(elm,submenu){
    elm.style.backgroundColor=menunormalcolor;
    if(submenu=document.getElementById(submenu)) submenu.style.display="none";
}
function HideSubmenu(elm,submenu){
    setTimeout("StartHide(elm,submenu)",2000);
}
</script>
</head>
<body>
<table style="background-image:url('grafik/baggrund/topbanner.png')" style="height:15px" class="text" border="0" width="390px" id="table1" cellspacing="0" cellpadding="0">
    <tr>
        <td width="130px" height="15px"><span onmouseover="ShowSubmenu(this)" onmouseout="HideSubmenu(this)">Forside</span></td>
        <td width="130px" height="15px"><span onmouseover="ShowSubmenu(this,'submenu_01')" onmouseout="HideSubmenu(this,'submenu_01')">Andet</span></td>
        <td width="130px" height="15px"><span onmouseover="ShowSubmenu(this,'submenu_02')" onmouseout="HideSubmenu(this,'submenu_02')">Og mere til</span></td>
    </tr>
</table>
<div style="position:absolute; left:133px; top:0; width:130px; z-index:100" id="submenu_01" style="display:none;"><a href="">1</a><br><a href="">2</a><br><a href="">3</a></div>
<div style="position:absolute; left:267px; top:0; width:130px; z-index:100" id="submenu_02" style="display:none;"><a href="">1</a><br><a href="">2</a><br><a href="">3</a></div>
<table style="background-image:url('grafik/baggrund/topbanner.png')" style="height:15px" class="text" border="0" width="390px" id="table2" cellspacing="0" cellpadding="0">
    <tr>
        <td></td>
    </tr>
</table>
</body>
</html>
Avatar billede w13 Novice
16. april 2008 - 14:34 #16
Hov, jeg fik vist aldrig mail om dit sidste svar her.

Stadig brug for hjælp?
Avatar billede krel Nybegynder
16. april 2008 - 17:35 #17
kan faktisk ikke huske dette... men nej umiddelbart har jeg ikke brug for hjælp.. men point ska du da ha for tid og interesse..
Avatar billede w13 Novice
16. april 2008 - 18:13 #18
Jeg takker ærbødigt! :)
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