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

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回答

1627閲覧

作成したドロップダウンメニュー内にて、第二階層のリンクが動作しません。

hinomar

総合スコア8

HTML5

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

JavaScript

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

CSS

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

0グッド

0クリップ

投稿2020/11/10 01:01

前提・実現したいこと

https://teratail.com/questions/302422

前回作成したドロップダウンメニューを正常に動作させたいです。

完成形として、ドロップダウンメニューの第一階層はリンクである必要はありません。

拾い物のコードのことで何度もお伺いして済みません。
原因に思い当たる方、ご教示頂けますと幸いです。

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

第二階層のリンクがうまく動作しません。

該当のソースコード

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<link href="css/dropdown.css" rel="stylesheet" type="text/css"> 11</head> 12<body> 13<nav role="navigation" class="nav"> 14 <ul class="nav-items"> 15 <li class="nav-item"> 16 <a href="#" class="nav-link"><span>Home</span></a> 17 </li> 18 <li class="nav-item dropdown"> 19 <a href="#" class="nav-link"><span>Products</span></a> 20 <nav class="submenu"> 21 <ul class="submenu-items"> 22 <li class="submenu-item"><a href="https://www.google.co.jp/" class="submenu-link">Product #1</a></li> 23 <li class="submenu-item"><a href="#" class="submenu-link">Product #2</a></li> 24 <li class="submenu-item"><a href="#" class="submenu-link">Product #3</a></li> 25 </ul> 26 </nav> 27 </li> 28 <li class="nav-item"> 29 <a href="#" class="nav-link"><span>Services</span></a> 30 </li> 31 <li class="nav-item"> 32 <a href="#" class="nav-link"><span>Pricing</span></a> 33 </li> 34 <li class="nav-item"> 35 <a href="#" class="nav-link"><span>News</span></a> 36 </li> 37 <li class="nav-item dropdown"> 38 <a href="#" class="nav-link"><span>More</span></a> 39 <nav class="submenu"> 40 <ul class="submenu-items"> 41 <li class="submenu-item"><a href="#" class="submenu-link">About</a></li> 42 <li class="submenu-item"><a href="#" class="submenu-link">Contact</a></li> 43 <li class="submenu-item"><hr class="submenu-seperator" /></li> 44 <li class="submenu-item"><a href="#" class="submenu-link">Support</a></li> 45 <li class="submenu-item"><a href="#" class="submenu-link">FAQs</a></li> 46 <li class="submenu-item"><a href="#" class="submenu-link">Careers</a></li> 47 </ul> 48 </nav> 49 </li> 50 </ul> 51</nav> 52<script src="js/dropdown.js"></script> 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 13.nav { 14 width: 100%; 15 margin: 0 auto 0 auto; 16 text-align: center; 17} 18 19/* Navigation */ 20 21.nav { 22 font-family: Georgia, Arial, sans-serif; 23 font-size: 14px; 24} 25 26.nav-items { 27 padding: 0; 28 list-style: none; 29} 30 31.nav-item { 32 display: inline-block; 33 margin-right: 25px; 34 width: 23%; 35} 36 37.nav-item:last-child { 38 margin-right: 0; 39} 40 41.nav-link, 42.nav-link:link, 43.nav-link:visited, 44.nav-link:active, 45.submenu-link, 46.submenu-link:link, 47.submenu-link:visited, 48.submenu-link:active { 49 display: block; 50 position: relative; 51 font-size: 14px; 52 letter-spacing: 1px; 53 cursor: pointer; 54 text-decoration: none; 55 outline: none; 56 border-left: 1px solid #fff; 57} 58 59.nav-link, 60.nav-link:link, 61.nav-link:visited, 62.nav-link:active { 63 color: #000; 64 font-weight: bold; 65} 66 67.nav-link::before { 68 content: ""; 69 position: absolute; 70 top: 100%; 71 left: 0; 72 width: 280px; 73 height: 3px; 74 background: rgba(0,0,0,0.2); 75 opacity: 0; 76 -webkit-transform: translate(0, 10px); 77 transform: translate(0, 10px); 78 transition: opacity 0.3s ease, transform 0.3s ease; 79} 80 81.nav-link:hover::before, 82.nav-link:hover::before { 83 opacity: 1; 84 -webkit-transform: translate(0, 5px); 85 transform: translate(0, 5px); 86} 87 88.dropdown { 89 position: relative; 90} 91 92.dropdown .nav-link { 93 padding-right: 15px; 94 height: 17px; 95 line-height: 1.1; 96} 97 98.dropdown .nav-link::after { 99 content: ""; 100 position:absolute; 101 top: 6px; 102 right: 0; 103 border: 5px solid transparent; 104 border-top-color: #bbb; 105} 106 107.submenu { 108 position: absolute; 109 top: 100%; 110 left: 50%; 111 z-index: 100; 112 width: 600px; 113 margin-left: -300px; 114 background: #FFF; 115 border-radius: 3px; 116 line-height: 1.46667; 117 margin-top: -5px; 118 box-shadow: 0 0 8px rgba(0,0,0,.3); 119 opacity:0; 120 -webkit-transform: translate(0, 0) scale(.85); 121 transform: translate(0, 0)scale(.85); 122 transition: transform 0.1s ease-out, opacity 0.1s ease-out; 123 pointer-events: none; 124} 125 126.submenu::after, 127.submenu::before { 128 content: ""; 129 position: absolute; 130 bottom: 100%; 131 left: 50%; 132 margin-left: -10px; 133 border: 10px solid transparent; 134 height: 0; 135} 136 137.submenu::after { 138 border-bottom-color: #fff; 139} 140 141.submenu::before { 142 margin-left: -13px; 143 border: 13px solid transparent; 144 border-bottom-color: rgba(0,0,0,.1); 145 -webkit-filter:blur(1px); 146 filter:blur(1px); 147} 148 149.submenu-items { 150 list-style: none; 151 padding: 10px 0; 152} 153 154.submenu-item { 155 display: block; 156 text-align: left; 157} 158 159.submenu-link, 160.submenu-link:link, 161.submenu-link:visited, 162.submenu-link:active { 163 color: #000; 164 padding: 10px 20px; 165} 166 167.submenu-link:hover { 168 text-decoration: underline; 169} 170 171.submenu-seperator { 172 height: 0; 173 margin: 12px 10px; 174 border-top: 1px solid #eee; 175} 176 177.show-submenu .submenu { 178 opacity: 1; 179 -webkit-transform: translate(0, 25px) scale(1); 180 transform: translate(0, 25px) scale(1); 181 pointer-events: auto; 182} 183 184li.nav-item ul.submenu-items { 185 position: absolute; 186 left: 0; 187 box-sizing: border-box; 188 width: 800px; 189 padding: 20px 2%; 190 background: #fff; 191 -webkit-transition: all .2s ease; 192 transition: all .2s ease; 193} 194 195li.nav-item:hover ul.submenu-items { 196 visibility: visible; 197 opacity: 1; 198} 199 200li.nav-item ul.submenu-items > li { 201 float: left; 202 width: 32%; 203 border: none; 204} 205 206li.nav-item ul.submenu-items > li:nth-child(3n+2) { 207 margin: 0 1%; 208} 209 210

JavaScript

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}

試したこと

第一階層にリンクをつけましたが同じでした。

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

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

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

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

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

guest

回答1

0

ベストアンサー

showSubMenu()の中ですべての要素に対してpreventDefault()を適用してしまっているのが原因のようです。
document.addEventListener('click',... 以下はすべて不要かもしれません。

JavaScript

1function showSubMenu(el){ 2 let shown = document.getElementsByClassName('show-submenu'); 3 4 if (shown.length) { 5 for (let i = 0; i < shown.length; i ++) { 6 shown[i].classList.remove('show-submenu'); 7 } 8 } 9 /* 以上、他の開いているメニューを隠すスクリプト */ 10 11 el.classList.add('show-submenu'); 12}

これで期待通りに動くのではと思いますが、いかがでしょうか。

投稿2020/11/10 14:02

編集2020/11/10 14:32
cerfweb

総合スコア1899

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

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

hinomar

2020/11/11 00:37

回答ありがとうございます。 ご教示頂きましたJavaScriptで正常に動作しました。本当にありがとうございます。 見て頂いた皆様も、ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問