Drop Line Jquery Menu

Question

Think I am on the right track with this but need the subLink's bar to close when the mouseleaves a sublink menu item and hovers over a non subLink but to not close if its sublink to sublink (hope that makes sense).

i.e. Home or Contact for example would not open the subLink bar and would close it if mouse hovered from a sublink hover state (for my example).

I understand that at present the mouseleave is on the entire #main-nav but I am stuck for how to go about this, probably really simple but hey got to start somewhere right? Just to let everyone know I sourced this menu from tutplus and am trying to recreate my own, thanks.

Please see my current code below:

CSS:

html, body {
    background: #2d2620;
    text-align: center;
    margin: 0px;
    height: 100%;
    width: 100%;
}
#wrap {
    margin-left: auto;
    margin-right: auto;
    width: 900px;
    position: relative;
    background: url(body.png) center no-repeat;
    min-height: 600px;
}
#body-image {
    margin-top: 60px;
}
#main-nav {
    margin: 0px 0px 0px 2px;
    text-align: left;
    min-height: 25px;
    padding-top: 10px;
    padding-left: 0px;
}
#main-handle {
    width: 605px;
    float: right;
    margin-top: -1px;
}
#main-nav li {
    display: inline;
    list-style: none;
}
#main-nav li a {
    margin-right: 5px;
    font-size: 15px;
    text-decoration: none;
    color: #f2f2f2;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px;
    outline: 0;
    position: relative;
    top: -2px;
}
#main-nav li a:hover, #main-nav li a.active {
    background: #514539;
}
#sub-link-bar {
    background: #514539;
    min-height: 1px;
    border-bottom: #645546 1px solid;
}
.sub-links {
    display: none;
    position: absolute;
    width: 100%;
    text-align: left;
    left: 0px;
}
#main-nav li .sub-links li a:hover{
    background: #2d2620;
}
#main-nav li a.close{
    display: none;  
    position: absolute;
}
#main-nav li a.close:hover{
    background: #900;
}
.round {
    display:block
}
.round * {
    display:block;
    height:1px;
    overflow:hidden;
    font-size:.01em;
    background:#645546
}
.round1 {
    margin-left:3px;
    margin-right:3px;
    padding-left:1px;
    padding-right:1px;
    border-left:1px solid #443a30;
    border-right:1px solid #443a30;
    background:#56493c
}
.round2 {
    margin-left:1px;
    margin-right:1px;
    padding-right:1px;
    padding-left:1px;
    border-left:1px solid #322a23;
    border-right:1px solid #322a23;
    background:#594c3e
}
.round3 {
    margin-left:1px;
    margin-right:1px;
    border-left:1px solid #594c3e;
    border-right:1px solid #594c3e;
}
.round4 {
    border-left:1px solid #443a30;
    border-right:1px solid #443a30
}
.round5 {
    border-left:1px solid #56493c;
    border-right:1px solid #56493c
}
.roundfg {
    background:#645546
}

JavaScript: using the jQuery 1.3.2 library.

$(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: "1px" 
        });     
    });
});

HTML:


 
   
    Home
    Tutorials
      
        Design 
        HTML & CSS 
        Other 
        PHP 
        Ruby 
        Site Builds 
        Tools & Tips 
        Wordpress 
      
    
    Articles
      
        General 
        Interviews 
        News 
        Web Roundups 
      
    
    Freebies
      
        Books 
        Icons 
        Lightboxes 
        Others 
        Plugins 
        Themes 
        Tooltips 
      
    
    Videos
        
            Screencasts
        
    
    Contact

Belladonna · Accepted Answer

Updated:

JSFiddle.

Here's the new JS:

$(document).ready(function(){
    $('#main-nav > li').hover(function(){
        //Checks if it's already active, if so, does nothing.
        if(!$(this).find('.main-link').hasClass('active')){
            $("#main-nav > li a.active").removeClass("active");
            $(this).find('.main-link').addClass("active");
            //checks if there's a subnav, then opens it
            //otherwise it closes the #sub-link-bar
            if($(this).find('li').length){
                //$("#main-nav li a.close").stop().fadeIn();
                //There is no .close
                var that = this;
                $("#sub-link-bar").stop().animate({ height: "40px"}, function(){
                    $(that).find(".sub-links").fadeIn();
                });
            }
            else {
                 $(this).find(".sub-links").stop().fadeOut( function(){
                    $(this).css('opacity','1');
                    $("#sub-link-bar").stop().animate({height: "1px"});
                 });
            }
        }
    }, function(){
        //Checks if it has a subnav, if so, hides the text first, then the bar
        //if not, just closes the bar
        if($(this).find('li').length){
            $(this).css('opacity','1');
            $("#sub-link-bar").stop().animate({height: "1px"});
        }
        $("#sub-link-bar").stop().animate({height: "1px"});   
       $(this).find('.main-link').removeClass('active');
    });
});

Also added top:49px to your .sub-links CSS.

Drop Line Jquery Menu

Answers (1)

Related Questions