Q&A
###実現したいこと
下記のページのようにハンバーガーメニューを表示させたいです。
https://tech-dig.jp/demo/global-nav/
###参考記事
https://tech-dig.jp/hamburger-global-nav/
###コード
HTML
1<header class="header"> 2 <nav class="global-nav"> 3 <ul class="global-nav__list"> 4 <li class="global-nav__item"><a href="">メニュー1</a></li> 5 <li class="global-nav__item"><a href="">メニュー2</a></li> 6 <li class="global-nav__item"><a href="">メニュー3</a></li> 7 <li class="global-nav__item"><a href="">メニュー4</a></li> 8 <li class="global-nav__item"><a href="">メニュー5</a></li> 9 </ul> 10 </nav> 11 <div class="hamburger" id="js-hamburger"> 12 <span class="hamburger__line hamburger__line--1"></span> 13 <span class="hamburger__line hamburger__line--2"></span> 14 <span class="hamburger__line hamburger__line--3"></span> 15 </div> 16 <div class="black-bg" id="js-black-bg"></div> 17</header>
javascript
1function toggleNav() { 2 var body = document.body; 3 var hamburger = document.getElementById('js-hamburger'); 4 var blackBg = document.getElementById('js-black-bg'); 5 6 hamburger.addEventListener('click', function() { 7 body.classList.toggle('nav-open'); 8 }); 9 blackBg.addEventListener('click', function() { 10 body.classList.remove('nav-open'); 11 }); 12} 13toggleNav(); 14
エラーメッセージ
Uncaught TypeError: Cannot read property 'addEventListener' of null
該当部分
hamburger.addEventListener('click', function() {
###確認したこと
該当のIDもきちんとあるのですが、なぜnullで見つからないのかわかりません。
javascript初心者ですのでご教授いただきたく存じます。
よろしくお願い申し上げます。
回答1件
0
ベストアンサー
<script>...<script>の記述を入れてみてはいかがでしょうか、、
（自分の環境では再現でした。）
※クリック前
※クリック後
```ここに言語を入力
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style>
.header {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 40px;
background-color: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,.16);
}
.global-nav {
position: fixed;
right: -320px; /* これで隠れる */
top: 0;
width: 300px; /* スマホに収まるくらい */
height: 100vh;
padding-top: 40px;
background-color: #fff;
transition: all .6s;
z-index: 200;
overflow-y: auto; /* メニューが多くなったらスクロールできるように */
}
.hamburger {
position: absolute;
right: 0;
top: 0;
width: 40px; /* クリックしやすいようにちゃんと幅を指定する */
height: 40px; /* クリックしやすいようにちゃんと高さを指定する */
cursor: pointer;
z-index: 300;
}
.global-nav__list {
margin: 0;
padding: 0;
list-style: none;
}
.global-nav__item {
text-align: center;
padding: 0 14px;
}
.global-nav__item a {
display: block;
padding: 8px 0;
border-bottom: 1px solid #eee;
text-decoration: none;
color: #111;
}
.global-nav__item a:hover {
background-color: #eee;
}
.hamburger__line {
position: absolute;
left: 11px;
width: 18px;
height: 1px;
background-color: #111;
transition: all .6s;
}
.hamburger__line--1 {
top: 14px;
}
.hamburger__line--2 {
top: 20px;
}
.hamburger__line--3 {
top: 26px;
}
.black-bg {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: 100;
background-color: #000;
opacity: 0;
visibility: hidden;
transition: all .6s;
cursor: pointer;
}
/* 表示された時用のCSS */
.nav-open .global-nav {
right: 0;
}
.nav-open .black-bg {
opacity: .8;
visibility: visible;
}
.nav-open .hamburger__line--1 {
transform: rotate(45deg);
top: 20px;
}
.nav-open .hamburger__line--2 {
width: 0;
left: 50%;
}
.nav-open .hamburger__line--3 {
transform: rotate(-45deg);
top: 20px;
}
</style>
<nav class="global-nav"> <ul class="global-nav__list"> <li class="global-nav__item"><a href="">メニュー1</a></li> <li class="global-nav__item"><a href="">メニュー2</a></li> <li class="global-nav__item"><a href="">メニュー3</a></li> <li class="global-nav__item"><a href="">メニュー4</a></li> <li class="global-nav__item"><a href="">メニュー5</a></li> </ul> </nav> <div class="hamburger" id="js-hamburger"> <span class="hamburger__line hamburger__line--1"></span> <span class="hamburger__line hamburger__line--2"></span> <span class="hamburger__line hamburger__line--3"></span> </div> <div class="black-bg" id="js-black-bg"></div> </header> <script> function toggleNav() { var body = document.body; var hamburger = document.getElementById('js-hamburger'); var blackBg = document.getElementById('js-black-bg'); hamburger.addEventListener('click', function() { body.classList.toggle('nav-open'); }); blackBg.addEventListener('click', function() { body.classList.remove('nav-open'); }); } toggleNav(); </script> </body> </html><header class="header">
投稿2019/05/09 03:18
総合スコア302
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/09 03:53