質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

2回答

2197閲覧

ページ内リンクのスクロール時にハンバーガーメニューを閉じたい。

keisuke95

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/07/23 20:51

編集2022/01/12 10:55

前提・実現したいこと

ハンバーガーメニューのリンクからページ内リンク、スムーズスクロールを設定しています。ハンバーガーメニュー内のリンクをクリックし、移動すると同時にハンバーガーメニューを閉じたいと考えています。

ハンバーガーメニューのHTML、CSS、JavaScriptは一部ネットからのコピペがあります。他にも調べたのですが閉じるための記述が現状分かりません。

おそらく、<li class="nav-item">の中のaタグをクリックした時にJavaScriptで付与した.nav-openのクラスを削除するという動きだとは思うのですが、どのように記述すればいいか教えていただきたいです。

該当のソースコード

HTML

1<nav class="nav"> 2  <ul class="nav-list"> 3    <li class="nav-item"><a href="#campaign">campaign<span class="jp">キャンペーン</span></a></li> 4    <li class="nav-item"><a href="#point">point<span class="jp">店舗の強み</span></a></li> 5    <li class="nav-item"><a href="#facility">facility<span class="jp">施設紹介</span></a></li> 6    <li class="nav-item"><a href="#price">price<span class="jp">料金案内</span></a></li> 7    <li class="nav-item"><a href="#faq">faq<span class="jp">よくあるご質問</span></a></li> 8    <li class="nav-item"><a href="#access">access<span class="jp">アクセス</span></a></li> 9  </ul> 10 11  <ul class="btn-list"> 12    <li class="btn-item"><a href="">WEB入会はこちら</a></li> 13    <li class="btn-item"><a href="">見学・体験予約はこちら</a></li> 14    <li class="btn-item"><a href="">お問い合わせ</a></li> 15  </ul> 16</nav> 17 18<div class="hamburger" id="js-hamburger"> 19  <span class="hamburger__line hamburger__line--1"></span> 20  <span class="hamburger__line hamburger__line--2"></span> 21  <span class="hamburger__line hamburger__line--3"></span> 22</div> 23<div class="black-bg" id="js-black-bg"></div> 24

CSS

1.nav { 2 position: fixed; 3 right: -320px; 4 top: 0; 5 width: 300px; 6 height: 100vh; 7 padding-top: 40px; 8 background-color: #fff; 9 transition: all .6s; 10 z-index: 200; 11 overflow-y: auto; 12} 13.hamburger { 14 position: absolute; 15 right: 0; 16 top: 0; 17 width: 40px; 18 height: 40px; 19 cursor: pointer; 20 z-index: 300; 21} 22.nav-list { 23 margin: 0; 24 padding: 0; 25 list-style: none; 26} 27.nav-item { 28 text-align: center; 29 padding: 0 14px; 30} 31.nav-item a { 32 display: block; 33 padding: 8px 0; 34 border-bottom: 1px solid #eee; 35 text-decoration: none; 36 color: #111; 37} 38.nav-item a:hover { 39 background-color: #eee; 40} 41.hamburger__line { 42 position: absolute; 43 left: 11px; 44 width: 18px; 45 height: 1px; 46 background-color: #111; 47 transition: all .6s; 48} 49.hamburger__line--1 { 50 top: 14px; 51} 52.hamburger__line--2 { 53 top: 20px; 54} 55.hamburger__line--3 { 56 top: 26px; 57} 58.black-bg { 59 position: fixed; 60 left: 0; 61 top: 0; 62 width: 100vw; 63 height: 100vh; 64 z-index: 100; 65 background-color: #000; 66 opacity: 0; 67 visibility: hidden; 68 transition: all .6s; 69 cursor: pointer; 70} 71 72 73.nav-open .global-nav { 74 right: 0; 75} 76.nav-open .black-bg { 77 opacity: .8; 78 visibility: visible; 79} 80.nav-open .hamburger__line--1 { 81 transform: rotate(45deg); 82 top: 20px; 83} 84.nav-open .hamburger__line--2 { 85 width: 0; 86 left: 50%; 87} 88.nav-open .hamburger__line--3 { 89 transform: rotate(-45deg); 90 top: 20px; 91} 92 93/*ページ内リンク位置調整(ヘッダーの高さ分)*/ 94.anchor{ 95 display: block; 96 padding-top: 60px; 97 margin-top: -60px; 98} 99

JavaScript

1//ハンバーガーメニュー 2function toggleNav() { 3 var body = document.body; 4 var hamburger = document.getElementById('js-hamburger'); 5 var blackBg = document.getElementById('js-black-bg'); 6 7 hamburger.addEventListener('click', function() { 8 body.classList.toggle('nav-open'); 9 }); 10 blackBg.addEventListener('click', function() { 11 body.classList.remove('nav-open'); 12 }); 13 14} 15toggleNav(); 16 17//ページ内リンク 18$(function(){ 19 $('a[href^="#"]').click(function(){ 20 var speed = 500; 21 var href= $(this).attr("href"); 22 var target = $(href == "#" || href == "" ? 'html' : href); 23 var position = target.offset().top; 24 $("html, body").animate({scrollTop:position}, speed, "swing"); 25 return false; 26 }); 27 28});

補足情報(FW/ツールのバージョンなど)

参考にしたサイトです。```https://tech-dig.jp/hamburger-global-nav/

### 試したこと aタグにclass="close"を追加し、JavaScriptでclass="close"を取得しリンクをクリックした時に.nav-openのクラスを削除しハンバーガーメニューを閉じる。 これを試してみましたがエラーが出てしまいました。コードの書き方など間違っている可能性があります。 エラー↓ index.html:437 Uncaught TypeError: target.addEventListener is not a function at toggleNav (index.html:437)at index.html:442 変更点↓ css <li class="nav-item"><a href="#campaign" class="close">campaign<span class="jp">キャンペーン</span></a></li> JavaScript function toggleNav() { var body = document.body; var hamburger = document.getElementById('js-hamburger'); var blackBg = document.getElementById('js-black-bg'); hamburger.addEventListener('click', function() { body.classList.toggle('nav-open'); }); blackBg.addEventListener('click', function() { body.classList.remove('nav-open'); }); //追加したコード let target = document.getElementsByClassName('close'); target.addEventListener('click', function() { body.classList.remove('nav-open'); }); } toggleNav();

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/07/23 20:56

「スムーズスクロール」にあたる部分はどこでしょうか。 コピペは構わないかと思いますが、理解できていないコードをそのまま丸投げするのは結局理解につながらないので、やめたほうが良いかと思います。 せめて6割~ は書いたコードを理解しておくようにしましょう(全て理解すべきではありますけど)
keisuke95

2020/07/23 21:08

ご返信ありがとうございます。 本当にその通りですね。今後は理解するように気をつけます。 スムーズスクロールのコードを追記しました。
m.ts10806

2020/07/23 21:43

今からでも少しでも理解してその旨を追記しようとは思わない、ということでしょうか。お急ぎであれば質問して答えを待つのではなくクラウドワークスへどうぞ。
keisuke95

2020/07/23 21:57

そのようなつもりではなかったのですが気に障ったのであれば申し訳ありません。 ここで質問するまでにも色々調べてから質問させていただいています。
m.ts10806

2020/07/23 22:00

>そのようなつもりではなかったのですが気に障ったのであれば申し訳ありません。 いえ、気に障ったのではなく、ガイドラインに触ってます(丸投げは推奨していない質問) https://teratail.com/help/avoid-asking >ここで質問するまでにも色々調べてから質問させていただいています。 書いてないことは伝わらないので、その「色々調べた」ことは伝わりません。本当に何も調べず試さず丸投げする人もいるので、何も書いてなければ何もしてないままの丸投げであると解釈します。あくまで見るのは赤の他人なので。
keisuke95

2020/07/23 22:21

たしかに安易な質問でした。 自分でまた調べ直します。 ご返信ありがとうございました。
guest

回答2

0

書き込まれたコードをブラウザで試したところ
ナビゲーションが出てこない。
スクロール対象がない。
スクロール対象がないのでスムーススクロールしようがない。

そのため質問に答えるためにこちらで、ナビゲーションが表示されるようにし、
スクロール対象を作成しスムーススクロールを実装しないといけないため面倒でした。
ですので、次からは最低限、張り付けたコードで現状で出来ている動作はするように
したほうがよいと思います。

以下はhtmlファイルに張り付ければ動作するコードサンプルになります。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <title>test</title> 6 <style> 7 body { 8 margin: 0; 9 } 10 11 .nav { 12 position: fixed; 13 right: -320px; 14 top: 0; 15 width: 300px; 16 height: 100vh; 17 padding-top: 40px; 18 background-color: #fff; 19 transition: all .6s; 20 z-index: 200; 21 overflow-y: auto; 22 } 23 24 .start { 25 animation: anime 0.3s forwards; 26 } 27 28 @keyframes anime { 29 0% { 30 right: -320px; 31 } 32 33 10% { 34 right: -288px; 35 } 36 37 20% { 38 right: -256px; 39 } 40 41 30% { 42 right: -224px; 43 } 44 45 40% { 46 right: -192px; 47 } 48 49 50% { 50 right: -160px; 51 } 52 53 60% { 54 right: -128px; 55 } 56 57 70% { 58 right: -96px 59 } 60 61 80% { 62 right: -64px 63 } 64 65 90% { 66 right: -32px; 67 } 68 69 100% { 70 right: 0 71 } 72 73 } 74 75 .hamburger { 76 position: fixed; 77 cursor: pointer; 78 z-index: 300; 79 background-color: rgba(0, 0, 0, 0.5); 80 color: white; 81 padding: 0; 82 outline: none; 83 border: none; 84 display: inline-block; 85 right: 30px; 86 top: 20px; 87 width: 50px; 88 height: 50px; 89 font-size: 50px; 90 line-height: 55px; 91 } 92 93 .nav-list { 94 margin: 0; 95 padding: 0; 96 list-style: none; 97 } 98 99 .nav-item { 100 text-align: center; 101 padding: 0 14px; 102 } 103 104 .nav-item a { 105 display: block; 106 padding: 8px 0; 107 border-bottom: 1px solid #eee; 108 text-decoration: none; 109 color: #111; 110 } 111 112 .nav-item a:hover { 113 background-color: #eee; 114 } 115 116 .close { 117 position: fixed; 118 left: 0; 119 top: 0; 120 width: 100vw; 121 height: 100vh; 122 z-index: 100; 123 background-color: #000; 124 opacity: 0; 125 visibility: hidden; 126 transition: all .6s; 127 cursor: pointer; 128 } 129 130 .nav-open .global-nav { 131 right: 0; 132 } 133 134 .nav-open .close { 135 opacity: .8; 136 visibility: visible; 137 } 138 139 .nav-open .hamburger__line--1 { 140 transform: rotate(45deg); 141 top: 20px; 142 } 143 144 .nav-open .hamburger__line--2 { 145 width: 0; 146 left: 50%; 147 } 148 149 .nav-open .hamburger__line--3 { 150 transform: rotate(-45deg); 151 top: 20px; 152 } 153 154 .page01 { 155 text-align: center; 156 width: 100%; 157 height: 100vh; 158 background-position: center; 159 background-repeat: no-repeat; 160 background-color: rgba(230, 20, 20, 0.5); 161 position: relative; 162 } 163 164 .page01 div { 165 width: 60vw; 166 height: 40vw; 167 background-color: rgba(20, 20, 230, 0.5); 168 position: absolute; 169 top: 50%; 170 left: 50%; 171 transform: translate(-50%, -50%); 172 } 173 174 .page02 { 175 text-align: center; 176 width: 100%; 177 height: 100vh; 178 background-position: center; 179 background-repeat: no-repeat; 180 background-color: rgba(20, 20, 230, 0.5); 181 position: relative; 182 } 183 184 .page02 div { 185 width: 60vw; 186 height: 40vw; 187 background-color: rgba(230, 20, 20, 0.5); 188 position: absolute; 189 top: 50%; 190 left: 50%; 191 transform: translate(-50%, -50%); 192 } 193 194 .page03 { 195 text-align: center; 196 width: 100%; 197 height: 100vh; 198 background-position: center; 199 background-repeat: no-repeat; 200 background-color: rgba(20, 230, 20, 0.5); 201 position: relative; 202 } 203 204 .page03 div { 205 width: 60vw; 206 height: 40vw; 207 background-color: rgba(20, 20, 230, 0.5); 208 position: absolute; 209 top: 50%; 210 left: 50%; 211 transform: translate(-50%, -50%); 212 } 213 </style> 214</head> 215 216<body> 217 <nav id="navJs" class="nav"> 218 <ul class="nav-list"> 219 <li id="li01Js" class="nav-item">page01</li> 220 <li id="li02Js" class="nav-item">page02</li> 221 <li id="li03Js" class="nav-item">page03</li> 222 </ul> 223 224 <ul class="btn-list"> 225 <li class="btn-item"><a href="">WEB入会はこちら</a></li> 226 <li class="btn-item"><a href="">見学・体験予約はこちら</a></li> 227 <li class="btn-item"><a href="">お問い合わせ</a></li> 228 </ul> 229 </nav> 230 231 <button class="hamburger hide" id="burgerBtnJs">開</button> 232 <div id="page01Js" class="page01"> 233 <div> 234 235 </div> 236 </div> 237 <div id="page02Js" class="page02"> 238 <div> 239 240 </div> 241 </div> 242 <div id="page03Js" class="page03"> 243 <div> 244 245 </div> 246 </div> 247 <div class="close" id="closeJs"></div> 248 <script> 249 const body = document.body; 250 const hamburger = document.getElementById('burgerBtnJs'); 251 const blackBg = document.getElementById('closeJs'); 252 253 hamburger.addEventListener('click', function () { 254 body.classList.toggle('nav-open'); 255 navJs.classList.toggle("start"); 256 hamburger.innerText === "開" ? hamburger.innerText = "閉" : hamburger.innerText = "開" 257 }); 258 blackBg.addEventListener('click', function () { 259 hamburger.click(); 260 }); 261 262 const scroll = (target) => { 263 target.scrollIntoView({ 264 behavior: "smooth", 265 block: "end" 266 }) 267 } 268 269 const navItem = document.getElementsByClassName("nav-item"); 270 271 for (let i = 0, maxLen = navItem.length; i < maxLen; i++) { 272 navItem[i].addEventListener('click', () => { 273 hamburger.click(); 274 switch (i) { 275 case 0: 276 scroll(page01Js); 277 break; 278 case 1: 279 scroll(page02Js); 280 break; 281 case 2: 282 scroll(page03Js); 283 break; 284 } 285 }); 286 } 287 288 </script> 289</body> 290 291</html> 292

投稿2020/07/24 04:33

Jon_do

総合スコア1373

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

keisuke95

2020/07/24 07:34

お手数お掛けして申し訳ありません。丁寧なご回答ありがとうございます。 照らし合わせながら反映していきたいと思います。
guest

0

スムーススクロールの処理の最後か開始前などに
hamburger.click(); 
を追加したらOKだと思われます。

投稿2020/07/23 22:43

Jon_do

総合スコア1373

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

keisuke95

2020/07/23 23:28

ご返信ありがとうございます。 試してみたのですが開始前ではスクロールしなくなり、最後では変化がありませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問