Results 1 to 7 of 7

Thread: Any Link Drop Down Menu - Question

  1. #1
    Join Date
    May 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Any Link Drop Down Menu - Question

    Any Link Drop Down Menu

    I'm using the aforementioned script on a web page. I've customised it to suit the page, and it's a great, thanks!

    My problem is... I've added more links, which now means the 'drop down menu' is longer than the browser page that it opens in. This has caused the menu to 'drop up', rather than down, and seeing as the menu is right at the top of the page, it is unreadable, and consequently unclickable, too.

    Is there a way to customise the script so that this doesn't occur, and the menu still 'drops down'? Failing that, is there any way of customising the script so that on mouseover it reveals two columns of links, side by side?

    Thanks for any help in advance. God knows, I need it. =)

    BabbleOn

  2. #2
    Join Date
    May 2005
    Location
    Gold River, British Columbia Canada
    Posts
    29
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Just a thought...
    What about creating another link category similar to the one you have and split up the links between the two?

  3. #3
    Join Date
    May 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks, nootkan..

    I had thought about doing that, but seeing as the drop down menus are for an alphabetical theme.. ie: A, B, C, D, etc.. the problem drop down menu is the S category, being longer than the rest. I didn't want to have two "S menus" unless there is no other option.

    Nevertheless, your response is appreciated. =)

  4. #4
    Join Date
    Sep 2004
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I once wrote a table inside of the array. Provided your CSS isn't too complex, you may be able to use the same method to create two columns. Use the first and last elements of the arrays for the opening and closing table tags, respectively. Then within the elements between, you can put a <tr><td>blah</td><td>blah2</td></tr>. I know it's not pretty, but It's bailed me out in the past.

    Very simply, this is what it looks like:

    Code:
    menu0[0]='<table>'
    menu0[1]='<tr><td>link 1</td><td>link 2</td></tr>'
    menu0[2]='</table>'
    Regards,
    bfisher

  5. #5
    Join Date
    May 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks, bfisher.

    I had wondered if using a table within the array is possible. Sadly, because of the need for regular updating, it would be impracticle to use that type of table, so I tried using a columns only table, which seems to work.. The problem is, using a table within the array seems to make the font different from the other drop down menus, and also, the entries on the second column do not line up with the first column, etc etc...

    I'm sure there is a way around this, and I'm still 'playing' w/ it. Any further help from anyone would be greatly appreciated.

    Thanks again, bfisher.

  6. #6
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Below is one solution around this problem, which lets you specify a "max height" setting for a specific drop down menu you know will be very long. The drop down menu in this case will have scrollbars, and content that flows beyond the max height (ie: 500px) will be reached by scrolling within the drop down menu.

    To implement this change, firstly, replace the function dropdownmenu() within the script with the modified version below:

    Code:
    function dropdownmenu(obj, e, menucontents, menuwidth, optmaxheight){
    if (window.event) event.cancelBubble=true
    else if (e.stopPropagation) e.stopPropagation()
    clearhidemenu()
    dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
    //////// BEGIN MAX HEIGHT CODE ADDITION /////////////
    if (typeof optmaxheight!="undefined"){
    dropmenuobj.style.height=optmaxheight
    dropmenuobj.style.overflow="scroll"
    }
    else{
    dropmenuobj.style.height=""
    dropmenuobj.style.overflow="auto"
    }
    /////// END MAX HEIGHT CODE ADDITION ///////////////
    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()
    }
    Then, in the HTML for the menu link you know has a very long drop down menu, do the following:

    Code:
    <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px', '500px')" onMouseout="delayhidemenu()">Web Design</a>
    The "500px" at the end is the added parameter you enter to specify this drop down menu's max height. The result is the drop down menu will be 500px tall and with scrollbars. Note that for all other menu links that don't have long drop down menus, this parameter shouldn't even be specified.

  7. #7
    Join Date
    Sep 2004
    Posts
    23
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    BabbleOn-

    Do you have code available for us to look at??

    bfisher

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
  •