javascriptで作成したナビメニューのサブメニューが現れません。

ナビメニューをjavascriptで作成しています。
メニューに下線は現れますが、サブメニューが現れません。jsは読んでいるようです。　サブメニューが現れるようにしたいです。よろしくお願いいたします。

HTML

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>test</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link rel="stylesheet" type="text/css" href="css/white.css" /> <script src="js/common.js"></script> </head> <body> <nav role="navigation" class="nav"> <ul class="nav-items"> <li class="nav-item"> <a href="#" class="nav-link"><span>Home</span></a> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link"><span>Products</span></a> <nav class="submenu"> <ul class="submenu-items"> <li class="submenu-item"><a href="#" class="submenu-link">Product #1</a></li> <li class="submenu-item"><a href="#" class="submenu-link">Product #2</a></li> <li class="submenu-item"><a href="#" class="submenu-link">Product #3</a></li> </ul> </nav> </li> <li class="nav-item"> <a href="#" class="nav-link"><span>Services</span></a> </li> <li class="nav-item"> <a href="#" class="nav-link"><span>Pricing</span></a> </li> <li class="nav-item"> <a href="#" class="nav-link"><span>News</span></a> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link"><span>More</span></a> <nav class="submenu"> <ul class="submenu-items"> <li class="submenu-item"><a href="#" class="submenu-link">About</a></li> <li class="submenu-item"><a href="#" class="submenu-link">Contact</a></li> <li class="submenu-item"><hr class="submenu-seperator" /></li> <li class="submenu-item"><a href="#" class="submenu-link">Support</a></li> <li class="submenu-item"><a href="#" class="submenu-link">FAQs</a></li> <li class="submenu-item"><a href="#" class="submenu-link">Careers</a></li> </ul> </nav> </li> </ul> </nav> </body> </html>

JavaScript

[].slice.call(document.querySelectorAll('.dropdown .nav-link')).forEach(function(el){
el.addEventListener('click', onClick, false);
});

function onClick(e){
e.preventDefault();
var el = this.parentNode;
el.classList.contains('show-submenu') ? hideSubMenu(el) : showSubMenu(el);
}

function hideSubMenu(el){
el.classList.remove('show-submenu');
}

CSS

/* Page */

html {
box-sizing: border-box;
}

*,
*:before,
*:after {
box-sizing: inherit;
}

body {
background-color: #3498db;
}

.nav {
width: 550px;
margin: 100px auto 0 auto;
text-align: center;
}

/* Navigation */

.nav {
font-family: sans-serif;
font-size: 24px;
}

.nav-items {
padding: 0;
list-style: none;
}

.nav-item {
display: inline-block;
margin-right: 25px;
}

.nav-item:last-child {
margin-right: 0;
}

.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-link:active,
.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
display: block;
position: relative;
font-size: 14px;
letter-spacing: 1px;
cursor: pointer;
text-decoration: none;
outline: none;
}

.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-link:active {
color: #fff;
font-weight: bold;
}

.nav-link::before {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 3px;
background: rgba(0,0,0,0.2);
opacity: 0;
-webkit-transform: translate(0, 10px);
transform: translate(0, 10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-link:hover::before,
.nav-link:hover::before {
opacity: 1;
-webkit-transform: translate(0, 5px);
transform: translate(0, 5px);
}

.dropdown {
position: relative;
}

.dropdown .nav-link {
padding-right: 15px;
height: 17px;
line-height: 17px;
}

.dropdown .nav-link::after {
content: "";
position:absolute;
top: 6px;
right: 0;
border: 5px solid transparent;
border-top-color: #fff;
}

.submenu {
position: absolute;
top: 100%;
left: 50%;
z-index: 100;
width: 200px;
margin-left: -100px;
background: #fff;
border-radius: 3px;
line-height: 1.46667;
margin-top: -5px;
box-shadow: 0 0 8px rgba(0,0,0,.3);
opacity:0;
-webkit-transform: translate(0, 0) scale(.85);
transform: translate(0, 0)scale(.85);
transition: transform 0.1s ease-out, opacity 0.1s ease-out;
pointer-events: none;
}

.submenu::after,
.submenu::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -10px;
border: 10px solid transparent;
height: 0;
}

.submenu::after {
border-bottom-color: #fff;
}

.submenu::before {
margin-left: -13px;
border: 13px solid transparent;
border-bottom-color: rgba(0,0,0,.1);
-webkit-filter:blur(1px);
filter:blur(1px);
}

.submenu-items {
list-style: none;
padding: 10px 0;
}

.submenu-item {
display: block;
text-align: left;
}

.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
color: #3498db;
padding: 10px 20px;
}

.submenu-link:hover {
text-decoration: underline;
}

.submenu-seperator {
height: 0;
margin: 12px 10px;
border-top: 1px solid #eee;
}

.show-submenu .submenu {
opacity: 1;
-webkit-transform: translate(0, 25px) scale(1);
transform: translate(0, 25px) scale(1);
pointer-events: auto;
}

hectopascal1013

2018/10/03 02:54

マークダウンを使ってくださると、コピペがはかどるようです。

Yousuck

2018/10/03 03:08

サブメニューがあるナビゲーションをクリックすると表示されますが、そういうことではなく？

strictsilence

2018/10/03 04:15

解決済みなら、解決済みとしないと、手を差し伸べる人の時間の無駄になりますベストアンサー確定させて、理由を書いてください。

行動規範の内容に同意します

回答2件

scriptタグをbodyタグの一番下（＝</body>の直前）に置いたら表示されるはずです。

投稿2018/10/03 11:17

ryoo_chksl

総合スコア69

ベストアンサー

js/common.jsやcss/white.cssは添付のものだけでよろしいでしょうか?
もしそうなら、html内に記述してやることで、サブメニューは出てきますね?
リンクの問題でしょうか?
javascriptを読むタイミングを最後にしてみました。

html,css,javascript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<title>test</title>
6<meta name="keywords" content="" />
7<meta name="description" content="" />
8<link rel="stylesheet" type="text/css" href="css/white.css" />
9<script src="js/common.js"></script>
10</head>
11<body>
12<nav role="navigation" class="nav">
13<ul class="nav-items">
14<li class="nav-item">
15<a href="#" class="nav-link"><span>Home</span></a>
16</li>
17<li class="nav-item dropdown">
18<a href="#" class="nav-link"><span>Products</span></a>
19<nav class="submenu">
20<ul class="submenu-items">
21<li class="submenu-item"><a href="#" class="submenu-link">Product #1</a></li>
22<li class="submenu-item"><a href="#" class="submenu-link">Product #2</a></li>
23<li class="submenu-item"><a href="#" class="submenu-link">Product #3</a></li>
24</ul>
25</nav>
26</li>
27<li class="nav-item">
28<a href="#" class="nav-link"><span>Services</span></a>
29</li>
30<li class="nav-item">
31<a href="#" class="nav-link"><span>Pricing</span></a>
32</li>
33<li class="nav-item">
34<a href="#" class="nav-link"><span>News</span></a>
35</li>
36<li class="nav-item dropdown">
37<a href="#" class="nav-link"><span>More</span></a>
38<nav class="submenu">
39<ul class="submenu-items">
40<li class="submenu-item"><a href="#" class="submenu-link">About</a></li>
41<li class="submenu-item"><a href="#" class="submenu-link">Contact</a></li>
42<li class="submenu-item"><hr class="submenu-seperator" /></li>
43<li class="submenu-item"><a href="#" class="submenu-link">Support</a></li>
44<li class="submenu-item"><a href="#" class="submenu-link">FAQs</a></li>
45<li class="submenu-item"><a href="#" class="submenu-link">Careers</a></li>
46</ul>
47</nav>
48</li>
49</ul>
50</nav>
51
52
53<style>
54/* Page */
55
56html {
57box-sizing: border-box;
58}
59
60*,
61*:before,
62*:after {
63box-sizing: inherit;
64}
65
66body {
67background-color: #3498db;
68}
69
70.nav {
71width: 550px;
72margin: 100px auto 0 auto;
73text-align: center;
74}
75
76/* Navigation */
77
78.nav {
79font-family: sans-serif;
80font-size: 24px;
81}
82
83.nav-items {
84padding: 0;
85list-style: none;
86}
87
88.nav-item {
89display: inline-block;
90margin-right: 25px;
91}
92
93.nav-item:last-child {
94margin-right: 0;
95}
96
97.nav-link,
98.nav-link:link,
99.nav-link:visited,
100.nav-link:active,
101.submenu-link,
102.submenu-link:link,
103.submenu-link:visited,
104.submenu-link:active {
105display: block;
106position: relative;
107font-size: 14px;
108letter-spacing: 1px;
109cursor: pointer;
110text-decoration: none;
111outline: none;
112}
113
114.nav-link,
115.nav-link:link,
116.nav-link:visited,
117.nav-link:active {
118color: #fff;
119font-weight: bold;
120}
121
122.nav-link::before {
123content: "";
124position: absolute;
125top: 100%;
126left: 0;
127width: 100%;
128height: 3px;
129background: rgba(0,0,0,0.2);
130opacity: 0;
131-webkit-transform: translate(0, 10px);
132transform: translate(0, 10px);
133transition: opacity 0.3s ease, transform 0.3s ease;
134}
135
136.nav-link:hover::before,
137.nav-link:hover::before {
138opacity: 1;
139-webkit-transform: translate(0, 5px);
140transform: translate(0, 5px);
141}
142
143.dropdown {
144position: relative;
145}
146
147.dropdown .nav-link {
148padding-right: 15px;
149height: 17px;
150line-height: 17px;
151}
152
153.dropdown .nav-link::after {
154content: "";
155position:absolute;
156top: 6px;
157right: 0;
158border: 5px solid transparent;
159border-top-color: #fff;
160}
161
162.submenu {
163position: absolute;
164top: 100%;
165left: 50%;
166z-index: 100;
167width: 200px;
168margin-left: -100px;
169background: #fff;
170border-radius: 3px;
171line-height: 1.46667;
172margin-top: -5px;
173box-shadow: 0 0 8px rgba(0,0,0,.3);
174opacity:0;
175-webkit-transform: translate(0, 0) scale(.85);
176transform: translate(0, 0)scale(.85);
177transition: transform 0.1s ease-out, opacity 0.1s ease-out;
178pointer-events: none;
179}
180
181.submenu::after,
182.submenu::before {
183content: "";
184position: absolute;
185bottom: 100%;
186left: 50%;
187margin-left: -10px;
188border: 10px solid transparent;
189height: 0;
190}
191
192.submenu::after {
193border-bottom-color: #fff;
194}
195
196.submenu::before {
197margin-left: -13px;
198border: 13px solid transparent;
199border-bottom-color: rgba(0,0,0,.1);
200-webkit-filter:blur(1px);
201filter:blur(1px);
202}
203
204.submenu-items {
205list-style: none;
206padding: 10px 0;
207}
208
209.submenu-item {
210display: block;
211text-align: left;
212}
213
214.submenu-link,
215.submenu-link:link,
216.submenu-link:visited,
217.submenu-link:active {
218color: #3498db;
219padding: 10px 20px;
220}
221
222.submenu-link:hover {
223text-decoration: underline;
224}
225
226.submenu-seperator {
227height: 0;
228margin: 12px 10px;
229border-top: 1px solid #eee;
230}
231
232.show-submenu .submenu {
233opacity: 1;
234-webkit-transform: translate(0, 25px) scale(1);
235transform: translate(0, 25px) scale(1);
236pointer-events: auto;
237}
238</style>
239
240<script>
241[].slice.call(document.querySelectorAll('.dropdown .nav-link')).forEach(function(el){
242el.addEventListener('click', onClick, false);
243});
244
245function onClick(e){
246e.preventDefault();
247var el = this.parentNode;
248el.classList.contains('show-submenu') ? hideSubMenu(el) : showSubMenu(el);
249}
250
251function showSubMenu(el){
252el.classList.add('show-submenu');
253document.addEventListener('click', function onDocClick(e){
254e.preventDefault();
255if(el.contains(e.target)){
256return;
257}
258document.removeEventListener('click', onDocClick);
259hideSubMenu(el);
260});
261}
262
263function hideSubMenu(el){
264el.classList.remove('show-submenu');
265}
266
267
268</script>
269
270
271</body>
272</html>
273
274

投稿2018/10/03 02:57

編集2018/10/03 03:07

hectopascal1013

総合スコア466

charly27

2018/10/03 03:08

ご回答いただきありがとうございます。js/common.jsやcss/white.cssは添付のものだけです。 common.jsの内容を　<script></script>で囲んで<head>に書いてみましたが、でてきません。<body>に書き込んでも出てきません。何卒よろしくお願い致します。

hectopascal1013

2018/10/03 03:10

ブラウザは何をご使用でしょうか? chrome firefoxで確認取れてますが、違いましたらすいません。

charly27

2018/10/03 03:14

恐れ入ります。chrome　とfirefox　で現れません。「確認取れてます」とは出ているということでしょうか。そうだとすると、基本的な記述に問題があるのでしょうか。よろしくお願いいたします。

hectopascal1013

2018/10/03 03:17

添付したコードとご返信いただいた通りの実行で、こちらの環境では動作出てました。当方Macで、chrome,Firefoxともに最新版です。バージョン違いか、何らかの表記ミスが入っているかは、定かではありません。 (あるいはキャッシュをリロードしていないとか?) その他頂いた物で、当方でいじっている点はありませんので、他の方の確認をしていただければと思います。

charly27

2018/10/03 03:27

ありがとうございます！！　現れました。　理由はわかりませんが助かりました。ありがとうございます。

hectopascal1013

2018/10/03 03:31

後は、javascriptを外部化した時に問題が起きないかどうか、、、ですね。起きたらその時はまた別対応で。

charly27

2018/10/03 04:23

ありがとうございます！　よろしくお願いいたします。

行動規範の内容に同意します

あなたの回答