タッチフレンドリーなドロップダウンメニュー

私はタッチフレンドリーなドロップダウンメニューを作ろうとしていますが、方法はわかりません。タッチフレンドリーなドロップダウンメニュー

<div class="mainMenu"> 
    <nav role='navigation'> 
    <ul class="active"> 
     <li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a href="#">Home</a></li> 
     <li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10"><a href="#">Dropdown</a> 
      <ul class="sub-menu"> 
       <li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a href="#">SubMenu</a></li> 
       <li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16"><a href="http://#">SubMenu</a></li> 
       <li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a href="http://#">SubMenu</a></li> 
       <li id="menu-item-109" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-109"><a href="#">SubMenu</a></li> 
      </ul> 
     </li> 
     <li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14"><a href="http://#">Dropdown process</a> 
      <ul class="sub-menu"> 
       <li id="menu-item-110" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-110"><a href="#">SubMenu</a> 
        <ul class="sub-menu"> 
         <li id="menu-item-111" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-111"><a href="#">SubMenu</a></li> 
        </ul> 
       </li> 
       <li id="menu-item-114" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-114"><a href="#">SubMenu</a></li> 
      </ul> 
     </li> 
     <li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13"><a href="http://#">Menu</a></li> 
    </ul> 
    </nav> 
</div>

デモ：https://fiddle.jshell.net/cb8ev58m/

これはWordPressのメニューです。ここは、私がこれまで持っているものです。ユーザーがドロップダウンリンクをクリックしたときに、そのページにリダイレクトされずにドロップダウンが開かれるようにするにはどうすればよいですか。リンク先を再度クリックすると、リダイレクトされます。

出典

2017-01-16 lyraX

私はJavascript/jQueryでこれを行うとしますか？もしそうなら、私は開いているメニューのクラスを変更するためにjavascriptを使い、event.preventDefault（）を使用して閉じたメニュークラスをターゲットにします。 – mikey242

私はjavascriptであまり良くありません。私はそれがchidlernsを持っている場合、リンクが開くのを防ぎたい。この場合、最初のクリックでドロップダウンリンクを開くのを防ぎたいと思っています。私はtouchstartについて読んだことがありますが、正確にどのように動作するかはわかりません。 – lyraX

最初のクリックオープン、セカンドリダイレクト。隠すサブメニューはどうですか？

var clicked = {}; 
 
$('.menu-item-has-children > a').on('click', function(e){ 
 
    var $li = $(this).closest('li'); 
 
    $li.siblings().each(function(){ 
 
    $(this).find('.sub-menu').slideUp(); 
 
    $(this).find('.menu-item-has-children').each(function(){ 
 
     var id = $(this).attr('data-id'); 
 
     if(id in clicked) delete clicked[id]; 
 
    }) 
 
}); 
 
    if(!($li.attr('data-id') in clicked)){ 
 
    e.preventDefault(); 
 
    clicked[$li.attr('data-id')] = true; 
 
    } 
 
    $li.find('.sub-menu').slideDown(); 
 
})

.mainMenu { 
 
     position: fixed; 
 
     z-index: 3; 
 
     width: 100%; 
 
     top: 0; 
 
     left: 0; 
 
    } 
 
    .mainMenu nav ul { 
 
     position:absolute; 
 
     top: 0px; 
 
     margin: 0px; 
 
     left:0px; 
 
     width: 100%; 
 
     text-align: center; 
 
     background:rgba(0,0,0,.8); 
 
     font-size: 20pt; 
 
     list-style-type: none; 
 
    } 
 
    .mainMenu nav ul li { 
 
     color:white; 
 
     padding: 10px; 
 
     margin-left: 50px; 
 
     margin-right: 50px; 
 
     font-weight: bold; 
 
     -webkit-transition: all ease 0.5s; 
 
     -moz-transition: all ease 0.5s; 
 
     transition: all ease 0.5s; 
 
    } 
 
    .mainMenu nav ul li:hover, 
 
    .mainMenu nav ul li:focus {  
 
     background-color: #FFCA00; 
 
     color: #fff; 
 
     font-weight: bold; 
 
    } 
 
    
 
    .mainMenu nav ul li a { 
 
     color:white; 
 
     font-weight: bold; 
 
     -webkit-transition: all ease 0.5s; 
 
     -moz-transition: all ease 0.5s; 
 
     transition: all ease 0.5s; 
 
    } 
 
    .mainMenu nav ul li a:hover { 
 
     color: #fff; 
 
     font-weight: bold; 
 
    } 
 
    .mainMenu nav ul ul{ 
 
     display: none; 
 
     position: relative; 
 
     margin-top: 10px; 
 
     background:transparent; 
 
     margin-left: 10px; 
 
    } 
 
    .mainMenu nav ul ul li { 
 
     border-radius: 0px; 
 
     float: none; 
 
     position: relative; 
 
     min-width: 135px; 
 
    } 
 
    .mainMenu nav ul ul li a { 
 
      
 
    } 
 
    .mainMenu nav ul ul ul { 
 
     position: relative; 
 
     margin-top: 10px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="mainMenu"> 
 
        <nav role='navigation'> 
 
         <ul> 
 
         <li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a href="#">Home</a></li> 
 
<li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-10"><a href="#">Dropdown</a> 
 
<ul class="sub-menu"> 
 
    <li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a href="#">SubMenu</a></li> 
 
    <li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16"><a href="http://#">SubMenu</a></li> 
 
    <li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a href="http://#">SubMenu</a></li> 
 
    <li id="menu-item-109" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-109"><a href="#">SubMenu</a></li> 
 
</ul> 
 
</li> 
 
<li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14"><a href="http://#">Dropdown process</a> 
 
<ul class="sub-menu"> 
 
    <li id="menu-item-110" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-110"><a href="#">SubMenu</a> 
 
    <ul class="sub-menu"> 
 
    <li id="menu-item-111" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-111"><a href="#">SubMenu</a></li> 
 
    </ul> 
 
</li> 
 
    <li id="menu-item-114" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-114"><a href="#">SubMenu</a></li> 
 
</ul> 
 
</li> 
 
<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13"><a href="http://#">Menu</a></li> 
 
         </ul> 
 
         <a class="toggle-nav" href="#"> </a> 
 
        </nav> 
 
        </div>

出典

2017-01-16 13:16:29

ありがとうございました！これは私が必要とするものです。ドロップダウンメニューを1つだけ表示する方法はありますか？ dropdown01が開き、dropdown02を開いた場合、dropdown01を閉じる必要があります。それは可能ですか？ – lyraX

また、ドロップダウンを切り替えると便利な機能になります。 –

チェック、私は訂正しました –

かわり<a>のHTML <button>を使用して<ul>を隠すためにCSSを使用することができます。

ul.sub-menu { 
    display: none; 
} 

button:focus + ul.sub-menu, ul.sub-menu:hover { 
    display: block; 
}

その後あなたはJSを経由してボタンの動作を修正することができます。（それはなどを集中している場合、モバイルのクリックで開いてリンクを最適化）

編集：

それは以下<ul>に<a>として「ドロップダウン」リンクを集中し、追加している場合にも、<button>を隠すことができます。これは基本バージョンのJSを必要としません。

button:focus { 
    display: none; 
}

出典

2017-01-16 13:18:37 Sophie

タッチフレンドリーなドロップダウンメニュー

答えて

関連する問題