1

私の Web サイトには、正常に動作するドロップダウン ナビゲーション メニューがあります。ただし、モバイル デバイスでは、ユーザーがメニュー項目をタップすると、ほんの一瞬サブメニューが表示され、その後自動的に親リンクにリダイレクトされます。親リンクを最初にタップするとサブメニューが開き、2 回目のタップでユーザーを親リンクにリダイレクトする機能が欲しいです。ここで説明したようなものが欲しいです: http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly

ただし、ダブルタップ機能が欲しいだけです。プラグインを実装しましたが、まだ機能しません :/ 私のドロップダウン メニューは HTML と CSS でコーディングされています。

<ul class = "dropdown">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a>
        <ul class="sub-menu">
           <li><a href="#">Sub Link</a></li>
            <li><a href="#">Sub Link</a></li>
            <li><a href="#">Sub Link</a></li>
        </ul>
    </li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

編集:これが私のCSSです。上記リンクのjQueryプラグインdoubleTapToGo.jsを使ってみたのですが、うまくいきません。

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
 font-size:11px;
 position: relative;
 float: left;
}


ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 width: 100%;
}

ul.dropdown ul li {
 float: left;
 border-bottom:1px solid #000; 
 padding-bottom:0px;
 margin-bottom:0px; 
}


ul.dropdown li:hover > ul {
 visibility: visible;
}
4

0 に答える 0