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

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

新規登録して質問してみよう
ただいま回答率
85.50%
レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

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

CSS

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

Q&A

解決済

1回答

2607閲覧

HTMLとCSSだけでハンバーガーメニューを作成し、ページ内リンクの時もメニューが自動的に消えるようにしたい

Ni_Hi727

総合スコア11

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

HTML

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

CSS

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

0グッド

1クリップ

投稿2019/06/16 10:47

前提・実現したいこと

HTMLとCSSでWebサイトを作成しているのですが、PCでは画面上部に横並びでメニュー項目を表示させ、スマートフォン等ではレスポンシブに対応させてハンバーガーメニューで表示するようにWebサイトを作成しているのですが、ページ内リンクだとメニューが自動的に消えず困っております。
ハンバーガーメニューについてはこちらのサイト( https://saruwakakun.com/html-css/reference/nav-drawer )を参考に作成してみました。

解決の為にこちらのサイト( https://haniwaman.com/css-modal-drawer/ )を参考にしながらHTMLやCSSのコードをいじっているのですが、自分が至らないせいで文字自体が消えてしまったり、メニューが消えるようになってもリンク先に飛ばなくなる等なかなか思うようにいかず悩んでおります。

※過去にもハンバーガーメニューがページ内リンクだと消えないといった質問にて「:focus-within」で解決できると拝見しましたが、うまく解決できなかった事とEdgeやIEでは未対応らしいとの事なので、「:focus-within」は使用せずに解決できれば助かります。また、HTMLとCSSだけで解決できればと思います。

見にくいソースだと思いますがお教え頂けると幸いです。
何卒宜しくお願い致します。

該当のソースコード

HTML

1<body> 2 <header> 3 <div id="nav-drawer"> 4 <input id="nav-input" type="checkbox" class="nav-unshown"> 5 <label id="nav-open" for="nav-input"><span></span></label> 6 <label id="nav-close" class="nav-unshown" for="nav-input"></label> 7 8 <div id="nav-content"> 9 <nav> 10 <input id="nav-input" type="checkbox" class="nav-unshown"> 11 <label id="nav-close" class="nav-unshown" for="nav-input"></label> 12 <ul class="menu" id="menu"> 13 <li> 14 <a href="***.html"> 15 <span>別ページへ</span> 16 </a> 17 </li> 18 <li> 19 <a href="#area1"> 20 <span>ページ内リンク1</span> 21 </a> 22 </li> 23 <li> 24 <a href="#area2"> 25 <label for="nav-input"> 26 <span>ページ内リンク2</span> 27 </label> 28 </a> 29 </li> 30 <li> 31 <a href="#area3"> 32 <span>ページ内リンク3</span> 33 </a> 34 </li> 35 <li> 36 <a href="#area3"> 37 <span>ページ内リンク3</span> 38 </a> 39 </li> 40 </ul> 41 </header> 42 <div id="area1"></div> 43 <div id="area2"></div> 44 <div id="area3"></div> 45</body> 46</html>

CSS

1header{ 2 background-color: #ccc; 3 height: 50px; 4} 5 6#area1{ 7 height: 400px; 8 background-color: #b0c4de; 9} 10 11#area2{ 12 height: 600px; 13 background-color: #e6e6fa; 14} 15 16#area3{ 17 height: 400px; 18 background-color: #b0c4de; 19} 20 21.navi{ 22 background-color: #000; 23 background-repeat: no-repeat; 24 background-size: cover; 25 width: 100%; 26 height: auto; 27 flex-wrap: wrap; 28 -webkit-flex-wrap: wrap; 29 -ms-flex-wrap: wrap; 30} 31 32#nav-input { 33 display: none; 34} 35 36nav .menu { 37 display: -webkit-flex; 38 display: flex; 39 -ms-align-items: center; 40 align-items: center; 41} 42 43.menu { 44 font-size: 1.6rem; 45 list-style: none; 46 overflow: hidden; 47 padding-left: 0; 48 width: 1280px; 49 margin-left: auto; 50 margin-right: auto; 51 padding: 2rem 0; 52 53} 54 55.menu ul { 56 list-style: none; 57 display: flex; 58 display: -ms-flexbox; 59 display: -webkit-box; 60 display: -webkit-flex; 61 justify-content: flex-end; 62 margin-top: 0; 63 flex-wrap: wrap; 64 -webkit-flex-wrap: wrap; 65 -ms-flex-wrap: wrap; 66} 67 68.menu li { 69 display: inline-block; 70 vertical-align: middle; 71} 72 73.menu li:first-child { 74 margin-right: auto; 75 margin-left: 2rem; 76} 77 78 79.menu li:last-child { 80 margin-right: 2rem; 81} 82 83.menu li a { 84 display: block; 85 padding: 0px 20px 0px 20px; 86 text-decoration: none; 87} 88 89.menu li a span { 90 display: block; 91} 92 93.menu a:link { 94 color: #00008b; 95} 96 97.menu a:hover { 98 color: #4169e1; 99} 100 101.menu a:visited { 102 color: #00008b; 103} 104 105#close{ 106 display: none; 107} 108 109@media screen and (max-width: 768px) { 110 111 html { 112 width: 100%; 113 max-width: 767px; 114 height: auto; 115 } 116 117 body { 118 width: 100%; 119 max-width: 767px; 120 height: auto; 121 } 122 p { 123 display: block; 124 margin-left: auto; 125 margin-right: auto; 126 text-align: center; 127 font-size: 1.5rem; 128 } 129 130 .menu { 131 width: 100%; 132 height: auto; 133 font-size: 1.2rem; 134 padding: 1rem; 135 } 136 137 .menu li { 138 width: 22%; 139 } 140 141 .menu li a { 142 padding-left: 2%; 143 padding-right: 2%; 144 } 145 146 .menu li:nth-child(2){ 147 display: block; 148 } 149 150 .menu li:last-child { 151 width: 8%; 152 } 153 154 .menu li a span { 155 font-size: 0.7rem; 156 color: #00008b; 157 } 158 159/* ここからハンバーガーメニュー */ 160 161#nav-drawer { 162 position: relative; 163} 164 165/*チェックボックス等は非表示に*/ 166.nav-unshown { 167 display:none; 168} 169 170#nav-open { 171 display: inline-block; 172 width: 30px; 173 height: 38px; 174 vertical-align: middle; 175 position: absolute; 176 top: 1.5rem; 177 right: 3rem;*/ 178} 179 180#nav-open span, #nav-open span:before, #nav-open span:after { 181 position: absolute; 182 height: 4px; /*線の太さ*/ 183 width: 25px; /*長さ*/ 184 border-radius: 3px; 185 background: #555; 186 display: block; 187 content: ''; 188 cursor: pointer; 189} 190#nav-open span:before { 191 bottom: -8px; 192} 193#nav-open span:after { 194 bottom: -16px; 195} 196 197/*出てくるメニューの中身*/ 198 #nav-content { 199 overflow: auto; 200 position: fixed; 201 top: 0; 202 left: 0; 203 z-index: 9999;/*最前面に*/ 204 width: 90%;/*右側に隙間を作る(閉じるカバーを表示)*/ 205 max-width: 200px;/*最大幅*/ 206 height: 100%; 207 background: #fff;/*背景色*/ 208 transition: .3s ease-in-out;/*滑らかに表示*/ 209 -webkit-transform: translateX(-105%); 210 transform: translateX(-105%);/*左に隠しておく*/ 211} 212 213/*閉じる用の薄黒カバー部分*/ 214#nav-close { 215 display: none;/*はじめは隠しておく*/ 216 position: fixed; 217 z-index: 99; /* メニューよりも下に表示させる */ 218 top: 0;/*全体に広がるように*/ 219 left: 0; 220 width: 100%; 221 height: 100%; 222 background: black; 223 opacity: 0; 224 transition: .3s ease-in-out; 225} 226 227/*チェックが入ったら表示*/ 228 229#nav-input:checked ~ #nav-content { 230 -webkit-transform: translateX(0%); 231 transform: translateX(0%);/*中身を表示(右へスライド)*/ 232 box-shadow: 6px 0 25px rgba(0,0,0,.15); 233} 234 235/* クリックすると消える背景部分もここで表示 */ 236#nav-input:checked ~ #nav-close { 237 display: block;/*カバーを表示*/ 238 opacity: .5; 239} 240 241 /* ハンバーガーに入れたliの指定 */ 242 nav .menu { 243 display: -webkit-block; 244 display: block; 245 -ms-align-items: center; 246 align-items: center; 247 } 248 249 .menu li{ 250 width: 100%; 251 } 252 253 .menu li a span { 254 color: #000; 255 font-size: 1.5rem; 256 margin-bottom: 1rem; 257 }

試したこと

https://haniwaman.com/css-modal-drawer/
こちらのサイトで「for=""」の要素を作れば増やしていけると解釈し、<li>の中に入力していたリンクの指定の辺りで<label for="nav-input"><span for="nav-input">で囲んだり等やってみましたが、ページ内リンク先に移動する事とメニュー画面が消える事を同時に行う事ができませんでした。(「ページ内リンク2」の部分が「タップすると内部リンク先には飛ばないがメニューは消える」といった状態です)

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

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

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

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

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

guest

回答1

0

ベストアンサー

現在の :checked を使うつくりではスクリプトを使わないとできませんが、使うのがおすすめです。
どうしても HTML + CSS ということであれば、近いものが :target でできるかもしれません。
https://developer.mozilla.org/ja/docs/Web/CSS/:target

メニュー内の input と label をすべて削除し、<a>を追加。

HTML

1 <div id="nav-drawer"> 2 <!--input id="nav-input" type="checkbox" class="nav-unshown"> 3 <label id="nav-open" for="nav-input"><span></span></label> 4 <label id="nav-close" class="nav-unshown" for="nav-input"></label--> 5 <a id="nav-open" class="nav-unshown" href="#nav-content"><span></span></a>
</header> 直前に不足しているタグを補いつつ<a>を追加。 ```HTML </nav></div><a href="#nav-close" id="nav-close" class="nav-unshown"></a></div> </header> ```

:checked を :target へ

CSS

1/*#nav-input:checked ~ #nav-content {*/ 2#nav-content:target {

CSS

1/*#nav-input:checked ~ #nav-close {*/ 2#nav-content:target ~ #nav-close {

閉じたり開いたりすると履歴が増えていってしまうのが難点です。

投稿2019/06/19 05:45

x_x

総合スコア13749

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

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

Ni_Hi727

2019/06/21 12:54

ご丁寧な回答をありがとうございます! なるほど、:checkedを使用する場合はスクリプトとの併用が必要なのですね。 回答頂いた:targetを使用して試してみたところ、こちらで考えていたものに近い動作をするハンバーガーメニューができました! 両方試してみたのですが、今回は:checkedとスクリプトを併用したものを使用する事になりました。 :targetを使う方法は次回以降、作成するサイトによって使い分けていければと思います。 大変勉強になりました。 本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問