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

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

ただいまの
回答率

89.96%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 475

charly27

score 7

ナビメニューを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 showSubMenu(el){
el.classList.add('show-submenu');
document.addEventListener('click', function onDocClick(e){
e.preventDefault();
if(el.contains(e.target)){
return;
}
document.removeEventListener('click', onDocClick);
hideSubMenu(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;
}

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • hectopascal1013

    2018/10/03 11:54

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

    キャンセル

  • Yousuck

    2018/10/03 12:08

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

    キャンセル

  • strictsilence

    2018/10/03 13:15

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

    キャンセル

回答 2

checkベストアンサー

0

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

<!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>


<style>
/* 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;
}
</style>

<script>
[].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 showSubMenu(el){
el.classList.add('show-submenu');
document.addEventListener('click', function onDocClick(e){
e.preventDefault();
if(el.contains(e.target)){
return;
}
document.removeEventListener('click', onDocClick);
hideSubMenu(el);
});
}

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


</script>


</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/03 12:27

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

    キャンセル

  • 2018/10/03 12:31

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

    キャンセル

  • 2018/10/03 13:23

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

    キャンセル

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 89.96%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる