Drop Line Jquery Menu

想想我正处于正确的轨道上，但需要subLink的酒吧来关闭时，鼠标点击一个子链接菜单项并悬停在一个非subLink但不关闭，如果其子链接子链接（希望说得通）。Drop Line Jquery Menu

即家或联系人例如不会打开subLink栏，并且如果鼠标悬停在子链接悬停状态（对于我的示例）将关闭它。

我明白，目前mouseleave是在整个#main-nav，但我坚持如何去做这件事，可能真的很简单，但嘿开始在某个地方吧？为了让大家知道我从tutplus获得了这个菜单，并且正在尝试重新创建我自己的，谢谢。使用jQuery 1.3.2库：

请参阅下面我当前的代码：

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。

$(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：

</head> <body> <ul id="main-nav"> <li><a class="main-link active" href="">Home</a></li> <li><a class="main-link subLink" href="">Tutorials</a> <ul class="sub-links" style="display: none;"> <li><a href="" title="">Design</a> </li> <li><a href="" title="">HTML & CSS</a> </li> <li><a href="" title="">Other</a> </li> <li><a href="" title="">PHP</a> </li> <li><a href="" title="">Ruby</a> </li> <li><a href="" title="">Site Builds</a> </li> <li><a href="" title="">Tools & Tips</a> </li> <li class="cat-item cat-item-35"><a href="" title="">Wordpress</a> </li> </ul> </li> <li><a class="main-link subLink" href="">Articles</a> <ul class="sub-links" style="display: none;"> <li><a href="" title="">General</a> </li> <li><a href="" title="">Interviews</a> </li> <li><a href="" title="">News</a> </li> <li><a href="" title="">Web Roundups</a> </li> </ul> </li> <li><a class="main-link subLink" href="">Freebies</a> <ul class="sub-links" style="display: none;"> <li><a href="" title="">Books</a> </li> <li><a href="" title="">Icons</a> </li> <li><a href="" title="">Lightboxes</a> </li> <li><a href="" title="">Others</a> </li> <li><a href="" title="">Plugins</a> </li> <li><a href="" title="">Themes</a> </li> <li><a href="" title="">Tooltips</a> </li> </ul> </li> <li><a class="main-link subLink" href="">Videos</a> <ul class="sub-links" style="display: none;"> <li><a href="" title="">Screencasts</a></li> </ul> </li> <li><a class="main-link" href="">Contact</a></li> </ul> </div> <div id="sub-link-bar"></div>

来源

2013-03-05 Pulsemaster

两个问题：1）你*有*使用jQuery 1.3.2，因为这是**非常**旧？ 2）你有CSS吗？ – Dom 2013-03-05 14:46:21

不是所有的，我只是想尽我所能，我完全开放的建议。此外，我之前也曾问过关于是否为这种类型的菜单使用Jquery或CSS的问题。 – Pulsemaster 2013-03-05 15:21:42

“http://jqueryjs.googlecode.com/files/jquery- 1.3.2.min.js”（里面有4个空格）只是一个复制/粘贴错误？ – 2013-03-05 16:05:06

更新时间：

JSFiddle。

这里是新的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'); 
    }); 
});

还增加top:49px您3210 CSS。

来源

2013-03-05 16:21:29

非常感谢，但是当我将鼠标悬停在家中或联系人项目上时，子链接栏仍然具有动画效果，我不希望这些子链接属性具有子链接属性。 – Pulsemaster 2013-03-05 17:05:57

更新了我的代码。 – 2013-03-05 17:43:59

太棒了，太棒了。感谢一群人。就这样你知道我从http://www.vimeo.com得到了这个想法，他们的菜单稍微有点棘手，因为它使用幻灯片，而且没有淡入淡出。可以尝试着淡入淡出，让它工作得更快一点。 – Pulsemaster 2013-03-05 18:01:14

Drop Line Jquery Menu

回答

相关问题