質問編集履歴
2
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -107,26 +107,69 @@
|
|
|
107
107
|
font-weight: 900;
|
|
108
108
|
font-size: 1.2rem;
|
|
109
109
|
}
|
|
110
|
-
|
|
110
|
+
.header-menu {
|
|
111
|
-
position: absolute;
|
|
112
|
-
right: 8%;
|
|
113
|
-
display:
|
|
111
|
+
display: none;
|
|
114
|
-
font-size: 2rem;
|
|
115
|
-
top: 30%;
|
|
116
112
|
}
|
|
117
|
-
.
|
|
113
|
+
.header-sub {
|
|
118
|
-
|
|
114
|
+
display: none;
|
|
119
|
-
font-weight: 200;
|
|
120
|
-
|
|
115
|
+
}
|
|
116
|
+
.nav-button {
|
|
117
|
+
display: none;
|
|
118
|
+
}
|
|
119
|
+
.nav-button, .nav-button span {
|
|
120
|
+
display: inline-block;
|
|
121
|
+
transition: all 0.4s;
|
|
122
|
+
box-sizing: border-box;
|
|
123
|
+
}
|
|
124
|
+
.nav-button {
|
|
125
|
+
z-index: 20;
|
|
126
|
+
position: relative;
|
|
127
|
+
width: 40px;
|
|
128
|
+
height: 0px;
|
|
129
|
+
}
|
|
130
|
+
.nav-button span {
|
|
131
|
+
position: absolute;
|
|
132
|
+
left: 800%;
|
|
133
|
+
width: 100%;
|
|
134
|
+
height: 4px;
|
|
135
|
+
background-color: #333;
|
|
136
|
+
border-radius: 4px;
|
|
137
|
+
}
|
|
138
|
+
.nav-button span:nth-of-type(1) {
|
|
139
|
+
margin: 25% 0 0 0;
|
|
140
|
+
}
|
|
141
|
+
.nav-button span:nth-of-type(2) {
|
|
142
|
+
margin: 45% 0 0 0;
|
|
143
|
+
}
|
|
144
|
+
.nav-button span:nth-of-type(3) {
|
|
145
|
+
margin: 65% 0 0 0;
|
|
146
|
+
}
|
|
147
|
+
.nav-button.active span:nth-of-type(1) {
|
|
148
|
+
-webkit-transform: translateY(16px) rotate(-45deg);
|
|
149
|
+
transform: translateY(16px) rotate(-45deg);
|
|
150
|
+
}
|
|
151
|
+
.nav-button.active span:nth-of-type(2) {
|
|
152
|
+
opacity: 0;
|
|
153
|
+
}
|
|
154
|
+
.nav-button.active span:nth-of-type(3) {
|
|
155
|
+
-webkit-transform: translateY(-16px) rotate(45deg);
|
|
156
|
+
transform: translateY(-16px) rotate(45deg);
|
|
157
|
+
}
|
|
158
|
+
#gloval-nav.open {
|
|
159
|
+
display: block;
|
|
160
|
+
}
|
|
121
161
|
|
|
122
|
-
#gloval-nav {
|
|
162
|
+
#gloval-nav.close {
|
|
123
|
-
|
|
163
|
+
display: none;
|
|
124
164
|
}
|
|
125
165
|
#gloval-nav ul {
|
|
126
166
|
background: rgb(76,76,76,0.8);
|
|
127
|
-
|
|
167
|
+
position: relative;
|
|
168
|
+
top: -35px;
|
|
128
|
-
padding:
|
|
169
|
+
padding: 10% 0 100% 0;
|
|
129
170
|
width: 100%;
|
|
171
|
+
|
|
172
|
+
|
|
130
173
|
}
|
|
131
174
|
#gloval-nav li {
|
|
132
175
|
font-size: 1em;
|
1
修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -26,11 +26,11 @@
|
|
|
26
26
|
<img class="img-blue" src="https://writer-station.com/img/front/pc_img/logo_ttl_blue.svg" alt="">
|
|
27
27
|
<p>WRITER STATION<br><span class="big">ライターステーション</span><p></a>
|
|
28
28
|
</div>
|
|
29
|
-
|
|
30
|
-
<div id="nav-toggle">
|
|
31
|
-
|
|
29
|
+
<a class="nav-button" href="#">
|
|
32
|
-
<
|
|
30
|
+
<span></span>
|
|
31
|
+
<span></span>
|
|
32
|
+
<span></span>
|
|
33
|
-
</
|
|
33
|
+
</a>
|
|
34
34
|
<div id="gloval-nav">
|
|
35
35
|
<nav>
|
|
36
36
|
<ul>
|
|
@@ -142,15 +142,27 @@
|
|
|
142
142
|
```
|
|
143
143
|
```js
|
|
144
144
|
<script>
|
|
145
|
+
if (window.matchMedia( '(min-width: 410px)and(max-width: 740px)' ).matches) {
|
|
145
|
-
$(function() {
|
|
146
|
+
$(function() {
|
|
146
|
-
|
|
147
|
+
$('.nav-button').on('click', function() {
|
|
147
|
-
|
|
148
|
+
if ($(this).hasClass('active')) {
|
|
149
|
+
$(this).removeClass('active');
|
|
150
|
+
$('#gloval-nav')
|
|
151
|
+
.addClass('close')
|
|
152
|
+
.removeClass('open');
|
|
153
|
+
} else {
|
|
154
|
+
$(this).addClass('active');
|
|
155
|
+
$('#gloval-nav')
|
|
156
|
+
.addClass('open')
|
|
157
|
+
.removeClass('close');
|
|
158
|
+
}
|
|
148
159
|
});
|
|
149
160
|
});
|
|
161
|
+
}
|
|
150
162
|
</script>
|
|
151
163
|
```
|
|
152
164
|
### 前提・実現したいこと
|
|
153
|
-
レスポンシブ対応のためにハンバーガメニューを作っているのですが、
|
|
165
|
+
レスポンシブ対応のためにハンバーガメニューを作っているのですが、gloval-navを表示非表示をしたいにですが、toggleやhideを使っても上手くいきません。
|
|
154
166
|
まず現時点のjsが機能しません。cssでdislay: none;にしてからjsでshowにしてもダメでした。
|
|
155
167
|
どこが間違っているのでしょうか？
|
|
156
168
|
あと、ネットなどでハンバーガメニューの作り方を見た際にspanを使ってやられている例が多かったのですが、どちらのやり方の方が、今回のサイトにふさわしいのでしょうか？
|