回答編集履歴
2
コードの修正
test
CHANGED
|
@@ -12,6 +12,10 @@
|
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
|
|
15
|
+
**追記：改修後の問題の出てるソースを修正したものに書き換えました。これで動作確認お願いします。**
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
15
19
|
```html
|
|
16
20
|
|
|
17
21
|
<!DOCTYPE html>
|
|
@@ -34,7 +38,9 @@
|
|
|
34
38
|
|
|
35
39
|
<style>
|
|
36
40
|
|
|
37
|
-
|
|
41
|
+
/*PC版メニューのデザイン*/
|
|
42
|
+
|
|
43
|
+
body { background-color: #e9967a; }
|
|
38
44
|
|
|
39
45
|
.menu-container { margin: 0; }
|
|
40
46
|
|
|
@@ -50,8 +56,6 @@
|
|
|
50
56
|
|
|
51
57
|
|
|
52
58
|
|
|
53
|
-
.modal-overlay { background-color: rgba(0, 0, 0, 0.6); display: none; height: 120%; left: 0; position: fixed; top: 0; width: 100%; }
|
|
54
|
-
|
|
55
59
|
|
|
56
60
|
|
|
57
61
|
@media screen and (max-width: 768px) {
|
|
@@ -84,7 +88,7 @@
|
|
|
84
88
|
|
|
85
89
|
/*メニューの中身*/
|
|
86
90
|
|
|
87
|
-
.menu-container .menu { -webkit-transform: translate(-50%, -50%); display: none
|
|
91
|
+
.menu-container .menu { -webkit-transform: translate(-50%, -50%); display: block;/*noneから変更してみました*/ height: auto; left: 50%; position: fixed; top: 50%; transform: translate(-50%, -50%); width: 100%; z-index: 100; }
|
|
88
92
|
|
|
89
93
|
.menu-container .menu .menu-item a { color:#fff; border-right: none; }
|
|
90
94
|
|
|
@@ -92,6 +96,20 @@
|
|
|
92
96
|
|
|
93
97
|
.menu-container .menu .menu-item:last-child a { border-bottom: none; }
|
|
94
98
|
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
/*オーバーレイ →こちらに移動しました*/
|
|
102
|
+
|
|
103
|
+
.modal-overlay { background-color: rgba(0, 0, 0, 0.6); display: none; height: 120%; left: 0; position: fixed; top: 0; width: 100%; }
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
.menu-container { display: none;}
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
.menu-container.active { display: block;}
|
|
112
|
+
|
|
95
113
|
}
|
|
96
114
|
|
|
97
115
|
</style>
|
|
@@ -112,12 +130,18 @@
|
|
|
112
130
|
|
|
113
131
|
$(this).toggleClass('active');
|
|
114
132
|
|
|
133
|
+
$('.menu-container').toggleClass('active');
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
|
115
137
|
} else {
|
|
116
138
|
|
|
117
139
|
$('header').removeClass('modal-overlay');
|
|
118
140
|
|
|
119
141
|
$(this).toggleClass('active');
|
|
120
142
|
|
|
143
|
+
$('.menu-container').toggleClass('active');
|
|
144
|
+
|
|
121
145
|
}
|
|
122
146
|
|
|
123
147
|
});
|
1
コードの修正
test
CHANGED
|
@@ -92,22 +92,6 @@
|
|
|
92
92
|
|
|
93
93
|
.menu-container .menu .menu-item:last-child a { border-bottom: none; }
|
|
94
94
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
.menu-container .menu {
|
|
98
|
-
|
|
99
|
-
display: none;
|
|
100
|
-
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
.active {
|
|
106
|
-
|
|
107
|
-
display: block;
|
|
108
|
-
|
|
109
|
-
}
|
|
110
|
-
|
|
111
95
|
}
|
|
112
96
|
|
|
113
97
|
</style>
|