teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問一度目のクリックでは反応しない

編集履歴

質問編集履歴

1

間違えて途中で送信してしまいました。

2019/08/06 04:01

投稿

hayamin1111
hayamin1111

スコア11

test CHANGED
File without changes
test CHANGED
@@ -16,30 +16,100 @@
16
16
 
17
17
  <div id="humberger-menu">
18
18
 
19
- <span></span>
19
+ <span class="line-1"></span>
20
-
20
+
21
- <span></span>
21
+ <span class="line-2"></span>
22
-
22
+
23
- <span></span>
23
+ <span class="line-3"></span>
24
-
24
+
25
- </div>
25
+ </div>
26
-
27
- <!-- ここまでhumberger-menu -->
26
+
28
-
29
-
30
-
27
+
28
+
31
- <div class="drop-menu">
29
+ <div class="drop-menu">
32
-
30
+
33
- 　<ul>
31
+ <ul>
32
+
34
-
33
+ <li>hoge</li>
34
+
35
-
35
+ <li>hoge</li>
36
+
36
-
37
+ <li>hoge</li>
38
+
39
+ </ul>
40
+
37
- </div>
41
+ </div>
38
-
39
- <!-- /drop-menu -->
42
+
43
+
44
+
45
+
40
46
 
41
47
  ```
42
48
 
49
+ ### CSS
50
+
51
+ ```CSS
52
+
53
+ /* humberger menu */
54
+
55
+ #humberger-menu {
56
+
57
+ position: fixed;
58
+
59
+ top: 24px;
60
+
61
+ right: 20px;
62
+
63
+ width: 40px;
64
+
65
+ height: 32px;
66
+
67
+ z-index: 3;
68
+
69
+ }
70
+
71
+ #humberger-menu span {
72
+
73
+ position: absolute;
74
+
75
+ width: 40px;
76
+
77
+ height: 4px;
78
+
79
+ background: #333;
80
+
81
+ }
82
+
83
+ .line-1 {
84
+
85
+ top: 0;
86
+
87
+ }
88
+
89
+ .line-2 {
90
+
91
+ top: 14px;
92
+
93
+ }
94
+
95
+ .line-3 {
96
+
97
+ top:28px;
98
+
99
+ }
100
+
101
+
102
+
103
+ /******* /drop menu *******/
104
+
105
+ .drop-menu {
106
+
107
+ display: none;
108
+
109
+ }
110
+
111
+ ```
112
+
43
113
 
44
114
 
45
115
  ### jQuery
@@ -62,9 +132,35 @@
62
132
 
63
133
  if($(this).hasClass('open')) {
64
134
 
135
+ $('.line-2').css({
136
+
137
+ opacity: '1',
138
+
139
+ transition: 'all 0.4s'
140
+
141
+ });
142
+
143
+ $('.line-1').css({
144
+
145
+ transform: 'rotate(0) translate(0, 0)' ,
146
+
147
+ transition: 'all 0.4s'
148
+
149
+ });
150
+
151
+ $('.line-3').css({
152
+
153
+ transform: 'rotate(0) translate(0, 0)',
154
+
155
+ transition: 'all 0.4s'
156
+
157
+ });
158
+
159
+ } else {
160
+
65
161
  $('.line-2').css({
66
162
 
67
- opacity: '1',
163
+ opacity: '0',
68
164
 
69
165
  transition: 'all 0.4s'
70
166
 
@@ -72,7 +168,7 @@
72
168
 
73
169
  $('.line-1').css({
74
170
 
75
- transform: 'rotate(0) translate(0, 0)' ,
171
+ transform: 'rotate(45deg) translate(3px, 15px)' ,
76
172
 
77
173
  transition: 'all 0.4s'
78
174
 
@@ -80,37 +176,11 @@
80
176
 
81
177
  $('.line-3').css({
82
178
 
83
- transform: 'rotate(0) translate(0, 0)',
179
+ transform: 'rotate(-45deg) translate(3px, -15px)',
84
-
180
+
85
- transition: 'all 0.4s'
181
+ transition: 'all 0.4s'
86
-
182
+
87
- });
183
+ });
88
-
89
- } else {
90
-
91
- $('span:nth-of-type(2)').css({
92
-
93
- opacity: '0',
94
-
95
- transition: 'all 0.4s'
96
-
97
- });
98
-
99
- $('span:nth-of-type(1)').css({
100
-
101
- transform: 'rotate(45deg) translate(3px, 15px)' ,
102
-
103
- transition: 'all 0.4s'
104
-
105
- });
106
-
107
- $('span:nth-of-type(3)').css({
108
-
109
- transform: 'rotate(-45deg) translate(3px, -15px)',
110
-
111
- transition: 'all 0.4s'
112
-
113
- });
114
184
 
115
185
  }
116
186
 
@@ -130,14 +200,14 @@
130
200
 
131
201
  ### 試したこと
132
202
 
133
-
134
-
135
- ここに問題に対して試したことを記載してください。
203
+ １．一番下のコード（ $(this).next('.drop-menu').slideToggle('slow');）の位置を変えてみた（もともとは上から３行目にあった）。
136
-
137
-
138
-
204
+
205
+
206
+
139
- ### 補足情報（FW/ツールのバージョンなど）
207
+ ２．$('#humberger-menu').click(function()　を
208
+
140
-
209
+ $('#humberger-menu').on('click', function() に変えてみた。
141
-
142
-
210
+
211
+
212
+
143
- ここにより詳細な情報を記載してください。
213
+ どなたかどうかよろしくお願いいたします。