teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

8

修正しました

2021/12/25 03:53

投稿

free_teku
free_teku

スコア103

title CHANGED
File without changes
body CHANGED
@@ -284,10 +284,9 @@
284
284
  menuWidth = menu.outerWidth();
285
285
  });
286
286
 
287
-
288
-
289
287
 
290
288
  ```
289
+ こちらが本題です<(_ _)>
290
+ うまくいかない[サイト](https://jsfiddle.net/2p51m0xf/1/)
291
291
 
292
-
293
292
  ### 補足情報(FW/ツールのバージョンなど)

7

追記しました

2021/12/25 03:53

投稿

free_teku
free_teku

スコア103

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,8 @@
1
1
  ### 前提・実現したいこと
2
2
  複数ページにわたり、humburgerをクリックし、navを開いた時に、背景を固定させたい。
3
- 現状:Topページでは動いていますが他の階層ページでは、動いていないです。
3
+ 現状:Topページでは動いていますが他の階層ページ(blog)では、動いていないです。
4
+ **※blogのindex.htmlも同じCSSにしています。**
5
+ HTMLのclassに反応がないです!!
4
6
  ```固定させるjs
5
7
  $('html').removeclass('scroll-prevent') // 追記
6
8
  $('html').toggleClass('scroll-prevent') // 追記
@@ -14,7 +16,7 @@
14
16
 
15
17
 
16
18
  ### 該当のソースコード
17
-
19
+ 1つ目はTopページ↓
18
20
  ```
19
21
  <!DOCTYPE html>
20
22
  <html>
@@ -62,6 +64,55 @@
62
64
  </body>
63
65
  </html>
64
66
  ```
67
+
68
+ 仮のblog site
69
+ ```HTML
70
+ <!DOCTYPE html>
71
+ <html>
72
+ <head>
73
+ <meta charset="utf-8">
74
+ <meta name="viewport" content="width=device-width">
75
+ <title>Drawer</title>
76
+ <link rel="stylesheet" type="text/css" href="./../style.css">
77
+
78
+ </head>
79
+
80
+ <body>
81
+
82
+ <div class="wrapper">
83
+ <main>
84
+ <h1>ドロワーメニュー</h1>
85
+ <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p>
86
+ </main>
87
+ <div class="hamburger_button" href="">
88
+ <span></span>
89
+ <span></span>
90
+ <span></span>
91
+ </div>
92
+ <nav class="menu-trigger">
93
+ <ul>
94
+ <li><a href="../humberger-menu.html"></a></li>
95
+ <li>MENU</li>
96
+ <li>MENU</li>
97
+ </ul>
98
+ </nav>
99
+ <div class="overlay"></div>
100
+ </div>
101
+ <br>
102
+ <br>
103
+ <br>
104
+ <br>
105
+ <br>
106
+ <br>
107
+ <br>
108
+ <br>
109
+ <br>
110
+ <br>
111
+ <script src="../jquery-3.6.0.min.js"></script>
112
+ <script src="../script.js"></script>
113
+ </body>
114
+ </html>
115
+ ```
65
116
  ```CSS
66
117
 
67
118
 
@@ -204,11 +255,13 @@
204
255
  ```js
205
256
  $(function(){
206
257
  $('.hamburger_button').on('click',function(){
258
+ $('html').toggleClass('scroll-prevent')
207
259
  if($(this).hasClass('active')){
208
260
  $(this).removeClass('active');
209
261
  $('main').removeClass('open');
210
262
  $('.menu-trigger').removeClass('open');
211
263
  $('.overlay').removeClass('open');
264
+ $('html').removeclass('scroll-prevent') // 追記
212
265
  } else {
213
266
  $(this).addClass('active');
214
267
  $('main').addClass('open');
@@ -229,21 +282,10 @@
229
282
  menuBtn = $('.hamburger_button'),
230
283
  body = $(document.body),
231
284
  menuWidth = menu.outerWidth();
285
+ });
232
286
 
233
- $('html').removeclass('scroll-prevent') // 追記
234
287
 
235
- menuBtn.on('click', function(){
288
+
236
- body.toggleClass('open');
237
- $('html').toggleClass('scroll-prevent')
238
- if(body.hasClass('open')){
239
- body.animate({'right' : menuWidth }, 200);
240
- menu.animate({'right' : 0 }, 200);
241
- } else {
242
- menu.animate({'right' : -menuWidth }, 200);
243
- body.animate({'right' : 0 }, 200);
244
- }
245
- });
246
- });
247
289
 
248
290
  ```
249
291
 

6

修正しました

2021/12/24 09:28

投稿

free_teku
free_teku

スコア103

title CHANGED
File without changes
body CHANGED
@@ -73,6 +73,15 @@
73
73
  line-height: 1.5;
74
74
  margin: 0;
75
75
  }
76
+ .scroll-prevent {
77
+ /*動き固定*/
78
+ position: fixed;
79
+ /*奥行きを管理*/
80
+ z-index: -1;
81
+ /*下2つで背景を元のサイズのまま表示することができる*/
82
+ width: 100%;
83
+ height: 100%;
84
+ }
76
85
  * {
77
86
  box-sizing: border-box;
78
87
  }

5

簡略化させました

2021/12/24 09:14

投稿

free_teku
free_teku

スコア103

title CHANGED
File without changes
body CHANGED
@@ -1,58 +1,52 @@
1
1
  ### 前提・実現したいこと
2
2
  複数ページにわたり、humburgerをクリックし、navを開いた時に、背景を固定させたい。
3
3
  現状:Topページでは動いていますが他の階層ページでは、動いていないです。
4
+ ```固定させるjs
5
+ $('html').removeclass('scroll-prevent') // 追記
6
+ $('html').toggleClass('scroll-prevent') // 追記
7
+
8
+ ```
9
+ を使って、実装しようとしています。
4
10
 
5
11
  ### 試したこと
6
12
  下記のサイトを見て行いましたが、できませんでした。
7
13
  [背景を固定](https://qiita.com/ShintaroKoizumi/items/82107fe292f3847d634e)
8
14
 
15
+
9
16
  ### 該当のソースコード
10
17
 
11
- ```HTML
18
+ ```
12
19
  <!DOCTYPE html>
13
20
  <html>
14
21
  <head>
22
+ <meta charset="utf-8">
23
+ <meta name="viewport" content="width=device-width">
15
- <title></title>
24
+ <title>Drawer</title>
16
- <link href="../Top/asset/css/destyle.css" rel="stylesheet">
25
+ <link rel="stylesheet" type="text/css" href="./style.css">
17
- <link href="../Top/css/style.css" rel="stylesheet">
26
+
18
27
  </head>
28
+
19
29
  <body>
20
- <header class="header">
30
+
21
- <div class="header-inner">
31
+ <div class="wrapper">
32
+ <main>
33
+ <h1>ドロワーメニュー</h1>
34
+ <p>コンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツコンテンツ</p>
35
+ </main>
22
- <div class="header-left">
36
+ <div class="hamburger_button" href="">
23
- <nav class="nav drawer-nav">
24
- <ul class="header-list">
25
- <li class="header-item">
26
- <a href="../Room/room.html">お部屋</a>
27
- </li><!-- /.header-item -->
28
- <li class="header-item">
29
- <a href="#">お料理</a>
30
- </li><!-- /.header-item -->
31
- <li class="header-item">
32
- <a href="../Onsen/onsen.html">温泉</a>
33
- </li><!-- /.header-item -->
34
- </ul><!-- /.header-list -->
35
- </nav><!-- /.nav -->
37
+ <span></span>
38
+ <span></span>
39
+ <span></span>
36
- </div>
40
+ </div>
37
- <div class="header-right">
41
+ <nav class="menu-trigger">
38
- <div class="header-link" id="js-modal">
39
- <a class="calender-link js-modal-open" href="#">宿泊予約</a>
40
- </div><!-- /.header-link -->
41
- <button aria-controls="js-glabal-menu" aria-expanded="false" class="humburger" type="button"><span class="line"></span><span class="line"></span><span class="line"></span></button>
42
- </div><!-- /.header-right -->
43
- </div><!-- /.header-inner -->
44
- </header><!-- /.header -->
45
- <div class="overlay"></div><!-- /.overlay -->
46
- <main>
42
+ <ul>
47
- <div class="news-txt">
48
-     <time>202.12.01</time>
43
+ <li>MENU</li>
49
- <p class="news-desc">お休み させていただきます。
50
-     </p><!-- /.news-desc -->
51
- </div><!-- /.news-txt --></a>
52
- <div class="news-txt">
53
-     <time>202.12.01</time>
44
+ <li>MENU</li>
54
- <p class="news-desc">和室の改装を行いますため、</p><!-- /.news-desc -->
45
+ <li>MENU</li>
46
+ </ul>
47
+ </nav>
55
- </div><!-- /.news-txt --></a>
48
+ <div class="overlay"></div>
49
+ </div>
56
50
  <br>
57
51
  <br>
58
52
  <br>
@@ -63,321 +57,185 @@
63
57
  <br>
64
58
  <br>
65
59
  <br>
66
- <br>
67
- <br>
68
- <br>
69
- <br>
70
- <br>
71
- </main>
72
- <script src="../asserts/js/jquery-3.6.0.min.js">
60
+ <script src="./jquery-3.6.0.min.js"></script>
73
- </script>
74
- <script src="../asserts/js/script.js">
61
+ <script src="./script.js"></script>
75
- </script>
76
62
  </body>
77
63
  </html>
78
64
  ```
79
65
  ```CSS
80
- .header {
81
- position: fixed;
82
- top: 0;
83
- z-index: 999;
84
- width: 100%;
85
- max-height: 80px;
86
- background-color: transparent;
87
- display: -webkit-box;
88
- display: -webkit-flex;
89
- display: -ms-flexbox;
90
- display: flex;
91
- -webkit-box-pack: justify;
92
- -webkit-justify-content: space-between;
93
- -ms-flex-pack: justify;
94
- justify-content: space-between;
95
- padding: 10px 20px;
96
- }
97
66
 
98
- @media screen and (min-width: 600px) and (max-width: 1179px) {
99
- .header {
100
- position: fixed;
101
- top: 0;
102
- padding: 15px 20px;
103
- }
104
- }
105
67
 
68
+ @charset 'UTF-8';
106
69
 
107
-
108
- .header-inner {
70
+ body {
71
+ font-family: "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, "Meiryo UI", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
109
- max-width: 1880px;
72
+ font-size: 16px;
110
- width: 100%;
111
- display: -webkit-box;
112
- display: -webkit-flex;
113
- display: -ms-flexbox;
114
- display: flex;
115
- -webkit-box-align: center;
116
- -webkit-align-items: center;
117
- -ms-flex-align: center;
118
- align-items: center;
73
+ line-height: 1.5;
119
- margin: 0 auto;
74
+ margin: 0;
120
- box-sizing: border-box;
121
- -webkit-box-sizing: border-box;
122
- }
123
-
124
- .header-left {
125
- display: -webkit-box;
126
- display: -webkit-flex;
127
- display: -ms-flexbox;
128
- display: flex;
129
- -webkit-box-pack: left;
130
- -webkit-justify-content: left;
131
- -ms-flex-pack: left;
132
- justify-content: left;
133
- -webkit-box-align: center;
134
- -webkit-align-items: center;
135
- -ms-flex-align: center;
136
- align-items: center;
137
- }
138
-
139
- .header-left h1 {
140
- display: block;
141
- }
142
-
143
- @media screen and (max-width: 599px) {
144
- .header-left h1 {
145
- width: 100px;
146
75
  }
147
- }
148
-
149
- .header-left h1 .logo img {
150
- display: block;
151
- max-width: 130px;
152
- width: 100%;
76
+ * {
153
- height: 130px;
154
- margin: 20px 120px 20px 20px;
155
- }
156
-
157
- .header-left .nav {
158
- display: -webkit-box;
77
+ box-sizing: border-box;
159
- display: -webkit-flex;
160
- display: -ms-flexbox;
161
- display: flex;
162
- -webkit-box-pack: justify;
163
- -webkit-justify-content: space-between;
164
- -ms-flex-pack: justify;
165
- justify-content: space-between;
166
- -webkit-box-align: center;
167
- -webkit-align-items: center;
168
- -ms-flex-align: center;
169
- align-items: center;
170
- margin-left: 120px;
171
- }
172
-
173
- .header-left .nav-open {
174
- -webkit-transform: translateZ(0);
175
- transform: translateZ(0);
176
- }
177
-
178
- @media screen and (min-width: 600px) and (max-width: 1179px) {
179
- .header-left .nav {
180
- top: 80px;
181
- position: fixed;
182
- top: 150px;
183
- right: 0;
184
- z-index: 10;
185
- overflow: hidden;
186
- width: 16.25rem;
187
- background-color: #000;
188
- width: 50%;
189
- height: 60vh;
190
- -webkit-transform: translate(550px);
191
- transform: translate(550px);
192
- -webkit-transition: .5s;
193
- transition: .5s;
194
78
  }
79
+ ul {
195
- .header-left .nav-open {
80
+ list-style: none;
196
- -webkit-transform: translateZ(0);
81
+ margin: 0;
197
- transform: translateZ(0);
82
+ padding: 0;
198
83
  }
84
+
85
+ ------------------------------------------------- */
86
+ .wrapper {
87
+ height: 100%;
88
+ overflow-x: hidden;
89
+ position: relative;
199
- }
90
+ }
200
-
201
-
202
-
203
- .header-left .nav .header-list {
91
+ .overlay {
204
- display: -webkit-box;
92
+ content: "";
205
- display: -webkit-flex;
206
- display: -ms-flexbox;
207
- display: flex;
93
+ display: block;
94
+ width: 0;
208
- -webkit-box-align: center;
95
+ height: 0;
209
- -webkit-align-items: center;
96
+ background-color: rgba(0, 0, 0, 0.5);
210
- -ms-flex-align: center;
211
- align-items: center;
97
+ position: absolute;
98
+ top: 0;
99
+ left: 0;
100
+ z-index: 2;
212
- padding-top: 20px;
101
+ opacity: 0;
213
- padding-bottom: 20px;
102
+ transition: opacity .5s;
214
- }
103
+ }
215
-
216
- @media screen and (min-width: 600px) and (max-width: 1179px) {
217
- .header-left .nav .header-list {
104
+ .overlay.open {
105
+ width: 100%;
106
+ height: 100%;
107
+ opacity: 1;
108
+ }
109
+ main {
110
+ height: 100%;
111
+ min-height: 100vh;
218
- display: -webkit-box;
112
+ padding: 0 50px;
219
- display: -webkit-flex;
113
+ background-color: #eee;
220
- display: -ms-flexbox;
114
+ transition: all .5s;
221
115
  display: flex;
222
- -webkit-box-orient: vertical;
223
- -webkit-box-direction: normal;
224
- -webkit-flex-direction: column;
225
- -ms-flex-direction: column;
226
- flex-direction: column;
116
+ flex-direction: column;
117
+ justify-content: center;
118
+ }
119
+ main.open {
120
+ transform: translateX(-250px);
121
+ }
227
- margin: 100px;
122
+ main h1 {
228
123
  text-align: center;
229
- padding-left: 40px;
124
+ font-weight: 500;
230
125
  }
231
- }
232
-
233
-
234
- .header-left .nav .header-list .header-item {
235
- color: #fff;
126
+ main p {
236
- }
237
-
238
- @media screen and (min-width: 600px) and (max-width: 1179px) {
239
- .header-left .nav .header-list .header-item {
240
- padding-left: 20px;
127
+ text-align: center;
241
128
  }
129
+ .hamburger_button {
130
+ display: inline-block;
242
- }
131
+ width: 36px;
243
-
132
+ height: 28px;
244
-
245
-
246
- .header-left .nav .header-list .header-item + .header-item {
133
+ vertical-align: middle;
134
+ cursor: pointer;
135
+ position: fixed;
136
+ top: 30px;
247
- padding-left: 30px;
137
+ right: 30px;
248
- }
249
-
250
- @media screen and (min-width: 600px) and (max-width: 1179px) {
251
- .header-left .nav .header-list .header-item + .header-item {
252
- padding-left: 20px;
138
+ z-index: 100;
139
+
253
140
  }
254
- }
255
141
 
256
-
257
-
258
- .header-left .nav .header-list .header-item > a {
142
+ .hamburger_button span {
259
- color: #fff;
260
- display: inline-block;
143
+ display: inline-block;
144
+ box-sizing: border-box;
145
+ position: absolute;
146
+ left: 0;
147
+ width: 100%;
148
+ height: 4px;
261
- -webkit-transition: .3s;
149
+ background-color: #000;
262
- transition: .3s;
150
+ transition: all .5s;
263
- /* 0.3秒で拡大までの時間 */
264
- }
265
-
266
- @media screen and (min-width: 600px) and (max-width: 1179px) {
267
- .header-left .nav .header-list .header-item > a {
268
- padding-bottom: 65px;
269
- font-size: 2.4rem;
270
151
  }
271
- }
272
-
273
-
274
-
275
- .header-right {
276
- margin-left: auto;
277
- }
278
-
279
-
280
-
281
- .header-right .header-link {
152
+ .hamburger_button.active span {
282
- margin: 10px;
283
- }
284
-
285
- @media screen and (min-width: 600px) and (max-width: 1179px) {
286
- .header-right .header-link {
287
- margin-left: auto;
153
+ background-color: #fff;
288
154
  }
289
- }
290
-
291
- .header-right .header-link .calender-link {
155
+ .hamburger_button span:nth-of-type(1) {
292
- display: block;
293
- background-color: #978F10;
294
- text-decoration: none;
295
- font-weight: bold;
296
- -webkit-box-align: center;
297
- -webkit-align-items: center;
298
- -ms-flex-align: center;
299
- align-items: center;
300
- text-align: center;
301
- color: #fff;
156
+ top: 0;
302
- padding: 10px 37px;
303
- font-size: 1.6rem;
304
- -webkit-transition: .3s;
305
- transition: .3s;
306
- }
307
-
308
- @media screen and (min-width: 600px) and (max-width: 1179px) {
309
- .header-right .header-link .calender-link {
310
- margin-right: 100px;
311
157
  }
158
+ .hamburger_button.active span:nth-of-type(1) {
159
+ transform: translateY(12px) rotate(-45deg);
312
- }
160
+ }
313
-
161
+ .hamburger_button span:nth-of-type(2) {
314
-
315
-
316
-
317
-
318
- .overlay {
162
+ top: 12px;
163
+ }
319
- content: "";
164
+ .hamburger_button.active span:nth-of-type(2) {
320
- display: block;
165
+ opacity: 0;
166
+ }
167
+ .hamburger_button span:nth-of-type(3) {
168
+ bottom: 0;
169
+ }
170
+ .hamburger_button.active span:nth-of-type(3) {
171
+ transform: translateY(-12px) rotate(45deg);
172
+ }
173
+
174
+ .menu-trigger {
321
- width: 0;
175
+ width: 250px;
322
- height: 0;
176
+ height: 100%;
177
+ padding-top: 100px;
323
- background-color: rgba(0, 0, 0, 0.5);
178
+ background-color: rgb(16, 69, 153, 0.8);
324
- position: absolute;
179
+ position: fixed;
325
- top: 0;
180
+ top: 0;
326
- left: 0;
181
+ right: 0;
327
- z-index: 2;
182
+ z-index: 10;
328
- opacity: 0;
329
- -webkit-transition: opacity .5s;
183
+ transform: translate(250px);
330
- transition: opacity .5s;
184
+ transition: all .5s;
331
- }
185
+ }
332
-
333
- .overlay._open {
186
+ .menu-trigger.open {
334
- width: 100%;
335
- height: 100%;
187
+ transform: translateZ(0);
336
- opacity: 1;
337
- }
188
+ }
189
+ .menu-trigger li {
190
+ color: #fff;
191
+ text-align: center;
192
+ padding: 10px 0;
193
+ }
338
194
  ```
339
195
  ```js
340
196
  $(function(){
341
-
342
- $(".humburger").on('click', function(){
197
+ $('.hamburger_button').on('click',function(){
343
- $('html').toggleClass('scroll-prevent') // 背景を固定
344
-
345
- if($("this").hasClass('_active')){
198
+ if($(this).hasClass('active')){
346
- $(this).removeClass('_active');
199
+ $(this).removeClass('active');
347
- $(".line").removeClass('_open');
200
+ $('main').removeClass('open');
201
+ $('.menu-trigger').removeClass('open');
202
+ $('.overlay').removeClass('open');
203
+ } else {
204
+ $(this).addClass('active');
205
+ $('main').addClass('open');
206
+ $('.menu-trigger').addClass('open');
207
+ $('.overlay').addClass('open');
208
+ }
209
+ });
210
+ $('.overlay').on('click',function(){
211
+ if($(this).hasClass('open')){
212
+ $(this).removeClass('open');
213
+ $('.menu-trigger').removeClass('active');
214
+ $('main').removeClass('open');
215
+ $('.menu-trigger').removeClass('open');
216
+ }
217
+ });
348
218
 
349
- $(".nav").removeClass("nav-open");
350
- // $(".drawer-nav").removeClass('_active');
351
- $('.overlay').removeClass('_open');
352
-
353
- }
354
- else{
355
- $(this).addClass('_active');
219
+ var menu = $('.menu-trigger'),
356
- $('.line').addClass('_open');
220
+ menuBtn = $('.hamburger_button'),
357
-
221
+ body = $(document.body),
358
- $(".nav").addClass("nav-open");
222
+ menuWidth = menu.outerWidth();
359
- $('.drawer-nav').addClass('_open');
360
- $('.overlay').addClass('_open');
361
-
362
- }
363
223
 
224
+ $('html').removeclass('scroll-prevent') // 追記
225
+
226
+ menuBtn.on('click', function(){
227
+ body.toggleClass('open');
228
+ $('html').toggleClass('scroll-prevent')
229
+ if(body.hasClass('open')){
230
+ body.animate({'right' : menuWidth }, 200);
231
+ menu.animate({'right' : 0 }, 200);
232
+ } else {
233
+ menu.animate({'right' : -menuWidth }, 200);
234
+ body.animate({'right' : 0 }, 200);
235
+ }
364
- });
236
+ });
237
+ });
365
238
 
366
- $('.overlay').on('click',function(){
367
-
368
- $('html').toggleClass('scroll-prevent') // 固定解除
369
- if($(this).hasClass('_open')){
370
-
371
- $(this).removeClass('_open');
372
- $('.humburger').removeClass('_active');
373
- $('.line').removeClass('_open');
374
-
375
- $(".nav").removeClass('nav-open');
376
- // $('.drawer-nav').removeClass('_active');
377
-
378
- }
379
- });
380
- });
381
239
  ```
382
240
 
383
241
 

4

追記しました

2021/12/24 09:09

投稿

free_teku
free_teku

スコア103

title CHANGED
File without changes
body CHANGED
@@ -62,6 +62,12 @@
62
62
  <br>
63
63
  <br>
64
64
  <br>
65
+ <br>
66
+ <br>
67
+ <br>
68
+ <br>
69
+ <br>
70
+ <br>
65
71
  </main>
66
72
  <script src="../asserts/js/jquery-3.6.0.min.js">
67
73
  </script>

3

修正しました。

2021/12/24 06:40

投稿

free_teku
free_teku

スコア103

title CHANGED
File without changes
body CHANGED
@@ -53,7 +53,15 @@
53
53
      <time>202.12.01</time>
54
54
  <p class="news-desc">和室の改装を行いますため、</p><!-- /.news-desc -->
55
55
  </div><!-- /.news-txt --></a>
56
-
56
+ <br>
57
+ <br>
58
+ <br>
59
+ <br>
60
+ <br>
61
+ <br>
62
+ <br>
63
+ <br>
64
+ <br>
57
65
  </main>
58
66
  <script src="../asserts/js/jquery-3.6.0.min.js">
59
67
  </script>

2

Sp版の時と不要な要素は削除しました

2021/12/24 06:39

投稿

free_teku
free_teku

スコア103

title CHANGED
File without changes
body CHANGED
@@ -1,9 +1,9 @@
1
1
  ### 前提・実現したいこと
2
2
  複数ページにわたり、humburgerをクリックし、navを開いた時に、背景を固定させたい。
3
- 現状は、Topページでは動いていますが他の階層ページでは、動いていないです。
3
+ 現状:Topページでは動いていますが他の階層ページでは、動いていないです。
4
4
 
5
5
  ### 試したこと
6
- 下記のサイトを見て行いましたが、できませんでした。
6
+ 下記のサイトを見て行いましたが、できませんでした。
7
7
  [背景を固定](https://qiita.com/ShintaroKoizumi/items/82107fe292f3847d634e)
8
8
 
9
9
  ### 該当のソースコード
@@ -20,7 +20,6 @@
20
20
  <header class="header">
21
21
  <div class="header-inner">
22
22
  <div class="header-left">
23
- <h1 class="logo"><a href="../index.html"><img alt="" class="header-logo" src="../asserts/img/top-header-logo.png"></a></h1>
24
23
  <nav class="nav drawer-nav">
25
24
  <ul class="header-list">
26
25
  <li class="header-item">
@@ -44,6 +43,18 @@
44
43
  </div><!-- /.header-inner -->
45
44
  </header><!-- /.header -->
46
45
  <div class="overlay"></div><!-- /.overlay -->
46
+ <main>
47
+ <div class="news-txt">
48
+     <time>202.12.01</time>
49
+ <p class="news-desc">お休み させていただきます。
50
+     </p><!-- /.news-desc -->
51
+ </div><!-- /.news-txt --></a>
52
+ <div class="news-txt">
53
+     <time>202.12.01</time>
54
+ <p class="news-desc">和室の改装を行いますため、</p><!-- /.news-desc -->
55
+ </div><!-- /.news-txt --></a>
56
+
57
+ </main>
47
58
  <script src="../asserts/js/jquery-3.6.0.min.js">
48
59
  </script>
49
60
  <script src="../asserts/js/script.js">
@@ -78,15 +89,8 @@
78
89
  }
79
90
  }
80
91
 
81
- @media screen and (max-width: 599px) {
82
- .header {
83
- position: fixed;
84
- top: 0;
85
- padding: 8px 10px;
86
- max-height: 60px;
87
- }
88
- }
89
92
 
93
+
90
94
  .header-inner {
91
95
  max-width: 1880px;
92
96
  width: 100%;
@@ -180,27 +184,8 @@
180
184
  }
181
185
  }
182
186
 
183
- @media screen and (max-width: 599px) {
184
- .header-left .nav {
185
- top: 60px;
186
- position: fixed;
187
- z-index: 2;
188
- overflow: hidden;
189
- width: 16.25rem;
190
- background-color: rgba(0, 0, 0, 0.9);
191
- width: 75%;
192
- -webkit-transform: translate(550px);
193
- transform: translate(550px);
194
- -webkit-transition: margin-left .5s;
195
- transition: margin-left .5s;
196
- margin-left: 100px;
197
- }
198
- .header-left .nav-open {
199
- -webkit-transform: translateZ(0);
200
- transform: translateZ(0);
201
- }
202
- }
203
187
 
188
+
204
189
  .header-left .nav .header-list {
205
190
  display: -webkit-box;
206
191
  display: -webkit-flex;
@@ -231,11 +216,6 @@
231
216
  }
232
217
  }
233
218
 
234
- @media screen and (max-width: 599px) {
235
- .header-left .nav .header-list {
236
- margin: 0 auto;
237
- }
238
- }
239
219
 
240
220
  .header-left .nav .header-list .header-item {
241
221
  color: #fff;
@@ -247,13 +227,8 @@
247
227
  }
248
228
  }
249
229
 
250
- @media screen and (max-width: 599px) {
251
- .header-left .nav .header-list .header-item {
252
- padding: 0px;
253
- font-size: 2rem;
254
- }
255
- }
256
230
 
231
+
257
232
  .header-left .nav .header-list .header-item + .header-item {
258
233
  padding-left: 30px;
259
234
  }
@@ -264,12 +239,8 @@
264
239
  }
265
240
  }
266
241
 
267
- @media screen and (max-width: 599px) {
268
- .header-left .nav .header-list .header-item + .header-item {
269
- padding-left: 0px;
270
- }
271
- }
272
242
 
243
+
273
244
  .header-left .nav .header-list .header-item > a {
274
245
  color: #fff;
275
246
  display: inline-block;
@@ -285,25 +256,14 @@
285
256
  }
286
257
  }
287
258
 
288
- @media screen and (max-width: 599px) {
289
- .header-left .nav .header-list .header-item > a {
290
- -webkit-writing-mode: vertical-lr;
291
- -ms-writing-mode: tb-lr;
292
- writing-mode: vertical-lr;
293
- margin: 0 5vw;
294
- }
295
- }
296
259
 
260
+
297
261
  .header-right {
298
262
  margin-left: auto;
299
263
  }
300
264
 
301
- @media screen and (max-width: 599px) {
302
- .header-right {
303
- margin-left: 20px;
304
- }
305
- }
306
265
 
266
+
307
267
  .header-right .header-link {
308
268
  margin: 10px;
309
269
  }
@@ -337,29 +297,10 @@
337
297
  }
338
298
  }
339
299
 
340
- @media screen and (max-width: 599px) {
341
- .header-right .header-link .calender-link {
342
- padding: 8px 16px;
343
- font-size: 1.4rem;
344
- }
345
- }
346
300
 
347
- .header-right .header-link .calender-link::before {
348
- content: "";
349
- display: inline-block;
350
- margin: -3px 5px 0 0;
351
- background-image: url(../../../asserts/img/calender.png);
352
- background-repeat: no-repeat;
353
- background-size: contain;
354
- vertical-align: middle;
355
- width: 22px;
356
- height: 22px;
357
- }
358
301
 
359
- .header-right .header-link .calender-link:hover {
360
- background-color: #000;
361
- }
362
302
 
303
+
363
304
  .overlay {
364
305
  content: "";
365
306
  display: block;

1

修正しました

2021/12/24 06:38

投稿

free_teku
free_teku

スコア103

title CHANGED
@@ -1,1 +1,1 @@
1
- humburgerボタンの背景色が消えな
1
+ 複数ページにわたり、drawer-navを開いた時に、背景を固定させた
body CHANGED
File without changes