前提・実現したいこと
ドロップダウンメニューをスマホサイトに使いたいのですが
リンク先が押せない事態が発生しております。
メニューの一覧項目を押すとドロップダウンメニューが閉じるだけで
リンク先に飛びません。
ドロップダウンメニュー全体に閉じたり開いたりする
機能がかかってしまっているのだと思いますが直し方がわかりません。
どうかご指導よろしくお願いします。
該当のソースコード
HTML
1<div id="menu"> 2 3<div> 4<a href="#menu" class="menuopen"> 5<img src="画像URL" width="30px"> 6</a> 7 8<a href="#close" class="menuclose"> 9<img src="画像URL" width="30px"> 10</div> 11 12<ul> 13<li><a href="リンク先1URL">リンク先1</a></li> 14<li><a href="リンク先2URL">リンク先2</a></li> 15<li><a href="リンク先3URL">リンク先3</a></li> 16<li><a href="リンク先4URL">リンク先4</a></li> 17</ul> 18</div>
CSS
1/****メニュー全体****/ 2#menu{ 3 /*配置*/ 4 position: absolute; 5 top: 0; 6 left: 0; 7 width: 100%; 8 height: 100%; 9 pointer-events: none; 10 z-index: 100; 11} 12 13/****メニュー開閉ボタン****/ 14#menu div{ 15 /*デザイン*/ 16 width: 30px; 17 height: 30px; 18 background: rgba(200,200,200,1); 19 /*配置*/ 20 overflow: hidden; 21 position: absolute; 22 top: 0; 23 right: 0; 24margin-top:15px; 25} 26 27#menu .menuopen{ 28 /*デザイン*/ 29 color: rgba(255,255,255,1); 30 font-size: 20px; 31 /*配置*/ 32 display: block; 33 width: 100%; 34 height: 100%; 35 position: absolute; 36 top: 0; 37 left: 0; 38 pointer-events: auto; 39 40} 41 42#menu .menuclose{ 43 /*デザイン*/ 44 color: rgba(255,255,255,1); 45 font-size: 20px; 46 /*配置*/ 47 display: none; 48 width: 100%; 49 height: 100%; 50 position: absolute; 51 top: 0; 52 left: 0; 53 pointer-events: auto; 54 55} 56 57/****メニュー一覧****/ 58#menu ul{ 59 /*デザイン*/ 60 background: #bb3c21; 61 width: 100%; 62 /*配置*/ 63 position: absolute; 64 top: 30px; 65 right: 0; 66 margin-top:15px; 67 68} 69 70#menu li{ 71 /*アニメーション*/ 72 -webkit-transition: all 0.3s ease 0s; 73 transition: all 0.3s ease 0s; 74 /*デザイン*/ 75 padding: 0 10px; 76 color: rgba(0,0,0,1); 77 border-bottom: 0px rgba(255,255,255,1) solid; 78 height: 0; 79 /*配置*/ 80 overflow: hidden; 81 pointer-events: auto; 82 83} 84 85/****メニューオープン時****/ 86#menu:target .menuopen{ 87 /*配置*/ 88 display: none; 89 90} 91 92#menu:target .menuclose{ 93 /*配置*/ 94 display: block; 95 96} 97 98#menu:target li{ 99 /*デザイン*/ 100 padding: 10px; 101 height: 10px; 102 border-bottom: 1px rgba(255,255,255,1) solid; 103 104} 105
ソースを囲むように上下に「```」をそれぞれ付加してください
ありがとうございます。
綺麗にコードを表示し直しているときに
【HTML】
<a href="#close" class="menuclose">
<img src="画像URL" width="30px">
</a>←これを追加しているのを忘れていたことに気づきました!
</div>
とても恥ずかしいですが解決いたしました^^;ありがとうございました。
回答1件
あなたの回答
tips
プレビュー