前提・実現したいこと
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」の部分が「タップすると内部リンク先には飛ばないがメニューは消える」といった状態です)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/21 12:54