質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

938閲覧

Javascriptを利用したメニューのサンプルコードについて、jsファイルが読み込まれない

cht

総合スコア10

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/04/25 11:13

初心者でJavascript勉強中です。
サンプルコードを実行したところ、HTMLとCSSは機能していますが、スニペットから外部ファイルのjsファイルが機能していません。Google chromeのF12で確認しましたが、エラーは出ていません。いろいろ試してみたのですが、何が問題なのかわかりません。
どなたかご教示頂ければ幸いです。
コードは殆ど書き写しているだけです。

サンプルコードの引用先は下記の
[https://digipress.info/tech/3d-rotating-hidden-menu-sample/ で一番下アンダーバーがホバー中のメニューにスライドしてついてくるサンプルです。

HTML---
コード

<!doctype html> <html> <head> <meta charset="utf-8"> <title>MENU</title> <script type="text/javascript" src="menu.js"></script> <link href="menu.css" rel="stylesheet" type="text/css"></head> <body> <input type="checkbox" role="button" title="menu" id="humberger_check" /> <label for="humberger_check" class="humberger" aria-hidden="true" title="menu"> <span></span> </label> <header class="header_bar"> <h1>SITE TITLE</h1> </header> <main class="container"> <section class="content"> <h2>3D Rotating Hidden Menu</h2> </section> </main> <nav class="hidden_menu"> <ul> <li data-bar-color="#FA3687"> <a href="#"><i class="icon-picture"></i>IMAGE</a> </li> <li data-bar-color="#21D7A8"> <a href="#"><i class="icon-film"></i>VIDEO</a> </li> <li data-bar-color="#1E9ED4"> <a href="#"><i class="icon-music"></i>MUSIC</a> </li> <li data-bar-color="#B0D44A"> <a href="#"><i class="icon-headphones"></i>PERSONAL</a> </li> <li data-bar-color="#A865D5"> <a href="#"><i class="icon-cogs"></i>SETTINGS</a> </li> </ul> <span class="menu_underline"></span> </nav> </body> </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);

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2020/04/25 11:48

(質問文は編集できます)質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
cht

2020/04/25 12:01

kei344さん すみません。編集してみます。
guest

回答1

0

ベストアンサー

menu.jsの読み込みを</body>の直前に変えてもだめですか?

投稿2020/04/25 11:44

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cht

2020/04/25 11:57

Lishさん有難うございます。 一度試してみます。
cht

2020/04/25 12:21

Lishさん</body>の直前で外部読み込みを試みましたがだめでした。
退会済みユーザー

退会済みユーザー

2020/04/25 12:25

エラーは出ませんでした? Jqueryは読み込んでいますか?
cht

2020/04/25 12:31

Uncaught ReferenceError: $ is not defined at menu.js:4 のえらーがでていました。
退会済みユーザー

退会済みユーザー

2020/04/25 12:34

このサンプルにはJqueryが使われているので、読み込んでください。 <script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js></script> これをサンプルのJSの上辺りに追加してみてください。
cht

2020/04/25 12:38

Lishさん動作いたしました。 有難うございました。 感謝申し上げます。
退会済みユーザー

退会済みユーザー

2020/04/25 12:42

`Uncaught ReferenceError: $ is not defined` このエラーは「$がないよ」と言っています。 $はJqueryの本体で定義されているので、 Jqueryのコードを書いているのにJquery本体が読み込めれてない時に出てきます。 かつ、記述のコードより上で読み込まないと、 定義が前にないので同じ様にエラーがでます。 動いてよかったです^^
cht

2020/04/26 02:17

そういう事だったんですね。 まだまだ勉強不足で、助かりました。 今後ともよろしくお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問