0

私はこれで正しい軌道に乗っていると思いますが、マウスがサブリンクメニュー項目を離れ、サブリンクからサブリンクへの場合は閉じないsubLinkでマウスがサブリンクメニュー項目を離れたときにバーを閉じる必要がありますsubLink(それが理にかなっていることを願っています)。

たとえば、ホームまたは連絡先はバーを開かずsubLink、マウスがサブリンクのホバー状態からホバーするとバーを閉じます（私の例の場合）。

現在、mouseleave が全体的に行われていることは理解してい#main-navますが、どうすればいいのか困っています。おそらく本当に簡単ですが、どこかから始めなければなりませんか? このメニューはtutplusから入手したもので、独自のメニューを再作成しようとしていることをみんなに知らせるために、ありがとう。

以下の私の現在のコードを見てください：

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: jQuery 1.3.2 ライブラリを使用。

$(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 &amp; 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 &amp; 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>
4

1 に答える 1

1

更新しました：

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');
    });
});

また、 CSSに追加さtop:49pxれます。.sub-links

于 2013-03-05T16:21:29.363 に答える