0

そのため、親アイテムがアイテムと一緒にスライドダウンするスライドダウンメニューを作成しようとしています。私がそれを行うために考えた唯一の方法は、メインメニュー項目を下部に、サブ項目を上部に配置することです。これは好ましくありませんが、機能するようです。

今のところ問題は、メニューの間違った部分にマウスを合わせると、メニューがジャンプしたりスムーズにならないように見えることです。メインメニュー項目を一番上に置いて、それがそれほどジャンプしないようにする方法はありますか？

jsFiddle は こちら

HTMLは次のとおりです。

<ul>
    <ul>
        <li> Menu 1 </li>
        <li> Menu 2 </li>
    </ul>
        <li> Main Menu Item </li>
</ul>
<ul>
    <ul>
        <li> Menu 1 </li>
        <li> Menu 2 </li>
    </ul>
        <li> Main Menu Item 2 </li>
</ul>

そしてCSS：

ul ul li {
    display: none;
}

ul {
    display:inline;
    float:left;
    width:150px;
}

最後に、jQuery

$("ul").hover(

function() {
    $(this).find('ul li').stop(true, true).slideDown();
}, function() {
    $(this).find('ul li').stop(true, true).slideUp();
}

);

編集

したがって、問題の1つが無効なマークアップであるように見えます。Javascriptを使用して、最初のliタグをセクションの下部に移動することをお勧めします。最初のliのクリックのみで機能する例があります。そのフィドルはここにあります。理想的には、クリックせずに有効なマークアップで機能させたいと思います。

これが更新されたJSです

    $("ul li:first").click(function() {

  $(this).parent().append($(this));

});

$("ul").hoverIntent(
function() {
    $(this).find('ul li').stop(true, true).slideDown();
}, function() {
     $(this).find('ul li').stop(true, true).slideUp();
}

);​
4

2 に答える 2

1

このソリューションを試してください

HTML

<nav id="verticalmenu">          
<ul>
  <li> 
      <ul class="down">
        <li><a href="#">Menu#1-1</a></li>
        <li><a href="#">Menu#1-2</a></li>
        <li><a href="#">Menu#1-3</a></li>
      </ul>
      <a class="slide" href="#">Menu#1</a>
  </li>
    <li>
       <ul class="down">
        <li><a href="#">Menu#2-1</a></li>
        <li><a href="#">Menu#2-2</a></li>
        <li><a href="#">Menu#2-3</a></li>
      </ul>
        <a class="slide" href="#">Menu#2</a>
    </li>
</ul>

JS

  var nav = $("#verticalmenu");
    //add hovers to submenu parents
    nav.find("li").each(function() {
        var li_ul = $(this).find("ul");
            li_ul.hide();
            //show subnav on hover
            $(this).mouseenter(function() {
                li_ul.stop(true, true).slideDown();
            });
    });


    nav.find("li").each(function() {
        var li_ul = $(this).find("ul");
            li_ul.hide();
            //show subnav on hover
            $(this).mouseleave(function() {
                li_ul.stop(true, true).slideUp();
            });
    });

</ p>

于 2012-09-26T17:56:24.260 に答える
0

勝者はこのJavaScriptのようです

$("ul li:first-child").not("ul li li").hover(function() {

  $(this).parent().append($(this));

});   

$("ul").hoverIntent(
function() {
    $(this).find('ul li').stop(true, true).slideDown();
}, function() {
     $(this).find('ul li').stop(true, true).slideUp();
}

);
于 2012-10-08T07:00:33.803 に答える