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

回答

相關問題