0

ユーザーがボタンに触れるとすぐにモバイルメニューが開くようにします。両方のボタンで ontouchstart="" を使用して、offcanvas メニューが表示されているときにコンテンツにオーバーレイを作成しました。これは、ユーザーがいずれかのボタンに触れるとすぐに機能します。href="javascript:void(0) に対してもまったく同じように機能するようにしたいと思います。これにより、メニューが開きます。ウェブサイトは次のとおりです: https://londontradition.com、メニュー ボタンをタッチするとすぐに確認できます。 、オーバーレイが表示されますが、指を離すまでメニュー遷移は開始されません。

これが機能する場所の例は次のとおりです: https://www.ssense.com/

メニューの閉じるボタンの html は次のとおりです。

<a href="javascript:void(0);" class="mobile-button visible-sm visible-xs" id="close-btn" ontouchstart="document.getElementById('content').style.cssText = 'opacity:1;';">Menu</a>

そして、ここに私のメニューを開くボタンのhtmlがあります:

<div class="col-sm-3 col-xs-3"><a href="javascript:void(0);" class="mobile-button" id="menu-toggle" ontouchstart="document.getElementById('content').style.cssText = 'opacity:0.1;';">Menu</a></div>
4

2 に答える 2

0

答えを探している人のために、自分で解決策を見つけました。

私がしたことは、これをメニューを開くボタンに追加することでした:

ontouchstart="document.getElementById('sidebar').style.cssText = 'transform: translateX(0px) !important;';document.getElementById('wrapper').style.cssText = 'transform: translateX(225px) !important;';document.getElementById('top-bar').style.cssText = 'transform: translateX(225px) !important;';document.getElementById('content').style.cssText = 'opacity:0.2;';"

これを私のメニューの閉じるボタンに：

ontouchstart="document.getElementById('sidebar').style.cssText = 'transform: translateX(-225px) !important;';document.getElementById('wrapper').style.cssText = 'transform: translateX(0px) !important;';document.getElementById('top-bar').style.cssText = 'transform: translateX(0px) !important;';document.getElementById('content').style.cssText = 'opacity:1;';"

ユーザーが指でボタンに触れるとすぐに、指を離す前に、メニューが表示され始めます。

于 2016-04-02T14:05:56.630 に答える