質問編集履歴
7
試したことの追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -173,4 +173,39 @@
|
|
|
173
173
|
|
|
174
174
|
### 補足情報（FW/ツールのバージョンなど）
|
|
175
175
|
参考にしたサイトです。```https://tech-dig.jp/hamburger-global-nav/
|
|
176
|
-
```
|
|
176
|
+
```
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
### 試したこと
|
|
180
|
+
|
|
181
|
+
aタグにclass="close"を追加し、JavaScriptでclass="close"を取得しリンクをクリックした時に.nav-openのクラスを削除しハンバーガーメニューを閉じる。
|
|
182
|
+
これを試してみましたがエラーが出てしまいました。コードの書き方など間違っている可能性があります。
|
|
183
|
+
エラー↓
|
|
184
|
+
index.html:437 Uncaught TypeError: target.addEventListener is not a function at toggleNav (index.html:437)at index.html:442
|
|
185
|
+
|
|
186
|
+
変更点↓
|
|
187
|
+
css
|
|
188
|
+
<li class="nav-item"><a href="#campaign" class="close">campaign<span class="jp">キャンペーン</span></a></li>
|
|
189
|
+
|
|
190
|
+
JavaScript
|
|
191
|
+
|
|
192
|
+
function toggleNav() {
|
|
193
|
+
var body = document.body;
|
|
194
|
+
var hamburger = document.getElementById('js-hamburger');
|
|
195
|
+
var blackBg = document.getElementById('js-black-bg');
|
|
196
|
+
|
|
197
|
+
hamburger.addEventListener('click', function() {
|
|
198
|
+
body.classList.toggle('nav-open');
|
|
199
|
+
});
|
|
200
|
+
|
|
201
|
+
blackBg.addEventListener('click', function() {
|
|
202
|
+
body.classList.remove('nav-open');
|
|
203
|
+
});
|
|
204
|
+
|
|
205
|
+
//追加したコード
|
|
206
|
+
let target = document.getElementsByClassName('close');
|
|
207
|
+
target.addEventListener('click', function() {
|
|
208
|
+
body.classList.remove('nav-open');
|
|
209
|
+
});
|
|
210
|
+
}
|
|
211
|
+
toggleNav();
|
6
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -4,8 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
ハンバーガーメニューのHTML、CSS、JavaScriptは一部ネットからのコピペがあります。他にも調べたのですが閉じるための記述が現状分かりません。
|
|
6
6
|
|
|
7
|
-
<li class="nav-item">の中のaタグをクリックした時にJavaScriptで付与した.nav-openのクラスを削除するという動きだとは思うのですが
|
|
7
|
+
おそらく、<li class="nav-item">の中のaタグをクリックした時にJavaScriptで付与した.nav-openのクラスを削除するという動きだとは思うのですが、どのように記述すればいいか教えていただきたいです。
|
|
8
|
-
どのように記述すればいいか教えていただきたいです。
|
|
9
8
|
|
|
10
9
|
|
|
11
10
|
### 該当のソースコード
|
5
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
ハンバーガーメニューのリンクからページ内リンク、スムーズスクロールを設定しています。ハンバーガーメニュー内のリンクをクリックし、移動すると同時にハンバーガーメニューを閉じたいと考えています。
|
|
4
4
|
|
|
5
5
|
ハンバーガーメニューのHTML、CSS、JavaScriptは一部ネットからのコピペがあります。他にも調べたのですが閉じるための記述が現状分かりません。
|
|
6
|
+
|
|
7
|
+
<li class="nav-item">の中のaタグをクリックした時にJavaScriptで付与した.nav-openのクラスを削除するという動きだとは思うのですが
|
|
6
8
|
どのように記述すればいいか教えていただきたいです。
|
|
7
9
|
|
|
8
10
|
|
4
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
ハンバーガーメニューのリンクからページ内リンク、スムーズスクロールを設定しています。ハンバーガーメニュー内のリンクをクリックし、移動すると同時にハンバーガーメニューを閉じたいと考えています。
|
|
4
4
|
|
|
5
|
-
ハンバーガーメニューのHTML、CSS、JavaScriptは一部ネットからのコピペ
|
|
5
|
+
ハンバーガーメニューのHTML、CSS、JavaScriptは一部ネットからのコピペがあります。他にも調べたのですが閉じるための記述が現状分かりません。
|
|
6
6
|
どのように記述すればいいか教えていただきたいです。
|
|
7
7
|
|
|
8
8
|
|
3
コードの追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -125,6 +125,14 @@
|
|
|
125
125
|
transform: rotate(-45deg);
|
|
126
126
|
top: 20px;
|
|
127
127
|
}
|
|
128
|
+
|
|
129
|
+
/*ページ内リンク位置調整（ヘッダーの高さ分）*/
|
|
130
|
+
.anchor{
|
|
131
|
+
display: block;
|
|
132
|
+
padding-top: 60px;
|
|
133
|
+
margin-top: -60px;
|
|
134
|
+
}
|
|
135
|
+
|
|
128
136
|
```
|
|
129
137
|
|
|
130
138
|
|
2
コードの追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -131,6 +131,7 @@
|
|
|
131
131
|
|
|
132
132
|
|
|
133
133
|
```JavaScript
|
|
134
|
+
//ハンバーガーメニュー
|
|
134
135
|
function toggleNav() {
|
|
135
136
|
var body = document.body;
|
|
136
137
|
var hamburger = document.getElementById('js-hamburger');
|
|
@@ -145,6 +146,19 @@
|
|
|
145
146
|
|
|
146
147
|
}
|
|
147
148
|
toggleNav();
|
|
149
|
+
|
|
150
|
+
//ページ内リンク
|
|
151
|
+
$(function(){
|
|
152
|
+
$('a[href^="#"]').click(function(){
|
|
153
|
+
var speed = 500;
|
|
154
|
+
var href= $(this).attr("href");
|
|
155
|
+
var target = $(href == "#" || href == "" ? 'html' : href);
|
|
156
|
+
var position = target.offset().top;
|
|
157
|
+
$("html, body").animate({scrollTop:position}, speed, "swing");
|
|
158
|
+
return false;
|
|
159
|
+
});
|
|
160
|
+
|
|
161
|
+
});
|
|
148
162
|
```
|
|
149
163
|
|
|
150
164
|
|
1
コードの修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -8,28 +8,29 @@
|
|
|
8
8
|
|
|
9
9
|
### 該当のソースコード
|
|
10
10
|
```HTML
|
|
11
|
-
|
|
11
|
+
<nav class="nav">
|
|
12
|
-
|
|
12
|
+
<ul class="nav-list">
|
|
13
|
-
|
|
13
|
+
<li class="nav-item"><a href="#campaign">campaign<span class="jp">キャンペーン</span></a></li>
|
|
14
|
-
|
|
14
|
+
<li class="nav-item"><a href="#point">point<span class="jp">店舗の強み</span></a></li>
|
|
15
|
-
|
|
15
|
+
<li class="nav-item"><a href="#facility">facility<span class="jp">施設紹介</span></a></li>
|
|
16
|
-
|
|
16
|
+
<li class="nav-item"><a href="#price">price<span class="jp">料金案内</span></a></li>
|
|
17
|
-
|
|
17
|
+
<li class="nav-item"><a href="#faq">faq<span class="jp">よくあるご質問</span></a></li>
|
|
18
|
-
|
|
18
|
+
<li class="nav-item"><a href="#access">access<span class="jp">アクセス</span></a></li>
|
|
19
|
-
|
|
19
|
+
</ul>
|
|
20
|
+
|
|
20
|
-
|
|
21
|
+
<ul class="btn-list">
|
|
21
|
-
|
|
22
|
+
<li class="btn-item"><a href="">WEB入会はこちら</a></li>
|
|
22
|
-
|
|
23
|
+
<li class="btn-item"><a href="">見学・体験予約はこちら</a></li>
|
|
23
|
-
|
|
24
|
+
<li class="btn-item"><a href="">お問い合わせ</a></li>
|
|
24
|
-
|
|
25
|
+
</ul>
|
|
25
|
-
|
|
26
|
+
</nav>
|
|
26
27
|
|
|
27
|
-
|
|
28
|
+
<div class="hamburger" id="js-hamburger">
|
|
28
|
-
|
|
29
|
+
<span class="hamburger__line hamburger__line--1"></span>
|
|
29
|
-
|
|
30
|
+
<span class="hamburger__line hamburger__line--2"></span>
|
|
30
|
-
|
|
31
|
+
<span class="hamburger__line hamburger__line--3"></span>
|
|
31
|
-
|
|
32
|
+
</div>
|
|
32
|
-
|
|
33
|
+
<div class="black-bg" id="js-black-bg"></div>
|
|
33
34
|
|
|
34
35
|
```
|
|
35
36
|
```CSS
|