0

クリックすると開き、別のメニュー項目がクリックされるまで開いたままになる垂直フライアウト メニューのヘルプを探しています (ホバリングしても消えません)。また、両方がクリックされると、ロールオーバー状態はクリックされるまで表示されません。以下はコードペンのリンクです http://codepen.io/matriplett/pen/JoVdYz

html:

<nav class="nav" >
<ul id="main-menu" class="nav parent">
<li class="parent"><a href="#">Menu 1</a>
<ul class="sub-menu">
    <li class=""><a href="#">sub 1</a></li>
    <li class=""><a href="#">sub 2</a>
  <ul class="sub-sub-menu">
        <li class=""><a href="#">sub sub 1</a></li>
        <li class=""><a href="#">sub sub 2</a></li>
        <li class=""><a href="#">sub sub 3</a></li>
        <li class=""><a href="#">sub sub 4</a></li>
    </ul></li>
    <li class=""><a href="#">sub 3</a></li>
    <li class=""><a href="#">sub 4</a></li>
    <li class=""><a href="#">sub 5</a></li>
</ul>
</li>
<li class="parent"><a href="#">Menu 2</a>
<ul class="sub-menu">
    <li class=""><a href="#">sub 1</a></li>
    <li class=""><a href="#">sub 2</a>
<ul class="sub-sub-menu">
        <li class=""><a href="#">sub sub 1</a></li>
        <li class=""><a href="#">sub sub 2</a></li>
        <li class=""><a href="#">sub sub 3</a></li>
        <li class=""><a href="#">sub sub 4</a></li>
    </ul>
</li>
    <li class=""><a href="#">sub 3</a>
    <ul class="sub-sub-menu">
        <li class=""><a href="#">sub sub 1</a></li>
        <li class=""><a href="#">sub sub 2</a></li>
        <li class=""><a href="#">sub sub 3</a></li>
        <li class=""><a href="#">sub sub 4</a></li>
    </ul>
</li>
</ul>
</li>
<li class=""><a href="#">Menu 3</a></li>
<li class=""><a href="#">Menu 4</a></li>
</ul>
</nav>

scss

.nav {
    border: 0;
    padding:2%;

    ul {    
    }

    li {
        position: relative;
        text-transform: uppercase;
        font-size: 1em;
     list-style:none;


        a {
            border-bottom: 0;
            line-height: 1.2;
      color:#000;
          text-decoration:none;
            &:hover, &:focus {
                color: #56a0d3;
            }
        }

        ul.sub-menu{
            margin-left:40px;
            margin-top:-18px;
            border-top: 0;
            position: absolute;
            visibility: hidden;
            z-index: 8999;
            display:block;
      line-height:2;

            li {

                a {
                    margin-top:0;
                    padding-left: 10px;
                    border-right: 0;
                    display: block;
                    line-height: 1.2;
                    color: #56aod3;

                    &:hover,
                    &:focus {color:red;}

                    &:link {}
                }



            }

        }

        /* showing sub-menus */
        &:hover > ul {
            top: auto;
            visibility:visible;
        }

    } /* end .menu ul li */

    /* highlight current page */
    li.current-menu-item,
    li.current_page_item,
    li.current_page_ancestor {
        a { color:#56a0d3;}
    }  /* end current highlighters */


  sub-sub-menu  ul li a {
    margin-left:300px;
  }
} /* end .nav */



/* keep home page nav open on click*/

$('.sub-menu').hide(); //Hide children by default

$('.parent').children().click(function(){
    $(this).children('.sub-menu').slideToggle('fast');     
}).children('.sub-menu').click(function (event) {
    event.stopPropagation();

});

4

1 に答える 1

0

http://codepen.io/anon/pen/pvBjYv .

// Hide sub menus
$('.sub-menu, .sub-sub-menu').hide();

$('li.parent > a').click(function(){
  $('li.parent .sub-menu').not($(this).parent().children('.sub-menu')).slideUp(); //Slide up any open .sub-menu excluding this parent
  $(this).parent('li.parent').children('.sub-menu').slideToggle(); // slideToggle this .sub-menu
});

$('li.parent li') .click(function(){
  $('.sub-sub-menu').not($(this).children('.sub-sub-menu')).slideUp(); // Slide up any open .sub-sub-menu
  $(this).last('li').children('.sub-sub-menu').slideToggle(); // slodeToggle this .sub-sub-menu
});

$('li.parent a') .click(function(){
  $(this) .addClass('active'); // Apply style on click instead of hover
});

$('li.parent a') .mouseout(function(){
  $(this) .removeClass('active'); // Remove .active when mouse leaves link
});

それは恐ろしく書かれていますが、あなた自身の方法で問題を解決するのに役立つはずです. 時間がないので、かなりの繰り返しと不要なコード (主に a タグと .parent) があるため、コードをリファクタリングする必要があります。

CSS の代わりに jQuery を使用してサブメニューを非表示にし、jQuery を書き直しました。

クリックするとすべてのサブメニューが開き、他のメニューはクリックすると非表示になり、ホバー効果はクリック時にのみ表示され、マウスがリンクを離れると削除されます。

サブサブメニューのリンクもスライドをトリガーすることに注意してください。これは簡単に修正できます。

それが役に立てば幸い。

于 2015-03-31T21:04:57.657 に答える