SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Oct 2005
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can this script be made into a multi-level menu?

    I've been using this two-level menu on my site for a number of years, and like it because it's easy to use, and I don't have to update EVERY page of the website when I update the menu.

    Now I have a need for a three-level menu, and have searched the internet for one that will work with my images...no luck finding one that works for me.

    My question is: can this script be modified to make it three-level instead of two, or does anyone know of a similar script that can be easily updated like this one?

    Code:
    var menu1=new Array()
    menu1[0]='<a href="sh-nw.htm">Northwest Florida</a>'
    menu1[1]='<a href="sh-ne.htm">Northeast Florida</a>'
    menu1[2]='<a href="sh-central.htm">Central Florida</a>'
    menu1[3]='<a href="sh-west.htm">West Coast of Florida</a>'
    menu1[4]='<a href="sh-east.htm">East Coast of Florida</a>'
    menu1[5]='<a href="sh-sw.htm">Southwest Florida</a>'
    menu1[6]='<a href="sh-se.htm">Southeast Florida</a>'
    menu1[7]='<a href="sh-oos.htm">Out Of State</a>'
    menu1[8]='<a href="sh-natl.htm">National Events</a>'
    menu1[9]='<a href="pg-regions.htm">Event Regions Map</a>'
    
    var menu2=new Array()
    menu2[0]='<a href="cr-sun.htm">Sunday</a>'
    menu2[1]='<a href="cr-mon.htm">Monday</a>'
    menu2[2]='<a href="cr-tues.htm">Tuesday</a>'
    menu2[3]='<a href="cr-wed.htm">Wednesday</a>'
    menu2[4]='<a href="cr-thurs.htm">Thursday</a>'
    menu2[5]='<a href="cr-fri-am.htm">Friday (A-M)</a>'
    menu2[6]='<a href="cr-fri-nz.htm">Friday (N-Z)</a>'
    menu2[7]='<a href="cr-sat-ac.htm">Saturday (A-C)</a>'
    menu2[8]='<a href="cr-sat-df.htm">Saturday (D-F)</a>'
    menu2[9]='<a href="cr-sat-gi.htm">Saturday (G-I)</a>'
    menu2[10]='<a href="cr-sat-jl.htm">Saturday (J-L)</a>'
    menu2[11]='<a href="cr-sat-m.htm">Saturday (M)</a>'
    menu2[12]='<a href="cr-sat-no.htm">Saturday (N-O)</a>'
    menu2[13]='<a href="cr-sat-pr.htm">Saturday (P-R)</a>'
    menu2[14]='<a href="cr-sat-s.htm">Saturday (S)</a>'
    menu2[15]='<a href="cr-sat-tv.htm">Saturday (T-V)</a>'
    menu2[16]='<a href="cr-sat-wz.htm">Saturday (W-Z)</a>'
    menu2[17]='<a href="cr-cars-cof.htm">Cars and Coffee</a>'
    
    var menu3=new Array()
    menu3[0]='<a href="cl-aaca.htm">AACA Club Listings</a>'
    menu3[1]='<a href="cl-corvette.htm">Corvette Club Listings</a>'
    menu3[2]='<a href="cl-mopar.htm">Mopar Club Listings</a>'
    menu3[3]='<a href="cl-mustang.htm">Mustang Club Listings</a>'
    menu3[4]='<a href="cl-ab.htm">Club Listings (A-B)</a>'
    menu3[5]='<a href="cl-c.htm">Club Listings (C)</a>'
    menu3[6]='<a href="cl-df.htm">Club Listings (D-F)</a>'
    menu3[7]='<a href="cl-gl.htm">Club Listings (G-L)</a>'
    menu3[8]='<a href="cl-mo.htm">Club Listings (M-O)</a>'
    menu3[9]='<a href="cl-pr.htm">Club Listings (P-R)</a>'
    menu3[10]='<a href="cl-s.htm">Club Listings (S)</a>'
    menu3[11]='<a href="cl-tv.htm">Club Listings (T-V)</a>'
    menu3[12]='<a href="cl-wz.htm">Club Listings (W-Z)</a>'
    menu3[13]='<a href="cl-oos.htm">Out Of State</a>'
    menu3[14]='<a href="cl-natl.htm">National and Regional</a>'
    
    var menu5=new Array()
    menu5[0]='<a href="submit-event.htm">Submit An Event</a>'
    menu5[1]='<a href="submit-event.htm">Submit A Cruise In</a>'
    menu5[2]='<a href="submit-club.htm">Submit Your Club</a>'
    menu5[3]='<a href="pg-regions.htm">Event Regions Map</a>'
    
    var menu6=new Array()
    menu6[0]='<a href="pg-csiab.htm">Car Show In A Box</a>'
    menu6[1]='<a href="pg-feature.htm">Feature Your Next Event</a>'
    menu6[2]='<a href="http://www.facebook.com/pages/FlaCarShowscom/155576147806209">Like Us On Facebook</a>'
    menu6[3]='<a href="http://flaoldguys.blogspot.com/">The Florida Old Guys</a>'
    menu6[4]='<a href="pg-copyright.htm">Copyright Info</a>'
    menu6[5]='<a href="pg-privacy.htm">Privacy Policy</a>'
    menu6[6]='<a href="pg-news.htm">Newsletter Sign Up</a>'
    menu6[7]='<a href="pg-gb.htm">GasBuddy Fuel Prices</a>'
    menu6[8]='<a href="pg-regions.htm">Event Regions Map</a>'
    		
    var menuwidth='200px'
    var menubgcolor='#C0C0C0'
    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
    The website it's being used on is FlaCarShows.com.

    Thanks in advance for the help...y'all ALWAYS come through for me!

  2. #2
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    What type of menu, drop down menu?
    If it is drop down then, I think there are ready made plugins.
    Quality codes are optimized and tested...
    Click here for inspiration..

  3. #3
    Patience... bronze trophy solidcodes's Avatar
    Join Date
    Jul 2006
    Location
    Philippines
    Posts
    936
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quality codes are optimized and tested...
    Click here for inspiration..


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •