サポート » テーマ » 【Sydney】モバイルで表示されるトップメニューの修正

  • 解決済 sodic

    (@sodic)


    Sydneyのテーマでサイトを作成しております。
    全てカスタムメニューでトップメニューを作成しました。

    トップメニュー
    親 【システム】 ⇒ URLなし

            ↓PC:マウスホバー or モバイル:Vマークを押下

    子 (システム説明1) (システム説明2) ⇒ URLあり
    となっています。
    トップメニューの親メニュー【システム】はURLを指定していない為
    ※させたくないです。
    PCの場合マウスホバーで子メニューが表示されるので問題ないのですが
    モバイルの場合だと 親メニューの『V マークを押下』しないと
    子メニューが表示されません。
    これだとユーザーに分かりづらいので、『V マークを押下』ではなく
    親メニューを押せば、子メニューが表示される仕様に変更したいのですが
    何かいい方法はございませんでしょうか?
    よろしくお願いいたします。

    • このトピックはsodicが5年、 12ヶ月前に変更しました。
    • このトピックはsodicが5年、 12ヶ月前に変更しました。
8件の返信を表示中 - 1 - 8件目 (全8件中)
  • こんにちは

    カスタムメニューかどうかに関わらず親メニューであれば常にリンクが無効化されるという条件になりますが、下記のコードではどうでしょうか。

    functions.php 等に、

    function my_enqueue_scripts() {
    	$script = <<<SCRIPT
    jQuery(function($) {
      $(document).on('click', '#mainnav-mobi li a', function(e) {
        var submenu = $(this).next();
        if (submenu.is('.btn-submenu')) {
          submenu.toggleClass('active').next('ul').slideToggle(300);
          e.preventDefault();
        }
      });
    });
    SCRIPT;
    
    	wp_add_inline_script( 'sydney-main', $script, 'after' );
    }
    
    add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
    トピック投稿者 sodic

    (@sodic)

    ishitaka 様

    教えて頂いたコードをfunction.phpに追加したところ
    親メニュータップでリストが表示されたのですが、すぐに戻ってしまいます。
    本当は私の方で修正できたらいいのですが・・・お願いばかりで大変恐縮ですが
    是非、アドバイス頂きたいです。
    よろしくお願い致します。

    親メニュータップでリストが表示されたのですが、すぐに戻ってしまいます。

    何故そうなるかちょっと分かりません???
    Chrome および Firefox ブラウザでは再現しませんでした。
    ブラウザはなにをお使いですか?プラグインかな・・・

    トピック投稿者 sodic

    (@sodic)

    ishitaka 様

    早速のご返信ありがとうございます。

    追記となってしまいますが
    『親メニュータップでリストが表示されたのですが、すぐに戻ってしまいます』
    こちらが再現できているブラウザはアンドロイドのギャラクシーS8標準のもの?です。
    クロムではタップしても反応しません。

    https://sodic.jp

    ご教授の程、よろしくお願い申し上げます。

    JavaScript のコード(下記)が重複しています。

    jQuery(function($) {
      $(document).on('click', '#mainnav-mobi li a', function(e) {
        var submenu = $(this).next();
        if (submenu.is('.btn-submenu')) {
          submenu.toggleClass('active').next('ul').slideToggle(300);
          e.preventDefault();
        }
      });
    });

    もう一度、functions.php に追加したコードを確認してみてください。

    トピック投稿者 sodic

    (@sodic)

    ishitaka 様

    度々のご返信ありがとうございます。
    『親メニュータップでリストが表示されたのですが、すぐに戻ってしまいます』
    こちらに関しましては、キャッシュの問題で再現されていないだけでした。
    申し訳ございません。
    JavaScriptのコードの重複に関して、my_enqueue_scripts()が2回呼び出されているので
    開く⇒閉じるといった挙動になってしまうという事でしょうか。
    正直、Sydney内でどこの部分でメニューの開閉をしているのかすら理解しておりません。
    何度も質問してすみません。

    JavaScriptのコードの重複に関して、my_enqueue_scripts()が2回呼び出されているので
    開く⇒閉じるといった挙動になってしまうという事でしょうか。

    はい、私が確認したときは、2重にコードが記述してありました。
    wp_add_inline_script を2箇所に記述したりしませんでしたか?

    あと、ページのコードにいくつか文法エラー(</head> の位置等)があるのが気になります。この辺の影響もあるのかもしれません。
    下記のページ等でチェックしてみてください。
    https://validator.w3.org/

    それから、キャッシュ系のプラグインをお使いでしたら、キャッシュの削除および一旦停止等もしてみてください。

    トピック投稿者 sodic

    (@sodic)

    ishitaka 様

    ありがとうございます!解決致しました!!

    wp_add_inline_script()の重複をまず確認し
    文法エラー(</head> の位置等)に関しては
    ヘッダーの終了間際にwp_head()が呼び出されており
    こちらを削除するとしっかり動いてくれました!!
    https://validator.w3.org/
    エラーチェッカーの方も、今後とも活用させて頂きます。
    迅速かつ、ご丁寧なアドバイス、誠にありがとうございました。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • トピック「【Sydney】モバイルで表示されるトップメニューの修正」には新たに返信することはできません。