回答編集履歴

1

CSSの変更だけでいけました。

2021/02/16 14:31

投稿

pinoko
pinoko

スコア127

test CHANGED
@@ -1,57 +1,21 @@
1
- やり方はいくらでもあでしょうけど、
1
+ visibility を追加すだけいけまた。
2
-
3
- max-width:600pxまでのときに、display:none に設定して、????を押したときに、jQuery側で表示非常時に設定すればいけるかと思います。
4
2
 
5
3
 
6
4
 
7
5
  ```CSS
8
6
 
9
- @media (max-width:600px){
7
+ nav.globalMenuSp {
10
8
 
11
- header ul{
9
+ visibility: hidden;
12
10
 
13
- /*display: flex;*/
11
+ }
14
12
 
15
- justify-content: center;
13
+ nav.globalMenuSp.active {
16
14
 
17
- flex-direction:column;
15
+ opacity: 100;
18
16
 
19
- z-index:70;
20
-
21
- display:none;
17
+ visibility: visible;
22
-
23
- }
24
18
 
25
19
  }
26
20
 
27
21
  ```
28
-
29
- ```jQuery
30
-
31
- $(function() {
32
-
33
- $('.hamburger').click(function() {
34
-
35
- $(this).toggleClass('active');
36
-
37
-
38
-
39
- if ($(this).hasClass('active')) {
40
-
41
- $('.globalMenuSp').addClass('active');
42
-
43
- $('header ul').css('display','flex');
44
-
45
- } else {
46
-
47
- $('.globalMenuSp').removeClass('active');
48
-
49
- $('header ul').css('display','none');
50
-
51
- }
52
-
53
- });
54
-
55
- });
56
-
57
- ```