Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: AnyLink Vertical AND Dropdown Menus

  1. #1
    Join Date
    Jul 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default AnyLink Vertical AND Dropdown Menus

    1) Script Title: Vertical and Dropdown

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nkvertical.htm

    3) Describe problem: I have a site where I need BOTH the Veritcal and the Dropdown menus.

    What do I have to do to make them co-exist as they have a lot of the same function calls, etc.

    Thank you in advance.

    PS - http://www.ioweb.com/goodwill
    I put as much of the JS in separate files and the HTML is template.html

  2. #2
    Join Date
    Aug 2004
    Posts
    9,894
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    Sure, here's a quick way to combine both functions to the original AnyLink Vertical Menu (so it can drop down as well).

    Inside the script, replace the following chunk of code:

    Code:
    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")+obj.offsetWidth+horizontaloffset+"px"
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
    }
    with:

    Code:
    function dropdownmenu(obj, e, menucontents, menuwidth, istop){
    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-(istop? 0 : clearbrowseredge(obj, "rightedge")-obj.offsetWidth+horizontaloffset)+"px"
    dropmenuobj.style.top=dropmenuobj.y+(istop? obj.offsetHeight : -clearbrowseredge(obj, "bottomedge"))+"px"
    }
    }
    Then in your HTML, if you want an anchor link to cause its drop down menu to drop down instead of to the right, pass in a 3rd parameter:

    Code:
    <a href="default.htm" onMouseover="dropdownmenu(this, event, menu1, '165px', 'istop')" onMouseout="delayhidemenu()">Webmaster Links</a>
    The only caveat is that the drop down function doesn't account for right/bottom window edges as the drop right function does.

    Edit: Edited code for errors
    Last edited by ddadmin; 07-17-2008 at 04:34 AM.

  3. #3
    Join Date
    Jul 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Closer!

    When I replace that code you mentioned, it doesn't work either the vertical or the top ones, but if I put the code back to the original state, it ALMOST works, although I think it is picking up the vertical parameters for color, etc.

    Check out www.ioweb.com/goodwill/template.html - the code I have is in nav.js

    Thanks!

  4. #4
    Join Date
    Jul 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Moving closer...

    I put this in your code

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

    Where it used to be

    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)

    Now I just have to get this changed over to a new css set based on vertical vs. top menus

  5. #5
    Join Date
    Aug 2004
    Posts
    9,894
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    Ah yes, I had forgotten that the function name itself was also changed to accept a new parameter. I've updated what I posted above to include that.

  6. #6
    Join Date
    Jul 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Final piece

    So now my issue is that I can differentiate a left nav from a top nave, but i need to the top nav to pay attention to a differnt sent of stylesheets than the left nav. The leftnav point to dropmenudiv, I see three references in your code where you refer to dropmenudiv...

    dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv


    and then at the beginning

    if (ie4||ns6)
    document.write('<div id="dropmenudiv" style="visibility:hidden;width: 160px" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')


    I created a style sheet for the top menu items called topmenudiv - is there a way we can check to see if istop is present and then instatiate dropmenuobj with topmenudiv instead of dropmenudiv for the top menus? If we can, what can we do about the document.write line?

    Or maybe it just isn't possible to use two separate style sheets when you use both top and side menus.

    Thanks for all your help.

  7. #7
    Join Date
    Aug 2004
    Posts
    9,894
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    Well, one easy way to do this is to assign the drop down DIV a difference CSS class name, depending on whether it's a top drop down menu, or side. The CSS class would add to the existing "base" CSS of the drop down DIV. So for your CSS, you may try adding the rules:

    Code:
    .topmenudiv{
    background-color: lightblue !important;
    }
    
    .sidemenudiv{
    background-color: silver !important;
    }
    Then to get the script to apply either the first or second class above to the drop down div depending its orientation, inside function dropdownmenu(), add to the existing line below the addition in red:

    Code:
    dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
    dropmenuobj.className=istop? "topmenudiv" : "sidemenudiv"

  8. #8
    Join Date
    Jul 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Does this address the document.write line at the top of the code? Or do we just throw that out?

  9. #9
    Join Date
    Aug 2004
    Posts
    9,894
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    The document.write() portion is unrelated to changing CSS class names, and is required regardless, as it generates the HTML for the drop down menu.

  10. #10
    Join Date
    Jul 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default yet another wrinkle...

    Okay, now that we know we have a top menu vs. a side menu, now we need to know whether it is top menu number 1 (which has it's own style) vs. menu number 2 (IT'S own style sheet) and menu number 3 which - you guessed it - has it's own unique style sheet. So how can we use the istop thing to tell whether it is top menu 1, 2 or 3 and associate the appropriate style sheet?

Tags for this Thread

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
  •