ハンバーガーメニューが動作しません
-
レスポンシブのデザインで、スマホサイズになるとメニュー表示をハンバーガーメニューに変更する動作を目標としています。
動作にはの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>・同じく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により表示されるもののクリックをしても動作が何もおこりませんでした。
宜しくお願い致します。
- トピック「ハンバーガーメニューが動作しません」には新たに返信することはできません。