サポート » 使い方全般 » ハンバーガーメニューが動作しません

  • 解決済 jp03rika19

    (@jp03rika19)


    レスポンシブのデザインで、スマホサイズになるとメニュー表示をハンバーガーメニューに変更する動作を目標としています。
    動作にはのjquery「navi.js」を使用しています。
    ローカルでは問題なく動作していましたので、おそらくWordPressの設定だとは思いますが調べても解決しなかったため、原因の特定と解決法をご存知でしたらご教授頂けないでしょうか。

    以下にローカルでの動作環境と、Wordpressでの環境、試してみたことを記載します。

    ===========ローカルでの動作環境===========

    ・同階層に「header.html」と「navi.js」の設置

    ・header.htmlのhead部分に、以下を記載しjqueryの読込
    <script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script&gt;

    ・同じくhead部分に以下を記載しnavi.jsの読込
    <script src=”navi.js”></script>

    ・navi.jsの記述内容
    **********
    $(function() {
    var $win = $(window),
    $header = $(‘header’),
    animationClass = ‘is-animation’;

    $win.on(‘load scroll’, function() {
    var value = $(this).scrollTop();
    if ( value > 130 ) {
    $header.addClass(animationClass);
    } else {
    $header.removeClass(animationClass);
    }
    });
    });

    (function($) {
    $(function() {
    var $header = $(‘header’);

    // Nav Toggle Button
    $(‘#nav-toggle’).click(function(){
    $header.toggleClass(‘open’);
    });
    });
    })(jQuery);

    **********

    ローカルでは上記内容で問題なく動作確認

    ===========Wordpressでの動作環境===========

    ・「header.php」と同階層に「js」というフォルダを作成しその中に「navi.js」を格納

    ・header.phpのhead部分に、以下を記載しnavi.jsの読込
    <script src=”<?php echo get_template_directory_uri(); ?>/js/navi.js” type=”text/javaScript”></script>

    ・Wordpressでははじめからjqueryが入っているとの情報があったため、その呼び出し
    <?php wp_enqueue_script(‘jquery’); ?>を、<?php wp_head(); ?>の直前に記載

    ・navi.jsの記述内容はローカルと同様

    ★試したこと

    ・Wordpressではjqueryの読込の際に「$」だと上手く動作しないとの情報があったため、
    navi.js内の「$」部分を全て「jquery」に置きかえ

    ・Wordpressの初期のjqueryが上手く動作していないかと思ったため、外部のjqueryを読み込むための記述
    <?php wp_deregister_script(‘jquery’);
    wp_enqueue_script( ‘jquery’,’//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js’, array(), NULL, true );?>
    を、<?php wp_enqueue_script(‘jquery’); ?>の代わりに設置

    以上を試したものの、ハンバーガーメニュー自体はCSSにより表示されるもののクリックをしても動作が何もおこりませんでした。
    宜しくお願い致します。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • こんにちは

    jQuery や navi.js が混在コンテンツでブロックされてたりしませんか?
    URL のスキーム(http:, https:)を確認してみてください。

    こんにちは。
    ご回答頂きありがとうございます。

    混在コンテンツですがおそらくそちらはないかと思います。
    現在検証用のサーバーを用いており、そちらはそもそもSSL可はしていないです。
    そのため混在によるブロックはないとは思うのですが、認識が異なっていたら申し訳ありません。

    jQuery のスキームが https になっていませんか?

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    または、複数の jQuery を組み込んでいたりしませんか?
    HTML のソースを確認してみてください。

    • この返信は1ヶ月、 2週前にishitakaが編集しました。

    ありがとうございます。
    こちらのhttps部分を、httpに直したのですが、まだハンバーガーの反応はされませんでした。
    また、現在jQueryはWordPressに初期からあるものを呼び出す
    <?php wp_enqueue_script('jquery'); ?>
    の物のみを使用しており、それ以外のjQueryは現在使用しておりません。
    よろしくお願いします。

    動作を確認できるサイトの URL をお知らせいただくと解決が早いかもです。

    お返事が遅くなり申し訳ありません。
    ご返信いただいたなかで恐縮ですが、解決できました。
    コメントありがとうございました。

    どのようにして解決したかを教えてください。他の人の参考になるかもしれません。
    https://ja.wordpress.org/support/topic/ktai-style%E3%80%80外部のリンク画像を表示したい/#post-126909

    jqaryの読込パスを絶対パスにしたところ解決しました。
    最初に設定したパスは異なっていたようです。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • このトピックに返信するにはログインが必要です。