質問編集履歴
2
初心者マークつけました。参考サイトも記載しました。このほかにもたくさん見たのですが主にここを参照しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -4,10 +4,9 @@
|
|
|
4
4
|
メニューが展開されても中身が表示されません。
|
|
5
5
|
三本線をクリックしなくてもメニューの開閉ができてしまっている状態です。
|
|
6
6
|
期待動作としては、三本線をクリックメニューが開閉し、中身が表示されることです。
|
|
7
|
+
[参考にしたサイト](https://web-seikatsu.hatenablog.jp/entry/2017/10/07/213000)
|
|
7
8
|
|
|
8
|
-
初心者なのでよろしくお願いします。
|
|
9
9
|
|
|
10
|
-
|
|
11
10
|
```html
|
|
12
11
|
<div class="menu">
|
|
13
12
|
<!-- メニューボタン -->
|
1
コードタグを使いました。ありがとうございます。問題になっているところと期待動作について書きましたよろしくお願いします。。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,15 +1,22 @@
|
|
|
1
1
|
ハンバーガーメニューを作成しているんですがうまくいきません。。
|
|
2
2
|
|
|
3
3
|
三本線をクリックしたときにメニューが展開されるようにしたいのですが、ご教授お願いします。
|
|
4
|
+
メニューが展開されても中身が表示されません。
|
|
5
|
+
三本線をクリックしなくてもメニューの開閉ができてしまっている状態です。
|
|
6
|
+
期待動作としては、三本線をクリックメニューが開閉し、中身が表示されることです。
|
|
7
|
+
|
|
8
|
+
初心者なのでよろしくお願いします。
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
```html
|
|
4
12
|
<div class="menu">
|
|
5
13
|
<!-- メニューボタン -->
|
|
6
14
|
<div class="menu_box">
|
|
7
15
|
<span></span>
|
|
8
16
|
<span></span>
|
|
9
17
|
<span></span>
|
|
10
|
-
</div>
|
|
18
|
+
</div>
|
|
11
|
-
|
|
12
|
-
|
|
19
|
+
<!-- メニューリスト -->
|
|
13
20
|
<nav class="menu_box_open">
|
|
14
21
|
<ul>
|
|
15
22
|
<li><a href="#">aaaaaaa</a></li>
|
|
@@ -20,14 +27,18 @@
|
|
|
20
27
|
</ul>
|
|
21
28
|
</nav>
|
|
22
29
|
</div>
|
|
30
|
+
|
|
31
|
+
```
|
|
32
|
+
```jquery
|
|
23
|
-
|
|
33
|
+
<script>
|
|
24
|
-
|
|
34
|
+
$('.menu_box').click(function(){
|
|
25
|
-
|
|
35
|
+
$('.menu_box').toggleClass('menu_box_open').fadeIn(300);
|
|
26
|
-
|
|
27
|
-
|
|
36
|
+
})
|
|
28
37
|
</script>
|
|
29
38
|
|
|
39
|
+
|
|
40
|
+
```
|
|
30
|
-
|
|
41
|
+
```css
|
|
31
42
|
.menu{
|
|
32
43
|
position: fixed;
|
|
33
44
|
top: 120px;
|
|
@@ -94,4 +105,6 @@
|
|
|
94
105
|
li {
|
|
95
106
|
text-align: right;
|
|
96
107
|
margin-top: 16px;
|
|
97
|
-
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
```
|