07. oktober 2003 - 22:08Der er
12 kommentarer og 1 løsning
Hjælp til Drop-down menu (JavaScript)
Jeg har et lille problem med min dropdownmenu.
Den funger fint, men problemet er at hvis man går hen over de to overpunkter "OVERVIEW" & "EDITING" lige efter hinanden, så bliver begges undermenuer stående. Kan det ikke laves således at når man går til et nyt overpunkt forsvinder de andre? Dette må også gerne ske hvis man går til de sidste 3 menuer (som dog ikke har undermenuer).
Muligvis også sådan at baggrunden på undermenuerne er transparent i stedet for hvid (#FFFFFF) :-)
<SCRIPT language=javascript> // <!-- window.onerror = null; var bName = navigator.appName; var bVer = parseInt(navigator.appVersion); var NS4 = (bName == "Netscape" && bVer >= 4); var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4); var NS3 = (bName == "Netscape" && bVer < 4); var IE3 = (bName == "Microsoft Internet Explorer" && bVer < 4); var menuActive = 0 var menuOn = 0 var onLayer var timeOn = null// LAYER SWITCHING CODE if (NS4 || IE4) { if (navigator.appName == "Netscape") { layerStyleRef="layer."; layerRef="document.layers"; styleSwitch=""; }else{ layerStyleRef="layer.style."; layerRef="document.all"; styleSwitch=".style"; } }
// SHOW MENU function showLayer(layerName){ if (NS4 || IE4) { if (timeOn != null) { clearTimeout(timeOn) hideLayer(onLayer) } if (NS4 || IE4) { eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"'); } onLayer = layerName } }// HIDE MENU function hideLayer(layerName){ if (menuActive == 0) { if (NS4 || IE4) { eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"'); } } }// TIMER FOR BUTTON MOUSE OUT function btnTimer() { timeOn = setTimeout("btnOut()",1000) }// BUTTON MOUSE OUT function btnOut(layerName) { if (menuActive == 0) { hideLayer(onLayer) } }// MENU MOUSE OVER function menuOver(itemName) { clearTimeout(timeOn) menuActive = 1 }// MENU MOUSE OUT function menuOut(itemName) { menuActive = 0 timeOn = setTimeout("hideLayer(onLayer)", 400) }// --> </SCRIPT> </head>
Måske ikke den nemmeste eller bedste løsning, men den virker da. Du skal ændre lidt i en showLayer() funktion: // SHOW MENU layerArr=["Event","Hdgeneral"]; function showLayer(layerName){
if (NS4 || IE4) { if (timeOn != null) { clearTimeout(timeOn) hideLayer(onLayer) } if (NS4 || IE4) { for (i=0;i<layerArr.length;i++) { if (layerName == layerArr[i]) eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"'); else hideLayer(layerArr[i]); }} onLayer = layerName } }// HIDE MENU
og så ændre tilføje lidt nede i linien med linkene (OVERVIEW og den slags): <td> <a class="bigmenus" href="#" onMouseOver="showLayer('Event')">OVERVIEW</a> <a class="bigmenus" href="#" onMouseOver="showLayer('Hdgeneral')">EDITING</a> <a href="link.htm" onMouseOver="showLayer('')">LINK</a> <a href="writer.htm" onMouseOver="showLayer('')">WRITER</a> <a href="writer.htm" onMouseOver="showLayer('')">WRITER</a></td>
denne løsning kræver at du laver et array (layerArr) hvor du skriver de forskellige div's som kan vises frem (i dette tilfælde Event og Hdgeneral). Hvis du senere laver en ekstra div, der fx hedder Undermenu kan du tilføje den oppe i layerArr: layerArr["Event","Hdgeneral","Undermenu"];
---Der findes vist en lettere måde, men den kan jeg ikke lige huske - skriver igen hvis jeg finder ud af noget ellers må du indtil videre nøjes med det her ;-)
Hmmm..det ser lidt omstændigt ud? Kan du finde løsningen og paste hele koden ind (altså fra HTML start til slut)? Så skal jeg nok smide de 200 point til dig :-)
<SCRIPT language=javascript> // <!-- window.onerror = null; var bName = navigator.appName; var bVer = parseInt(navigator.appVersion); var NS4 = (bName == "Netscape" && bVer >= 4); var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4); var NS3 = (bName == "Netscape" && bVer < 4); var IE3 = (bName == "Microsoft Internet Explorer" && bVer < 4); var menuActive = 0 var menuOn = 0 var onLayer var timeOn = null// LAYER SWITCHING CODE if (NS4 || IE4) { if (navigator.appName == "Netscape") { layerStyleRef="layer."; layerRef="document.layers"; styleSwitch=""; }else{ layerStyleRef="layer.style."; layerRef="document.all"; styleSwitch=".style"; } }
// SHOW MENU layerArr=["Event","Hdgeneral"]; function showLayer(layerName){
if (NS4 || IE4) { if (timeOn != null) { clearTimeout(timeOn) hideLayer(onLayer) } if (NS4 || IE4) { for (i=0;i<layerArr.length;i++) { if (layerName == layerArr[i]) eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"'); else hideLayer(layerArr[i]); }} onLayer = layerName } }// HIDE MENU function hideLayer(layerName){ if (menuActive == 0) { if (NS4 || IE4) { if (layerName) eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"'); } } }// TIMER FOR BUTTON MOUSE OUT function btnTimer() { timeOn = setTimeout("btnOut()",1000) }// BUTTON MOUSE OUT function btnOut(layerName) { if (menuActive == 0) { hideLayer(onLayer) } }// MENU MOUSE OVER function menuOver(itemName) { clearTimeout(timeOn) menuActive = 1 }// MENU MOUSE OUT function menuOut(itemName) { menuActive = 0 timeOn = setTimeout("hideLayer(onLayer)", 400) }// --> </SCRIPT> </head>
hmmm, den er næsten ok...bortset fra at man nu kun kan vælge første underpunkt i "drop-down'en" de andre forsvinder når man går hen over dem? Muligvis der skal være flere undermenuer, så det skal jo helst funge :-)
Nu vil jeg ikke poste hele scriptet igen, så jeg håber du kan finde ud af at erstatte de to skjulte menuer med det her: <div id="Event" style="left: 197px; top: 104px"> <table bgcolor="black" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr> <td>
<table bgcolor="#FFFFFF" cellpadding="1" cellspacing="0"> <tbody> <tr> <td><img alt border="0" height="1" src="line.gif" width="2"></td> <td><a class="menus" href="content.htm" onmouseout="menuOut('rollimg0')" onmouseover="menuOver('rollimg0')" target="_top">Content</a></td> <td><img alt border="0" height="1" src="line.gif" width="2"></td> </tr> <tr> <td><img alt border="0" height="1" src="line.gif" width="2"></td> <td><a class="menus" href="pictures.htm" onmouseout="menuOut('rollimg1')" onmouseover="menuOver('rollimg1')" target="_top">Pictures</a></td> <td><img alt border="0" height="1" src="line.gif" width="2"></td> </tr> <tr> <td><img alt border="0" height="1" src="line.gif" width="2"></td> <td><a class="menus" href="news.htm" onmouseout="menuOut('rollimg2')" onmouseover="menuOver('rollimg2')" target="_top">News</a></td> <td><img alt border="0" height="1" src="line.gif" width="2"></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> <!-- menu end -->
Problemmet var at du havde lavet en fejl i din mouseover-event (altså de funktioner som bliver kaldt, når du flytter musen over et link). Du havde før skrevet onmouseover="menuOver('rollimg0" hvilket giver en fejl i dette tilfælde da du ikke afslutter din parentes og anførselstegnet. Istedet skal du skrive: onmouseover="menuOver('rollimg0')"
Hmmmm......jeg har netop Copy-Pastet fremsendte ind i min hml fil, men der er ingen forskel fra det oprindelige? Menuerne opfører sig præcis som på det først fremsendte fra mig.
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.