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

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

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

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

JavaScript

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

HTML

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

CSS

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

Q&A

解決済

1回答

1622閲覧

HTMLにてCSS、JSを用いてドロップダウンメニューを出したい。

hinomar

総合スコア8

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

JavaScript

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/11/05 03:10

編集2020/11/05 05:54

前提・実現したいこと

ドロップダウンメニューを出したいです。

https://photoshopvip.net/97481
内Dropdown Navigation

コードが長く申し訳御座いません。どうぞよろしくお願いいたします。

発生している問題・エラーメッセージ

親となる「Products」などのメニューを押すとドロップダウンメニューが出ずに、遷移してしまいます。

<head>内の以下のコードが原因でしたが、残したいです。(ソースコードでは一旦消しています)

HTML

1<base href="url" />

該当のソースコード

HTML

1<!doctype html> 2<html> 3<head> 4 5<meta http-equiv="Content-Language" content="ja"> 6<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> 7<meta http-equiv="Content-Script-Type" content="text/javascript"> 8 9<title>タイトル</title> 10<script src="js/dropdown.js"></script> 11<link href="css/dropdown.css" rel="stylesheet" type="text/css"> 12</head> 13<body> 14<nav role="navigation" class="nav"> 15 <ul class="nav-items"> 16 <li class="nav-item"> 17 <a href="#" class="nav-link"><span>Home</span></a> 18 </li> 19 <li class="nav-item dropdown"> 20 <a href="#" class="nav-link"><span>Products</span></a> 21 <nav class="submenu"> 22 <ul class="submenu-items"> 23 <li class="submenu-item"><a href="#" class="submenu-link">Product #1</a></li> 24 <li class="submenu-item"><a href="#" class="submenu-link">Product #2</a></li> 25 <li class="submenu-item"><a href="#" class="submenu-link">Product #3</a></li> 26 </ul> 27 </nav> 28 </li> 29 <li class="nav-item"> 30 <a href="#" class="nav-link"><span>Services</span></a> 31 </li> 32 <li class="nav-item"> 33 <a href="#" class="nav-link"><span>Pricing</span></a> 34 </li> 35 <li class="nav-item"> 36 <a href="#" class="nav-link"><span>News</span></a> 37 </li> 38 <li class="nav-item dropdown"> 39 <a href="#" class="nav-link"><span>More</span></a> 40 <nav class="submenu"> 41 <ul class="submenu-items"> 42 <li class="submenu-item"><a href="#" class="submenu-link">About</a></li> 43 <li class="submenu-item"><a href="#" class="submenu-link">Contact</a></li> 44 <li class="submenu-item"><hr class="submenu-seperator" /></li> 45 <li class="submenu-item"><a href="#" class="submenu-link">Support</a></li> 46 <li class="submenu-item"><a href="#" class="submenu-link">FAQs</a></li> 47 <li class="submenu-item"><a href="#" class="submenu-link">Careers</a></li> 48 </ul> 49 </nav> 50 </li> 51 </ul> 52</nav> 53</body> 54</html>

CSS

1/* Page */ 2 3html { 4 box-sizing: border-box; 5} 6 7*, 8*:before, 9*:after { 10 box-sizing: inherit; 11} 12 13body { 14 background-color: #3498db; 15} 16 17.nav { 18 width: 550px; 19 margin: 100px auto 0 auto; 20 text-align: center; 21} 22 23/* Navigation */ 24 25.nav { 26 font-family: Georgia, Arial, sans-serif; 27 font-size: 14px; 28} 29 30.nav-items { 31 padding: 0; 32 list-style: none; 33} 34 35.nav-item { 36 display: inline-block; 37 margin-right: 25px; 38} 39 40.nav-item:last-child { 41 margin-right: 0; 42} 43 44.nav-link, 45.nav-link:link, 46.nav-link:visited, 47.nav-link:active, 48.submenu-link, 49.submenu-link:link, 50.submenu-link:visited, 51.submenu-link:active { 52 display: block; 53 position: relative; 54 font-size: 14px; 55 letter-spacing: 1px; 56 cursor: pointer; 57 text-decoration: none; 58 outline: none; 59} 60 61.nav-link, 62.nav-link:link, 63.nav-link:visited, 64.nav-link:active { 65 color: #fff; 66 font-weight: bold; 67} 68 69.nav-link::before { 70 content: ""; 71 position: absolute; 72 top: 100%; 73 left: 0; 74 width: 100%; 75 height: 3px; 76 background: rgba(0,0,0,0.2); 77 opacity: 0; 78 -webkit-transform: translate(0, 10px); 79 transform: translate(0, 10px); 80 transition: opacity 0.3s ease, transform 0.3s ease; 81} 82 83.nav-link:hover::before, 84.nav-link:hover::before { 85 opacity: 1; 86 -webkit-transform: translate(0, 5px); 87 transform: translate(0, 5px); 88} 89 90.dropdown { 91 position: relative; 92} 93 94.dropdown .nav-link { 95 padding-right: 15px; 96 height: 17px; 97 line-height: 17px; 98} 99 100.dropdown .nav-link::after { 101 content: ""; 102 position:absolute; 103 top: 6px; 104 right: 0; 105 border: 5px solid transparent; 106 border-top-color: #fff; 107} 108 109.submenu { 110 position: absolute; 111 top: 100%; 112 left: 50%; 113 z-index: 100; 114 width: 200px; 115 margin-left: -100px; 116 background: #fff; 117 border-radius: 3px; 118 line-height: 1.46667; 119 margin-top: -5px; 120 box-shadow: 0 0 8px rgba(0,0,0,.3); 121 opacity:0; 122 -webkit-transform: translate(0, 0) scale(.85); 123 transform: translate(0, 0)scale(.85); 124 transition: transform 0.1s ease-out, opacity 0.1s ease-out; 125 pointer-events: none; 126} 127 128.submenu::after, 129.submenu::before { 130 content: ""; 131 position: absolute; 132 bottom: 100%; 133 left: 50%; 134 margin-left: -10px; 135 border: 10px solid transparent; 136 height: 0; 137} 138 139.submenu::after { 140 border-bottom-color: #fff; 141} 142 143.submenu::before { 144 margin-left: -13px; 145 border: 13px solid transparent; 146 border-bottom-color: rgba(0,0,0,.1); 147 -webkit-filter:blur(1px); 148 filter:blur(1px); 149} 150 151.submenu-items { 152 list-style: none; 153 padding: 10px 0; 154} 155 156.submenu-item { 157 display: block; 158 text-align: left; 159} 160 161.submenu-link, 162.submenu-link:link, 163.submenu-link:visited, 164.submenu-link:active { 165 color: #3498db; 166 padding: 10px 20px; 167} 168 169.submenu-link:hover { 170 text-decoration: underline; 171} 172 173.submenu-seperator { 174 height: 0; 175 margin: 12px 10px; 176 border-top: 1px solid #eee; 177} 178 179.show-submenu .submenu { 180 opacity: 1; 181 -webkit-transform: translate(0, 25px) scale(1); 182 transform: translate(0, 25px) scale(1); 183 pointer-events: auto; 184}

js

1[].slice.call(document.querySelectorAll('.dropdown .nav-link')).forEach(function(el){ 2 el.addEventListener('click', onClick, false); 3}); 4 5function onClick(e){ 6 e.preventDefault(); 7 var el = this.parentNode; 8 el.classList.contains('show-submenu') ? hideSubMenu(el) : showSubMenu(el); 9} 10 11function showSubMenu(el){ 12 el.classList.add('show-submenu'); 13 document.addEventListener('click', function onDocClick(e){ 14 e.preventDefault(); 15 if(el.contains(e.target)){ 16 return; 17 } 18 document.removeEventListener('click', onDocClick); 19 hideSubMenu(el); 20 }); 21} 22 23function hideSubMenu(el){ 24 el.classList.remove('show-submenu'); 25}

試したこと

<base href="url" />を一旦削除しても遷移が出来なくなるだけで、ドロップダウンメニューは出現しませんでした。

ローカルでもリモートでもうまく動作しません。

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

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

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

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

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

beginner_t

2020/11/05 04:10

提示されているコードは実際に使用しているコードでしょうか? 提示されているコードを試したところ正常に動いていますので、原因はほかのところにあるかもしれません。 デベロッパーツールなどでエラーが出ていないかも確認し、でている場合はそちらもご提示ください。
hinomar

2020/11/05 04:45

はい、実際に使用しているコードで、デベロッパーツールにエラーは出ていません。 前後は以下です。 <!doctype html> <html> <head> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>タイトル</title> <script src="js/dropdown.js"></script> <link href="css/dropdown.css" rel="stylesheet" type="text/css"> </head> <body> ・・・<nav>・・・ </body> </html>
hinomar

2020/11/05 04:49

<base href="url" /> は遷移してしまうので、一旦消しています。
beginner_t

2020/11/05 05:24

「<base href="url" />を一旦削除して遷移出来ないようにしましたが、同じでした。」というのは<base href="url" />を記載していなくても、ドロップダウンメニューが出ずに、遷移してしまうという認識であってますか?
hinomar

2020/11/05 05:33

いえ、<base href="url" />を消している状態であればドロップダウンメニューが出ずに、遷移もしません。
beginner_t

2020/11/05 05:38

「<base href="url" />を一旦削除して遷移出来ないようにしましたが、同じでした。」というのはどの現象をさしているのでしょうか?
hinomar

2020/11/05 05:56 編集

ドロップダウンメニューが出ない現象を差しています。質問を修正しました。
guest

回答1

0

自己解決

<script src="js/dropdown.js"></script>

を記載する場所を、</body>の直前にしたら行けました。

見て頂いた皆様、ありがとうございました。

投稿2020/11/05 08:09

hinomar

総合スコア8

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問