モバイル対応ページの下部にあるナビゲーションを非表示/表示するスワイプ イベントを作成しようとしています。ユーザーがナビゲーション自体をスワイプしているかのように、スワイプはページの下部にある必要があります。
上に があり<nav>ます<div class=swipearea>。両方ともページの下部に固定されており.swipearea、ナビゲーションの上に z インデックスが付けられています。もちろん、これによりナビゲーション内のリンクをクリックできなくなります。スワイプ可能にしようとしましたが、下にスワイプすると、デスクトップ テスト マシン<nav>の要素がドラッグされるだけです。<nav>イベントを div.swipearea に配置すると、機能は魅力的に機能しますが、クリックできるリンクはありません。
リンクをクリックして、ナビゲーションを上下にスワイプできるようにする必要があります。プルダウンする小さなタブを提案しましたが、クライアントはそれを使用したくありません。彼らはデフォルトでナビゲーションを非表示にしたいと考えており、上にスワイプするとナビゲーションが表示され、下にスワイプすると非表示になります。
もちろん、ナビゲーション リンクも機能する必要があります。
コード例:
<div class="swipearea"></div>
<nav>
<ul>
<li><a href="somewhere.html">Link1</a</li>
<li><a href="another.html">Link2</a></li>
<li><a href="yetanother.html">Link3</a></li>
</ul>
</nav>