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

質問編集履歴

3

cssも追加しました。

2020/07/09 12:46

投稿

sasaki_0000
sasaki_0000

スコア7

title CHANGED
File without changes
body CHANGED
@@ -79,7 +79,173 @@
79
79
  ```
80
80
 
81
81
  ```scss
82
+ nav {
83
+ width: 100%;
84
+ height: 15vh;
85
+ position: relative;
86
+ background: #ffffff;
87
+ z-index: 9999;
88
+ }
82
89
 
90
+ .drawer {
91
+ display: flex;
92
+ flex-direction: row;
93
+ align-items: center;
94
+ justify-content: space-between;
95
+ position: relative;
96
+ height: 15vh;
97
+ padding: 0 2em;
98
+ }
99
+
100
+ .navbar_brand {
101
+ text-align: center;
102
+ width: 100%;
103
+
104
+ img{
105
+ width: 30vw;
106
+ margin: 0 0 0 5.5em;
107
+ }
108
+ }
109
+
110
+ .navbar_toggle {
111
+ z-index: 100;
112
+ padding: 2em;
113
+ }
114
+
115
+ .navbar_toggle_icon {
116
+ position: relative;
117
+ display: block;
118
+ height: 2px;
119
+ width: 40px;
120
+ padding: 0 1.2em;
121
+ background: #000000;
122
+ -webkit-transition: ease .5s;
123
+ transition: ease .5s;
124
+
125
+ &:nth-child(1) {
126
+ top: 0;
127
+ }
128
+
129
+ &:nth-child(2) {
130
+ margin: 8px 0;
131
+ }
132
+
133
+ &:nth-child(3) {
134
+ top: 0;
135
+ }
136
+ }
137
+
138
+ /*OPEN時の動き*/
139
+
140
+ .navbar_toggle.open .navbar_toggle_icon {
141
+ &:nth-child(1) {
142
+ top: 10px;
143
+ -webkit-transform: rotate(45deg);
144
+ transform: rotate(45deg);
145
+ }
146
+
147
+ &:nth-child(2) {
148
+ -webkit-transform: translateY(-50%);
149
+ transform: translateY(-50%);
150
+ opacity: 0;
151
+ }
152
+
153
+ &:nth-child(3) {
154
+ top: -10px;
155
+ -webkit-transform: rotate(-45deg);
156
+ transform: rotate(-45deg);
157
+ }
158
+ }
159
+
160
+ .menu-sp {
161
+ -webkit-transform: translateX(-100%);
162
+ transform: translateX(-100%);
163
+ -webkit-transition: ease .5s;
164
+ transition: ease .5s;
165
+ background-color: #ff6347;
166
+ height: 100vh;
167
+
168
+ ul {
169
+ width: 80%;
170
+ margin: 0 auto;
171
+ padding: 3em 0;
172
+
173
+ li {
174
+ padding: 1em 0;
175
+ width: 100%;
176
+
177
+ a {
178
+ color: white;
179
+ text-decoration: none;
180
+ font-size: 1.3em;
181
+ }
182
+
183
+ .child-menu{
184
+ padding: 1em 0;
185
+ margin: 0 0 0 2em;
186
+
187
+ li{
188
+ padding: 0.5em 0;
189
+ width: 100%;
190
+
191
+ a{
192
+ color: white;
193
+ text-decoration: none;
194
+ font-size: 1.1em;
195
+ }
196
+ }
197
+ }
198
+ }
199
+ }
200
+
201
+ &.open {
202
+ -webkit-transform: translateX(0);
203
+ transform: translateX(0);
204
+ overflow-y: auto;
205
+ -webkit-overflow-scrolling: touch;
206
+ height: 100vh;
207
+ }
208
+ }
209
+
210
+ /*OPEN時の動き*/
211
+
212
+ @media screen and (min-width: 992px) {
213
+ nav {
214
+ display: flex;
215
+ flex-direction: row;
216
+ }
217
+
218
+ .navbar_toggle {
219
+ display: none;
220
+ }
221
+
222
+ .menu-sp {
223
+ width: 100%;
224
+ -webkit-transform: translateX(0);
225
+ transform: translateX(0);
226
+
227
+ ul {
228
+ height: 70px;
229
+ display: flex;
230
+ flex-wrap: wrap;
231
+ justify-content: flex-end;
232
+ align-items: center;
233
+
234
+ li {
235
+ padding: 0 1em;
236
+ border-bottom: none;
237
+ }
238
+ }
239
+ }
240
+ }
241
+
242
+ .tel-menu-sp{
243
+ background-color: #ffffff;
244
+ padding: 2em;
245
+ width: 80%;
246
+ margin: 0 auto 3em auto;
247
+ }
248
+
83
249
  ```
84
250
 
85
251
  ### 試したこと

2

htmlの追加

2020/07/09 12:46

投稿

sasaki_0000
sasaki_0000

スコア7

title CHANGED
File without changes
body CHANGED
@@ -19,6 +19,69 @@
19
19
  });
20
20
  ```
21
21
 
22
+ ```html
23
+ <header class="d-block d-lg-none l-header menu-bg">
24
+ <nav>
25
+ <div class="drawer">
26
+ <a class="navbar_brand" href="<?php echo esc_url( home_url('') ); ?>"><img src="<?php bloginfo('template_directory'); ?>/assets/common/images/common/logo.svg" alt=""></a>
27
+ <div class="navbar_toggle">
28
+ <span class="navbar_toggle_icon"></span>
29
+ <span class="navbar_toggle_icon"></span>
30
+ <span class="navbar_toggle_icon"></span>
31
+ </div>
32
+ </div>
33
+ <div class="menu-sp">
34
+ <ul>
35
+ <li><a href="#"><strong>SAMPLE</strong></a></li>
36
+ <li><a href="#"><strong>SAMPLE</strong></a></li>
37
+ <li><a href="#"><strong>SAMPLE</strong></a></li>
38
+ <li>
39
+ <a href="#"><strong>SAMPLE</strong></a>
40
+ <ul class="child-menu">
41
+ <li><a href="#">SAMPLE</a></li>
42
+ </ul>
43
+ </li>
44
+ <li>
45
+ <a href="#"><strong>SAMPLE</strong></a>
46
+ <ul class="child-menu">
47
+ <li><a href="#">SAMPLE</a></li>
48
+ </ul>
49
+ </li>
50
+ <li>
51
+ <a href="#"><strong>SAMPLE</strong></a>
52
+ <ul class="child-menu">
53
+ <li><a href="#">SAMPLE</a></li>
54
+ <li><a href="#">SAMPLE</a></li>
55
+ </ul>
56
+ </li>
57
+ <li>
58
+ <a href="#"><strong>SAMPLE</strong></a>
59
+ <ul class="child-menu">
60
+ <li><a href="#">SAMPLE</a></li>
61
+ </ul>
62
+ </li>
63
+ </ul>
64
+ <div>
65
+ <ul class="btn-li-sp">
66
+ <li>
67
+ <a href="#" class="button-sp mr-3"><i class="far fa-envelope fa-lg fa-fw"></i> Request document</a>
68
+ </li>
69
+ </ul>
70
+ </div>
71
+ <div class="tel-menu-sp">
72
+ <img src="<?php bloginfo('template_directory'); ?>/assets/common/images/common/tel-en.svg" class="w100">
73
+ </div>
74
+ </div>
75
+ </div>
76
+ </nav>
77
+ <?php wp_head(); ?>
78
+ </header>
79
+ ```
80
+
81
+ ```scss
82
+
83
+ ```
84
+
22
85
  ### 試したこと
23
86
 
24
87
  https://qiita.com/Scheme/items/300739f6da6a95e58306

1

2020/07/09 12:43

投稿

sasaki_0000
sasaki_0000

スコア7

title CHANGED
@@ -1,1 +1,1 @@
1
- sqriptで追加したクラスをもう一度クリックした時に削除したいです。
1
+ scriptで追加したクラスをもう一度クリックした時に削除したいです。
body CHANGED
File without changes