Avatar billede weblance Nybegynder
25. juni 2008 - 19:11 Der er 6 kommentarer og
1 løsning

Hjælp ønskes til at lave dropdown menu script om

Jeg har et simpelt dropdown script på min hjemmeside www.faeroerne.dk som jeg godt kunne tænke mig at få hjælp til at få lavet lidt om på. Kan man ikke lave dem om til at understøtte multi level dropdown?

Scriptet ser sådan ud:

/***********************************************
* 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 menuPanorama=new Array()
menuPanorama[0]='<a href="#" onmouseover="dropdownmenu(this, event, menuPanoramaSel, \'150px\')"  class="menu">Streymoy</a>'
menuPanorama[1]='<a href="#">Eysturoy</a>'
menuPanorama[2]='<a href="#">Vágoy</a>'
menuPanorama[3]='<a href="#">Mykines</a>'

var menuPanoramaSel=new Array ()
menuPanoramaSel[0]='Hallo'

var menu2=new Array()
menu2[0]='<a href="../faktaomfaeroerne.php">Fakta om Færøerne</a>'
menu2[1]='<a href="../faktaomfuglene.php">Fakta om fuglene</a>'
menu2[2]='<a href="../farveklat.php">En farveklat i havet</a>'

var menuwidth='165px' //default menu width
var menubgcolor='#eef1e7'  //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
Avatar billede weblance Nybegynder
25. juni 2008 - 20:01 #1
Hvis der er et andet alternativ til en multilevel drop down menu, som passer ind i det øvrige design, så hører jeg også gerne om det!
Avatar billede roenving Novice
26. juni 2008 - 01:38 #2
At lave en eksisterende single-level menu om til multi-level, svarer nogenlunde til at bygge en Ellert om til en 50 personers Luksusbus, så det er principielt et no-go ...

-- men kig efter nogle af de andre menuer, f.eks. coolmenu, der bruges her på sitet eller burmees eller noget andet !-)
Avatar billede weblance Nybegynder
27. juni 2008 - 16:04 #3
Ok, tak for hjælpen - smid et svar, så får du point
Avatar billede weblance Nybegynder
27. juni 2008 - 17:38 #4
Jeg har kigget meget på coolmenu - kan det virkelig passe at den ikke kan placeres i fx. en tabel, eller skal placeringen specificeret med pixels fra øverste venstre hjørne?
Avatar billede roenving Novice
28. juni 2008 - 11:39 #5
Kig på hans detaljerede eksempler, f.eks. er menuen her placeret i et bestemt element, og hvis du resizer vinduet vil du se, at placeringen genberegnes ...

-- så egentlig har du ret, den placeres et bestemt sted, men placeringen kan (gen-)beregnes dynamisk !-)

-- els velbekomme '-)
Avatar billede roenving Novice
28. juni 2008 - 11:52 #6
-- og jeg kastede lige et eksempel i http://www.eksperten.dk/spm/365708 !o]
Avatar billede roenving Novice
17. november 2008 - 06:31 #7
Tak for point ;~}
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