Q&A
（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
初心者でJavascript勉強中です。
サンプルコードを実行したところ、HTMLとCSSは機能していますが、スニペットから外部ファイルのjsファイルが機能していません。Google chromeのF12で確認しましたが、エラーは出ていません。いろいろ試してみたのですが、何が問題なのかわかりません。
どなたかご教示頂ければ幸いです。
コードは殆ど書き写しているだけです。
サンプルコードの引用先は下記の
[https://digipress.info/tech/3d-rotating-hidden-menu-sample/ で一番下アンダーバーがホバー中のメニューにスライドしてついてくるサンプルです。
HTML---
コード
js---
コード
var mqWidth = 680,
scrollTrigger = 40,
isMobile = null,
burgerCheckbox = $('#humberger_check'),
hiddenMenu = $('.hidden_menu li'),
slideBar = $('.menu_underline'),
headerBar = $('.header_bar');
function sliderBarAnimation(){
if ( $(window).width() > mqWidth ){
if (isMobile === false) return;
isMobile = false;
hiddenMenu.off('mouseenter mouseleave').hover(
// nmouseenter
function(){
var current = $(this),
barColor = current.data('bar-color');
slideBar.addClass('visible').css({
'top':'auto',
'left' : current.position().left,
'background-color':barColor
})
},
//mouseleave
function(){
slideBar.removeClass('visible');
}
);
} else {
if (isMobile === true) return;
isMobile = true;
hiddenMenu.off('mouseenter mouseleave').hover(
// nmouseenter
function(){
var current = $(this),
barColor = current.data('bar-color');
slideBar.addClass('visible').css({
'left':0,
'top':current.offset().top + 60,
'background-color':barColor
});
},
//mouseleave
function(){
slideBar.css({'top':0}).removeClass('visible');
}
);
}
}
$(window).on({
'resize' : function(){
sliderBarAnimation();
},
'scroll' : function(){
if ($(window).scrollTop() > scrollTrigger){
headerBar.addClass('show-bg');
} else {
headerBar.removeClass('show-bg');
}
}
});
(function(){
sliderBarAnimation();
hiddenMenu.on('click', function(){
var current = $(this);
current.addClass('selected');
setTimeout(function(){
current.removeClass('selected');
burgerCheckbox.prop('checked',false);
}, 400);
});
hiddenMenu.children('a:not([target]):not([href^="tel:"])').on('click', function(e){
var url = $(this).attr("href");
if (!url) return;
e.preventDefault();
setTimeout(function(){
window.location = url;
},400);
});
})(jQuery);
回答1件
0
ベストアンサー
menu.jsの読み込みを</body>の直前に変えてもだめですか？
投稿2020/04/25 11:44
退会済みユーザー
総合スコア0
Lishさん有難うございます。
一度試してみます。
Lishさん</body>の直前で外部読み込みを試みましたがだめでした。
エラーは出ませんでした？
Jqueryは読み込んでいますか？
Uncaught ReferenceError: $ is not defined
at menu.js:4 のえらーがでていました。
このサンプルにはJqueryが使われているので、読み込んでください。
<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js></script>
これをサンプルのJSの上辺りに追加してみてください。
Lishさん動作いたしました。
有難うございました。
感謝申し上げます。
`Uncaught ReferenceError: $ is not defined`
このエラーは「$がないよ」と言っています。
＄はJqueryの本体で定義されているので、
Jqueryのコードを書いているのにJquery本体が読み込めれてない時に出てきます。
かつ、記述のコードより上で読み込まないと、
定義が前にないので同じ様にエラーがでます。
動いてよかったです^^
そういう事だったんですね。
まだまだ勉強不足で、助かりました。
今後ともよろしくお願いします。
あなたの回答
tips
プレビュー
