teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

修正

2021/12/21 11:02

投稿

KKsall
KKsall

スコア25

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,6 @@
1
1
  なぜかエラーで動きません。レクチャーいただければ幸いです
2
2
 
3
- https://codepen.io/pen/
3
+ https://codepen.io/boo-jp/pen/LYzjLdY
4
4
 
5
5
 
6
6
  ```ここに言語を入力

1

修正

2021/12/21 11:02

投稿

KKsall
KKsall

スコア25

title CHANGED
File without changes
body CHANGED
@@ -1,3 +1,42 @@
1
- コピペしたのですが、なぜかエラーで動きません。レクチャーいただければ幸いです
1
+ なぜかエラーで動きません。レクチャーいただければ幸いです
2
2
 
3
- https://codepen.io/pen/
3
+ https://codepen.io/pen/
4
+
5
+
6
+ ```ここに言語を入力
7
+ <div class="menu">
8
+ <div class="line-list" id="js-hamburger">
9
+ <span></span>
10
+ <span></span>
11
+ <span></span>
12
+ </div>
13
+ <div class="menu-bg" id="js-menu-bg"></div>
14
+ <nav class="global-nav">
15
+ <ul class="link-list">
16
+ <li><a href="#">メニュー1</a></li>
17
+ <li><a href="#">メニュー2</a></li>
18
+ <li><a href="#">メニュー3</a></li>
19
+ </ul>
20
+ </nav>
21
+ </div>
22
+ ```
23
+ ```ここに言語を入力
24
+ $(function() {
25
+ function toggleNav() {
26
+ var body = document.body;
27
+ var hamburger = document.getElementById("js-hamburger");
28
+ var blackBg = document.getElementById("js-menu-bg");
29
+ // クリックしたときにクラス付与
30
+ hamburger.addEventListener("click", function() {
31
+ body.classList.toggle("nav-open");
32
+ hamburger.classList.toggle("active");
33
+ });
34
+ // クリックしたときにクラス付与
35
+ blackBg.addEventListener("click", function() {
36
+ body.classList.remove("nav-open");
37
+ hamburger.classList.remove("active");
38
+ });
39
+ }
40
+ toggleNav();
41
+ });
42
+ ```