1,105,226 Community Members

keeping sub menu open on hover and close sub menu on mouse move down or scr

Member Avatar
sourabhgkr
Newbie Poster
1 post since Mar 2013
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

here is the code for menu.

(document).ready(function(){

$("#main-nav li a.main-link").hover(function(){
$("#main-nav li a.main-link").removeClass("active");                                                 
    $(this).addClass("active");                                      
    $("#sub-link-bar").animate({
        height: "40px"                     
    });
    $(".sub-links").hide();
    $(this).siblings(".sub-links").fadeIn();

});


   $("#main-nav").mouseleave(function(){    

    $("#main-nav li a.main-link").removeClass("active");                                                                                     
    $(".sub-links").fadeOut();
    $("#sub-link-bar").animate({
        height: "10px"                     
    });           
   });
});

HTML code

<div id="sub-link-bar"> </div>

      <div id="wrap">

        <div class="roundfg">
  <ul id="main-nav">
    <li><a class="main-link" href="#">Home</a>
        <ul class="sub-links">
            <li><a class="main-link" href="#">Home</a></li>
        </ul>
    </li>
    <li><a class="main-link" href="#">Tutorials</a>
      <ul class="sub-links">
        <li><a href="#" >Design</a> </li>
        <li><a href="#">HTML &amp; CSS</a> </li>
        <li><a href="#" >Other</a> </li>
        <li><a href="#">PHP</a> </li>
        <li><a href="#">Ruby</a> </li>
        <li><a href="#">Site Builds</a> </li>
        <li><a href="#">Tools &amp; Tips</a> </li>
        <li class="cat-item cat-item-35"><a href="#">Wordpress</a> </li>
      </ul>
    </li>


    <li><a class="main-link" href="#">Videos</a>
        <ul class="sub-links">
        <li><a href="#">Screencasts</a> </li>
        </ul>
    </li>
    <li><a class="main-link" href="#">About</a>
        <ul class="sub-links">

        </ul>
    </li>         
  </ul>
</div>

The sub menu hides when mouse leaves the main menu.

But if mouse is over sub menu,then also sub menu hides.

So I want to add functionality so that sub menu is hidden only if

1) mouse is moved down of main menu

2) if page is scrolled down

Please reply. Thanks.

Member Avatar
PcPro12
Junior Poster
190 posts since Sep 2006
Reputation Points: 3 [?]
Q&As Helped to Solve: 9 [?]
Skill Endorsements: 0 [?]
 
0
 

May I propose a slight modification to your code? You've got the right idea, but it can be done with a little less jQuery code than what you have. I hope this is what you were looking for.

Also, you don't need the "main-link" classes, so feel free to remove those.

HTML

<nav>
  <ul id="main-nav">
    <li><a class="main-link" href="#">Home</a>
        <ul class="sub-links">
            <li><a class="main-link" href="#">Home</a></li>
        </ul>
    </li>
    <li><a class="main-link" href="#">Tutorials</a>
      <ul class="sub-links">
        <li><a href="#" >Design</a> </li>
        <li><a href="#">HTML &amp; CSS</a> </li>
        <li><a href="#" >Other</a> </li>
        <li><a href="#">PHP</a> </li>
        <li><a href="#">Ruby</a> </li>
        <li><a href="#">Site Builds</a> </li>
        <li><a href="#">Tools &amp; Tips</a> </li>
        <li class="cat-item cat-item-35"><a href="#">Wordpress</a> </li>
      </ul>
    </li>
    <li><a class="main-link" href="#">Videos</a>
        <ul class="sub-links">
        <li><a href="#">Screencasts</a> </li>
        </ul>
    </li>
    <li><a class="main-link" href="#">About</a>
        <ul class="sub-links">
        </ul>
    </li>         
  </ul>
</nav>

jQuery

$(document).ready(function(){

    //When the mouse hovers over the 'li' tag, show the subs with a class of 'sub-links'
    $('li').hover(function() {
        $(this).children(".sub-links").stop().show(250);

        //When the mouse is moved away from the link, hide that submenu
    },function() {
        $(this).children(".sub-links").stop().hide(250);
    });
});

CSS

/* This hides the submenu 
This code must be included or your submenu
won't be hidden when the page loads */

.sub-links {
    display: none;
}
You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
View similar articles that have also been tagged: