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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

JavaScript

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

Q&A

解決済

1回答

1222閲覧

ページ内リンクでハンバーガーメニューが閉じない

mammaluce

総合スコア1

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

メニュー

メニューは、UIにおける仕組みであり、ユーザに機能の表示と実行する手段を与えます。

JavaScript

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

0グッド

0クリップ

投稿2021/10/06 12:45

前提・実現したいこと

ウェブサイト作成中で、教本を参考に作成しておりますが、
ハンバーガーメニューでページ内リンク(id 指定)に飛ぶとメニューが閉じません。
他の色々なサイトや、こちらでも検索しましたが、
JavaScript の記載がそれぞれ異なり、
JavaScript については、
恥ずかしながらわからないため、こちらにて質問いたしました。

補足:JavaScript はhtml 内の記載となります。

該当のソースコード

html

1<header class="site-header"> 2 <nav class="headerNav"> 3 <ul> 4 <li class="navItem navItemTop en"> 5 <a href="index.html">Top</a> 6 </li> 7 <li class="navItem navItemConcept en"> 8 <a href="#0_concept">Concept</a> 9 </li> 10 <li class="navItem navItemMenu en"> 11 <a href="#1_menu">Menu</a> 12 </li> 13 <li class="navItem navItemMenu2 en"> 14 <a href="#2_menu2">Menu2</a> 15 </li> 16 <li class="navItem navItemMenu3 en"> 17 <a href="#3_menu3">Menu3</a> 18 </li> 19 <li class="navItem navItemMenu4 en"> 20 <a href="#4_menu4">Menu4</a> 21 </li> 22 <li class="navItem navItemProfile en"> 23 <a href="#5_profile">Profile</a> 24 </li> 25 </ul> 26 </nav> 27 28 <div class="container"> 29 <button type="button" class="nav-button" onClick="navFunc()"> 30 <span class="sr-only">MENU</span> 31 </button> 32 </div>

css

1/* ナビゲーションボタン */ 2.nav-button { 3 box-sizing: content-box; 4 padding: 0; 5 outline: none; 6 border: none; 7 background: none; 8 width: 30px; 9 height: 20px; 10 cursor: pointer; 11 color: #735D48; 12} 13 14.nav-button::before, 15.nav-button::after { 16 content: ''; 17 display: block; 18 height: 1px; 19 background-color: currentColor; 20 transform: translateY(10px); 21 transition: 0.3s ease-in-out; 22} 23 24.nav-button::before { 25 transform: translateY(-10px); 26 box-shadow: 0 10px currentColor; 27} 28 29 /* ナビゲーションボタン(閉じるボタン) */ 30 .open .nav-button { 31 z-index: 1000; 32 } 33 .open .nav-button::before { 34 transform: rotate(-45deg); 35 box-shadow: none; 36 } 37 .open .nav-button::after { 38 transform: rotate(45deg); 39 box-shadow: none; 40 } 41} 42 43 44/* ナビゲーションメニュー:(開いた状態) */ 45html.open, .open body { 46 height: 100%; 47 overflow: hidden; 48} 49 50.open .site-header { 51 position: relative; 52 margin-bottom: -100px; 53} 54 55.open .headerNav { 56 position: absolute; 57 top: 0; 58 left: 0; 59 width: 100%; 60 height: 100vh; 61 background: rgba(255,255,255,0.8); 62 color: #735D48; 63 display: flex; 64 justify-content: center; 65 align-items: center; 66} 67 68.open .headerNav ul { 69 margin-bottom: 5px; 70} 71 72.open .headerNav li:not(:last-child) { 73 margin-bottom: 5px; 74} 75 76/* ナビゲーションメニュー(閉じた状態) */ 77.headerNav { 78 width: 0; 79 height: 0; 80 position: absolute; 81 right: 100%; 82 overflow: hidden; 83 color: transparent; 84 transition: 0.5s ease-in-out; 85} 86 87 88/* ナビゲーションメニュー */ 89 .navItem a { 90 display: block; 91 padding: 20px 0 15px; 92 margin-left: 20px; 93 text-align: center; 94 font-size: 18px; 95 color: #735D48; 96 font-weight: bold; 97 } 98 99@media (max-height: 630px) { 100 .navItem a { 101 display: block; 102 padding: 10px 0 5px; 103 margin-left: 20px; 104 text-align: center; 105 font-size: 14px; 106 color: #735D48; 107 font-weight: bold; 108 } 109} 110 111@media (min-width: 801px) { 112 .navItem a { 113 display: block; 114 padding: 30px 0 30px; 115 margin-left: 20px; 116 text-align: center; 117 font-size: 24px; 118 color: #735D48; 119 font-weight: bold; 120 } 121} 122 123 124/* 擬似要素でテキストを表示 */ 125 .navItem a::after { 126 display: block; 127 margin-top: 2px; 128 font-family: 'RocknRoll One', sans-serif; 129 font-size: 10px; 130 font-weight: lighter; 131 } 132 133 .navItemTop a::after { 134 content: "トップ"; 135 } 136 .navItemConcept a::after { 137 content: "コンセプト"; 138 } 139 .navItemMenu a::after { 140 content: "メニュー"; 141 } 142 .navItemDNAA a::after { 143 content: "メニュー2"; 144 } 145 .navItemREIKI a::after { 146 content: "メニュー3"; 147 } 148 .navItemMAXM a::after { 149 content: "メニュー4"; 150 } 151 .navItemProfile a::after { 152 content: "プロフィール"; 153 } 154} 155 156@media (min-width: 801px) { 157 .navItem a::after { 158 display: block; 159 margin-top: 2px; 160 font-family: 'RocknRoll One', sans-serif; 161 font-size: 20px; 162 font-weight: lighter; 163 } 164} 165

JavaScript

1<script> 2function navFunc() { 3 document.querySelector('html').classList.toggle('open'); 4} 5</script>

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

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

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

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

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

guest

回答1

0

ベストアンサー

手っ取り早いのは

JavaScript

1function navFuncClose() { 2 document.querySelector('html').classList.remove('open'); 3}

を用意しておいて、

HTML

1<a href="#0_concept" onClick="navFuncClose()">Concept</a>

のようにすることですね。

投稿2021/10/06 13:14

itagagaki

総合スコア8402

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

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

mammaluce

2021/10/06 13:19

早速のご回答、ありがとうございます!! いただいた内容でJavaScript を追記し、それぞれのページ内リンクにも追記したところ、無事にメニューを閉じることができました! 本当にありがとうございます!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問