teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問Xがハンバーガーメニューに戻らない

編集履歴

質問編集履歴

3

ハンバーガーメニューをXにはできたので、Xを押すと元のハンバーガーメニューに戻る方法に変えました。

2019/10/03 11:01

投稿

Matsunosuke
Matsunosuke

スコア6

test CHANGED
@@ -1 +1 @@
1
- ハンバーガーメニューがXにならない
1
+ Xがハンバーガーメニューに戻らない
test CHANGED
@@ -1,16 +1,4 @@
1
- ハンバーガーメニューを作ったのちに、active要素をつけ、クリックすると、リストが開き、
2
-
3
- リストが開いている時には、Xとし、これを押すと閉じる仕組みしようとしました。
4
-
5
-
6
-
7
- しかし、activeしたためか、クリックして離すと、一瞬Xになるだけで、すぐにもとのハンバーガーメニューに戻ってしまいます。
1
+ :focusを用いてハンバーガーメニューをXにし、メニューが開くようにはできたのですが、Xを押すとハンバーガーメニューに戻り、メニューが閉じるようにするにはどうすればいいのでしょうか？
8
-
9
-
10
-
11
- なんとかactiveを使いながら、解決方法はないでしょうか？
12
-
13
-
14
2
 
15
3
 
16
4
 
@@ -102,13 +90,13 @@
102
90
 
103
91
  }
104
92
 
105
- #nav-toggle:active span {
93
+ #nav-toggle:focus span {
106
94
 
107
95
  background-color: transparent;
108
96
 
109
97
  }
110
98
 
111
- #nav-toggle:active span:before {
99
+ #nav-toggle:focus span:before {
112
100
 
113
101
  transform: rotate(45deg);
114
102
 
@@ -118,19 +106,19 @@
118
106
 
119
107
  }
120
108
 
121
- #nav-toggle:active span:before{
109
+ #nav-toggle:focus span:before{
122
110
 
123
111
  top: 0;
124
112
 
125
113
  }
126
114
 
127
- #nav-toggle:active span:after {
115
+ #nav-toggle:focus span:after {
128
116
 
129
117
  top:0;
130
118
 
131
119
  }
132
120
 
133
- #nav-toggle:active span:after {
121
+ #nav-toggle:focus span:after {
134
122
 
135
123
  transform: translateY(-10px) rotate(-45deg);
136
124
 

2

マークダウン記法を用いました

2019/10/03 11:01

投稿

Matsunosuke
Matsunosuke

スコア6

test CHANGED
File without changes
test CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
 
20
20
 
21
- <html>
21
+ ```html
22
22
 
23
23
  <a id="nav-toggle" class="nav_slide_button" href="#">
24
24
 
@@ -32,7 +32,11 @@
32
32
 
33
33
 
34
34
 
35
+
36
+
37
+ ```
38
+
35
- <css>
39
+ ```css
36
40
 
37
41
  #nav-toggle span, #nav-toggle span::before, #nav-toggle span::after {
38
42
 
@@ -68,15 +72,41 @@
68
72
 
69
73
 
70
74
 
75
+ #nav-toggle span, #nav-toggle span::before, #nav-toggle span::after {
71
76
 
77
+ cursor: pointer;
78
+
79
+ border-radius: 1px;
80
+
81
+ -moz-border-radius: 1px;
82
+
83
+ -webkit-border-radius: 1px;
84
+
85
+ -o-border-radius: 1px;
86
+
87
+ height: 3px;
88
+
89
+ width: 35px;
90
+
91
+ background: #fff;
92
+
93
+ position: absolute;
94
+
95
+ display: block;
96
+
97
+ content: '';
98
+
99
+ -webkit-transition: all 500ms ease-in-out;
100
+
101
+ transition: all 500ms ease-in-out;
102
+
103
+ }
72
104
 
73
105
  #nav-toggle:active span {
74
106
 
75
107
  background-color: transparent;
76
108
 
77
109
  }
78
-
79
-
80
110
 
81
111
  #nav-toggle:active span:before {
82
112
 
@@ -87,10 +117,6 @@
87
117
  -ms-transform: rotate(45deg);
88
118
 
89
119
  }
90
-
91
-
92
-
93
-
94
120
 
95
121
  #nav-toggle:active span:before{
96
122
 
@@ -104,8 +130,6 @@
104
130
 
105
131
  }
106
132
 
107
-
108
-
109
133
  #nav-toggle:active span:after {
110
134
 
111
135
  transform: translateY(-10px) rotate(-45deg);
@@ -118,27 +142,9 @@
118
142
 
119
143
  }
120
144
 
145
+ ```
121
146
 
122
-
123
-
124
-
125
-
126
-
127
-
128
-
129
-
130
-
131
-
132
-
133
-
134
-
135
-
136
-
137
-
138
-
139
-
140
-
141
- <jQuery>
147
+ ```Javascript
142
148
 
143
149
  $(function() {
144
150
 
@@ -149,3 +155,13 @@
149
155
  $('nav').slideToggle();
150
156
 
151
157
  });
158
+
159
+
160
+
161
+
162
+
163
+
164
+
165
+ });
166
+
167
+ ```

1

コードを追加しました

2019/10/02 07:26

投稿

Matsunosuke
Matsunosuke

スコア6

test CHANGED
@@ -1 +1 @@
1
- active について
1
+ ハンバーガーメニューがXにならない
test CHANGED
@@ -9,3 +9,143 @@
9
9
 
10
10
 
11
11
  なんとかactiveを使いながら、解決方法はないでしょうか？
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+ <html>
22
+
23
+ <a id="nav-toggle" class="nav_slide_button" href="#">
24
+
25
+ <span></span>
26
+
27
+ </a>
28
+
29
+
30
+
31
+
32
+
33
+
34
+
35
+ <css>
36
+
37
+ #nav-toggle span, #nav-toggle span::before, #nav-toggle span::after {
38
+
39
+ cursor: pointer;
40
+
41
+ border-radius: 1px;
42
+
43
+ -moz-border-radius: 1px;
44
+
45
+ -webkit-border-radius: 1px;
46
+
47
+ -o-border-radius: 1px;
48
+
49
+ height: 3px;
50
+
51
+ width: 35px;
52
+
53
+ background: #fff;
54
+
55
+ position: absolute;
56
+
57
+ display: block;
58
+
59
+ content: '';
60
+
61
+ -webkit-transition: all 500ms ease-in-out;
62
+
63
+ transition: all 500ms ease-in-out;
64
+
65
+ }
66
+
67
+
68
+
69
+
70
+
71
+
72
+
73
+ #nav-toggle:active span {
74
+
75
+ background-color: transparent;
76
+
77
+ }
78
+
79
+
80
+
81
+ #nav-toggle:active span:before {
82
+
83
+ transform: rotate(45deg);
84
+
85
+ -webkit-transform: rotate(45deg);
86
+
87
+ -ms-transform: rotate(45deg);
88
+
89
+ }
90
+
91
+
92
+
93
+
94
+
95
+ #nav-toggle:active span:before{
96
+
97
+ top: 0;
98
+
99
+ }
100
+
101
+ #nav-toggle:active span:after {
102
+
103
+ top:0;
104
+
105
+ }
106
+
107
+
108
+
109
+ #nav-toggle:active span:after {
110
+
111
+ transform: translateY(-10px) rotate(-45deg);
112
+
113
+ -webkit-transform: translateY(-10px) rotate(-45deg);
114
+
115
+ -ms-transform: translateY(-10px) rotate(-45deg);
116
+
117
+ top: 10px;
118
+
119
+ }
120
+
121
+
122
+
123
+
124
+
125
+
126
+
127
+
128
+
129
+
130
+
131
+
132
+
133
+
134
+
135
+
136
+
137
+
138
+
139
+
140
+
141
+ <jQuery>
142
+
143
+ $(function() {
144
+
145
+
146
+
147
+ $('.nav_slide_button').click(function() {
148
+
149
+ $('nav').slideToggle();
150
+
151
+ });