teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問ハンバーガーメニュー、クリックするとメニューを閉じたい。

編集履歴

質問編集履歴

1

内容変更

2019/05/27 12:12

投稿

NireiMiyu
NireiMiyu

スコア14

test CHANGED
@@ -1 +1 @@
1
- スクロールしても背景画像を固定したままレスポンシブ化をしたい。
1
+ ハンバーガーメニュー、クリックするとメニューを閉じたい。
test CHANGED
@@ -1,12 +1,16 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- スクロールをしても、背景画像を固定するというパララックスデザインのホームページを作っています。
3
+ ハンバーガーメニューをクリックするとメニューを閉じるようにしたい。
4
-
5
- IOSに対応させたい為、Background-attachment:fixed は使わず、bodyにBefore:をつけて、背景画像をposion:fixedとopacityで固定し、スクロールさせる要素をwrapperで囲み、スクロールしても背景画像は動かないように配置したのですが、
4
+
6
-
7
- レスポンシブにするときに背景画像のサイズが指定できず、レスポンシブ化ができません。
8
-
9
- レスポンシブ化にする方法を教えてください。
5
+ 検索して試してみましたができませんでした。
6
+
7
+ Javascript初心者です。
8
+
9
+
10
+
11
+ 教えて頂けると助かります。
12
+
13
+
10
14
 
11
15
  ### 発生している問題・エラーメッセージ
12
16
 
@@ -22,29 +26,173 @@
22
26
 
23
27
  ### 該当のソースコード
24
28
 
25
-
26
-
27
- body:before {
28
-
29
- content:"";
30
-
31
- display:block;
32
-
33
- position:fixed;
34
-
35
- top:0;
36
-
37
- left:0;
38
-
39
- z-index:-1;
40
-
41
- width:100%;
42
-
43
- height:100vh;
44
-
45
- background:url(../images/DSCtapioka.png) center no-repeat;
46
-
47
- background-size:cover;
29
+ HTML
30
+
31
+
32
+
33
+ <div class="cP_cont">
34
+
35
+ <div class="cp_offcm01">
36
+
37
+ <input type="checkbox" id="cp_toggle01">
38
+
39
+ <label for="cp_toggle01"><span></span></label>
40
+
41
+ <div class="cp_menu">
42
+
43
+ <ul id="Grnav">
44
+
45
+ <li><a href="#concept">Concept</a></li>
46
+
47
+ <li><a href="#menu">Menu</a></li>
48
+
49
+ <li><a href="#access">Access</a></li>
50
+
51
+ <li><a href="https://www.hotpepper.jp/strJ000691781/yoyaku/">ご予約</a></li>
52
+
53
+ </ul>
54
+
55
+ </div>
56
+
57
+ </div>
58
+
59
+ </div>
60
+
61
+
62
+
63
+ css
64
+
65
+
66
+
67
+ .cP_cont {
68
+
69
+ position: fixed;
70
+
71
+ top: 3px;
72
+
73
+ right: 10px;
74
+
75
+ }
76
+
77
+ .cp_offcm01 {
78
+
79
+ display: inline-block;
80
+
81
+ }
82
+
83
+ /* menu */
84
+
85
+ .cp_offcm01 .cp_menu {
86
+
87
+ position: fixed;
88
+
89
+ top: -100vh;
90
+
91
+ left: 0;
92
+
93
+ width: 100%;
94
+
95
+ height: 100vh;
96
+
97
+ cursor: pointer;
98
+
99
+ -webkit-transition: 0.53s transform;
100
+
101
+ transition: 0.53s transform;
102
+
103
+ -webkit-transition-timing-function: cubic-bezier(.38,.52,.23,.99);
104
+
105
+ transition-timing-function: cubic-bezier(.38,.52,.23,.99);
106
+
107
+ background-color: #a0522d;
108
+
109
+ opacity: 0.8;
110
+
111
+ }
112
+
113
+ .cp_offcm01 .cp_menu ul {
114
+
115
+ margin: 0;
116
+
117
+ padding: 0;
118
+
119
+ }
120
+
121
+ .cp_offcm01 .cp_menu li {
122
+
123
+ list-style: none;
124
+
125
+ }
126
+
127
+ .cp_offcm01 .cp_menu li a {
128
+
129
+ display: block;
130
+
131
+ padding: 20px;
132
+
133
+ text-decoration: none;
134
+
135
+ color: #ffffff;
136
+
137
+ border-bottom: 1px solid #ffffff;
138
+
139
+
140
+
141
+ }
142
+
143
+
144
+
145
+ .cp_offcm01 #cp_toggle01 {
146
+
147
+ position: absolute;
148
+
149
+ display: none;
150
+
151
+ opacity: 0;
152
+
153
+ }
154
+
155
+ .cp_offcm01 #cp_toggle01:checked ~ .cp_menu {
156
+
157
+ -webkit-transform: translateY(100vh);
158
+
159
+ transform: translateY(calc(100vh + 1rem + 25px + 1rem));
160
+
161
+ }
162
+
163
+
164
+
165
+
166
+
167
+ .cp_offcm01 #cp_toggle01 ~ label::before {
168
+
169
+ font-family: 'FontAwesome';
170
+
171
+ content: '\039e';
172
+
173
+ color: #fff;
174
+
175
+ font-size: 2em
176
+
177
+ }
178
+
179
+ .cp_offcm01 #cp_toggle01:checked ~ label::before {
180
+
181
+ content: '\02715';
182
+
183
+ }
184
+
185
+
186
+
187
+ JS
188
+
189
+
190
+
191
+ $('#Grnav a[href]').on('click', function(event) {
192
+
193
+ $('.cP_cont').trigger('click');
194
+
195
+ });
48
196
 
49
197
 
50
198