web-dev-qa-db-ja.com

CSS（jquery）のモバイル（タッチ）デバイス向けのドロップダウンメニュー

私はこのテーマに関する多くのトピックを読んでいます。これは、モバイルデバイスで使いやすいドロップダウンメニューです。多くの場合、ドロップダウンメニューにホバー以外のアクションを配置するのが最適と考えられています。回避策があります。1つは、ドロップダウンアイテムのメインハイパーリンクがハッシュタグにリンクすることです。

これにより、モバイルデバイスで動作しますが、通常のデスクトップユーザーの場合、混乱を招きます。したがって、解決策は、最初のハイパーリンクもページにリンクしているデスクトップユーザー向けの通常のドロップダウンメニューを持つことです。モバイルユーザーの場合、アイテムをタップするとドロップダウンメニューが開きますが、メインアイテムをもう一度タップすると対応するページが開きます。

私は次のサイトを見て、どういうわけかそれらのメニューはそれとまったく同じように機能します： http://www.hgtv.com/ これをタブレットで表示し、メインメニューをクリックして、もう一度そのアイテムをタップできます。そして、あなたは私が何を意味するかを知るでしょう。

しかし、どうすれば自分のサイトとまったく同じ設定を見つけたりダウンロードしたりできますか？

前もって感謝します

jquerycssipadmobiledrop-down-menu
14
John

モバイルブラウザーとデスクトップブラウザーの両方でその機能を利用するには、複数のイベントを処理する必要があります。

その例のメニューを見ると、ホバーして展開するのに対し、モバイルではクリック/タッチで展開したいです。

これを達成しようとする1つの方法は、デスクトップには「ホバー」リスナーを用意し、モバイルには「タッチ」イベントリスナーを使用することです。

これを行うには、 'touch'などのカスタムイベントをjQueryに追加する必要があります。これを行う方法については、以下の投稿を参照してください。

iPad用SafariでjQueryを使用してタッチイベントを認識する方法？可能ですか？

2
PJH

これが私が働いたことです：

function isTouchDevice(){
    return typeof window.ontouchstart !== 'undefined';
}

jQuery(document).ready(function(){
    /* If mobile browser, prevent click on parent nav item from redirecting to URL */
    if(isTouchDevice()) {
        // 1st click, add "clicked" class, preventing the location change. 2nd click will go through.
        jQuery("#menu-main-menu > li > a").click(function(event) {
            // Perform a reset - Remove the "clicked" class on all other menu items
            jQuery("#menu-main-menu > li > a").not(this).removeClass("clicked");
            jQuery(this).toggleClass("clicked");
            if (jQuery(this).hasClass("clicked")) {
                event.preventDefault();
            }
        });
    }
});

WordPressサイトにこれを使用しています。デスクトップブラウザ（非タッチブラウザ）では、メインメニュー項目をクリックすると、リンクの場所に直接移動します。ホバーすると、ドロップダウンが表示されます。

モバイル（タッチブラウザー）の場合、メインメニュー項目をタッチするとドロップダウンが展開され、もう一度クリックすると新しい場所に移動します。また、この部分を機能させるために「リセット」コード行を追加しました。最初のメインメニュー項目（ドロップダウンを展開）をタッチし、2番目のメインメニュー項目（2番目のドロップダウンを展開）をタッチして、最初のメインメニューをタッチした場合アイテムをもう一度クリックすると、再びクリックされるまで、ドロップダウンとして動作します。この線がなければ、新しい場所にまっすぐ進みます。

18
Jeremy

これは、デバイスにとらわれない手法です（機能の検出がどれだけ信頼できるかわかりません。多くの最新のブラウザーは、インターフェイスがマウスであってもタッチイベントのサポートを報告します）タッチスクリーンでホバーメニューを期待どおりに機能させる（つまり、最初のクリックでホバーをトリガーしたいときに、トップメニューリンクが時期尚早に「クリック」されたことによるタッチイベント）。

秘訣は、タッチホバー+クリックイベントが互いに重なり合って発生することを認識することです。つまり、ホバーイベントの直後にクリックイベントが続きます。これを検出してクリックの通過を防ぐことができます。ホバーイベントから一定のしきい値が経過した場合にのみクリックをトリガーできます。

デスクトップでテストしたところ、クリックした速度に関係なく、ホバーとクリックの間の経過時間を約150msよりも速くすることはできませんでした。 iPad（第4世代）でテストした場合、ホバーとクリックの間の経過時間は常に約7〜8ミリ秒でした。そこで、クリックを許可するために50msのしきい値時間を選択しました。私が書いたjQuery関数は次のとおりです（これは、標準のネストされたリストのCSSホバーメニューを想定しています）。

  function initNav(){
    // make drop-downs work properly with touchscreens by preventing instant hover-click
    $( some_selector_for_your_top_level_list_items ).each(function(){
      var li = $(this);
      li.mouseover(function(){
        // store time of hover event
        li.data( 'hoverTime', new Date().getTime() );
      });
      li.children('a').click(function(){
        // only allow click if at least 50ms has elapsed since hover
        return ( new Date().getTime() - li.data('hoverTime') ) > 50;
      });
    });
  }

これまでのところ魅力のように働いています。遅いデバイスでは50msが低すぎる可能性があります。

非JSの場合、フォールバックとしてデフォルトのCSSホバー動作がまだあります。

疑わしい機能の検出やJSを使用したCSSホバー動作の書き換えを含まない優れたドロップインソリューションを見つけることができなかったため、これが人々の役に立てば幸いです。

4
Brian

これを試してください： http://suanaikyeo.com/blog/make_dropdown/

すでに試してみましたが、ホバーイベントとクリックイベントの両方で機能しています。

0
zar