2

現在、スマートフォンやタブレットに対応したウェブサイトを作ろうとしています。サイトのメニューに少し問題があります。メニューは基本的に、次のような順不同のリストです。

<ul class="navigation">
    <li><a href="page1.html">Page1</a></li>
    <li><a href="page2.html">Page2</a></li>
    <li>
        <a href="page3.html">Page3</a>
        <!-- Dropdown menu -->
        <ul class="subnav">
            <li><a href="page4.html">Page4</a></li>
        </ul>
    </li>      
</ul>

内側の順不同リストは、ユーザーがpage3.htmlリンクにカーソルを合わせたときに表示されるドロップダウン メニューです。

モバイルとタブレットでは、メニューをアコーディオンのように動作させたいので、ユーザーがpage3.htmlリンクに触れるsubnavとリストが表示され、他のリスト項目が押し下げられます。ドロップダウンリストを固定位置に設定するだけでデスクトップで動作するようになりましたposition:absolute;ただし、モバイルとタブレットでは、タッチオンはpage3.htmlリンクとして機能するため、もちろん、ユーザーはリスト。page3.htmlsubnav

ユーザーが初めてリンクに触れたときにリンクをトリガーせずにサブナビリストをトリガーする方法はありますか? :-) これに対する CSS のみの解決策を探していますが、JS が必要な場合は、喜んでそれを利用します。

前もって感謝します！

4

1 に答える 1

0

jQuery ( Black Studio Touch Dropdown Menu ) で書かれた Wordpress プラグインがあり、ほとんどのことを実行できます。ここでソース コードを見て、Wordpress から独立するように変更することができます。基本的に、デバイスがタッチ スクリーン デバイスかどうかを確認し、そうであれば、ドロップダウン メニューの親をクリックすると、リンクをクリックするのではなく展開します。次回は、実際にリンクをクリックします。

于 2013-01-29T18:41:47.127 に答える