SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Delay on Mega Menu

    Hi there - I was wondering what the best way would be to add a delay on my drop down menu. Currently my drop-down is completely CSS. Here is a link to my layout:

    http://www.ladyluxeinvitations.com/burl/index.html

    I want to ensure that the menu doesn't disappear when the user moves the mouse diagonally from the menu item to one of the subitems. For example, if they are hovering over Enjoying Burlington and want to go to Fast Facts...currently they need to move the mouse down in to the panel and the move to the right...as opposed to moving straight to Fast Facts on a diagonal line.

    I know there is the hoverIntent script but I have no idea how to implement it in to my menu.

    Any guidance would be greatly appreciated!

  2. #2
    SitePoint Enthusiast David.A's Avatar
    Join Date
    May 2010
    Location
    Milky Way Galaxy
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, you're going to have to make your drop down work off Javascript as well for the delay. Here is an example:

    HTML Code:
    <ul>
    <li onmouseover="DD(this)" onmouseout="DD_out(this)"><a href="#">TEXT</a>
    <ul style="display:none">
      <li><a href="#">TEXT</a></li>
    </ul>
    </li>
    </ul>
    Javascript:
    Code:
    <script type="text/javascript">
    function DD(li){
    setTimeout('',1000);
    li.getElementsByTagName('ul')[0].style.display="block";
    }
    function DD_out(li){
    li.getElementsByTagName('ul')[0].style.display="none";
    }
    </script>
    The JS shouldn't need modified, the HTML of couse will. Just make sure you keep the onmouseover and onmouseout attributes the same placing them where necessary.

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Seems to be working OK to me...apart from a few javascript warnings

  4. #4
    SitePoint Enthusiast David.A's Avatar
    Join Date
    May 2010
    Location
    Milky Way Galaxy
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    SlickAU, do you read the questions, or just the titles? The guy asked for how to do a delay, not if is menu was working or not.

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by David.A View Post
    SlickAU, do you read the questions, or just the titles? The guy asked for how to do a delay, not if is menu was working or not.
    I wouldn't bother replying if i just read the title...

    As lk19 stated:

    For example, if they are hovering over Enjoying Burlington and want to go to Fast Facts...currently they need to move the mouse down in to the panel and the move to the right...as opposed to moving straight to Fast Facts on a diagonal line.
    ..which sounds like the upon loosing focus to the first sub navigation element the menu was closing altogether!

  6. #6
    SitePoint Enthusiast David.A's Avatar
    Join Date
    May 2010
    Location
    Milky Way Galaxy
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, what is happening is that when you cross over on a diagonal line, it hits the next button messing it up.

    Although it did just occur to me that I put the delay on the wrong function. It should be on the DD_out function.


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
  •