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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

解決済

1回答

3170閲覧

HTML Materializeのドロップダウンメニューが出ない

nuko3

総合スコア31

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2019/01/10 00:26

MaterializeのドキュメントのNavbar Dropdown Menuを参考に、ドロップダウンメニューを作りたいのですが、書かれている通り(多分)に作っても、Dropdownをクリックしたときにメニューが表示されないです。
何が足りない、どこが悪いなど教えていただけますでしょうか?
よろしくお願いいたします。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Materialize_sample</title> 6 <!-- Compiled and minified CSS --> 7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> 8 <!-- Compiled and minified JavaScript --> 9 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> 10 <!--Import Google Icon Font--> 11 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 12</head> 13<body> 14 <!-- Dropdown Structure --> 15 <ul id="dropdown1" class="dropdown-content"> 16 <li><a href="#!">one</a></li> 17 <li><a href="#!">two</a></li> 18 <li class="divider"></li> 19 <li><a href="#!">three</a></li> 20 </ul> 21 <nav> 22 <div class="nav-wrapper"> 23 <a href="#!" class="brand-logo">Logo</a> 24 <ul class="right hide-on-med-and-down"> 25 <li><a href="sass.html">Sass</a></li> 26 <li><a href="badges.html">Components</a></li> 27 <!-- Dropdown Trigger --> 28 <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li> 29 </ul> 30 </div> 31 </nav> 32 <script> 33 $(document).ready(function () { 34 $(".dropdown-trigger").dropdown(); 35 }); 36 </script> 37</body> 38</html>

###環境
ブラウザ:Google Chrome

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

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

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

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

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

guest

回答1

0

ベストアンサー

エラー出てますね。
Uncaught ReferenceError: $ is not defined
Materialize本体のjs読み込みの前にjQuery本体の読み込みを入れてください。

そもそもですが、
$(document).ready(function () {のような記述や
$(".dropdown-trigger")のような記述がjQueryの記法です。

提示のリンクの「Initialization」の項を見ていただくと
純JavaScriptの記述とOr with jQueryとした記述があります。
Or with jQueryの方をとるのであればjQuery本体が必要と言うことになります。

投稿2019/01/10 00:33

編集2019/01/10 00:35
m.ts10806

総合スコア80765

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

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

nuko3

2019/01/10 00:52

ありがとうございます。jQueryの読み込む記述を書き込むと無事にできました。 jQuery自体よくわかってなく、下の方までよく読んでいないのがモロバレで恥ずかしい限りです...すみません。。
m.ts10806

2019/01/10 00:53

解決されたようで何よりです。 英語ドキュメントなので敬遠してしまいたくなる気持ちは良く分かります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問