SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Enhancing regular menu with JS (with some jQuery) - Please help

    Hi,

    I have made a great menu over here...

    Ok... Not so great yet because (as you can tell), when you rollover one of the links you cannot click on any of the links within the drop-down list because it dissappears. This is expected since on the link's "mouseout" the slideUp function is initiated... I am not sure how to make it act the way drop-down menus are meant to.

    Here is the current script:

    Code JavaScript:
    var links = document.getElementById("nav").getElementsByTagName("A");
    for ( var a=0 ; a<links.length ; a++ ) {
    if(links[a].className == "opensub") {
     
    links[a].onmouseover = function() {
    var thisUL = this.parentNode.getElementsByTagName("UL")[0];
    $(thisUL).slideDown("slow")
    }
     
    links[a].onmouseout = function() {
    var thisUL = this.parentNode.getElementsByTagName("UL")[0];
    $(thisUL).slideUp("normal")
    }
     
    }
    }

    I need some help in making this work...

    Thanks

    Edit:


    Sorry, page was not viewable earlier... It is now.
    Last edited by JimmyP; May 2, 2008 at 15:56.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I think you need to add some minor timeouts to each menu. Look at what happens when you move your mouse from the first item to the last. All the menus in between open up and then close down. Unless this is what you want, you should make each mouseover event call a function that is wrapped in a setTimeout of 100 or 200ms.

    Also, look at what happens if you erratically shake your mouse over them all repeatedly. They open and close many times over about 10 seconds!

    The most enormous mistake you have made is to put block-level elements (UL, LI) in an inline-level element (SPAN).

    In order to make your mouseouts work properly, so that they work only when the mouse leaves the tab or the dropdown menu, you need to check the relatedTarget. Have a look here: http://www.quirksmode.org/js/events_...#relatedtarget

    Golgotha came across a similar problem here: http://www.sitepoint.com/forums/showthread.php?t=544735


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
  •