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

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

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

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

HTML

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

CSS

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

Q&A

解決済

1回答

891閲覧

css だけで実装するハンバーガーメニューで、aタグ使うと不具合発生

ryujno

総合スコア19

CSS3

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

HTML

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

CSS

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

0グッド

1クリップ

投稿2019/07/27 04:03

#ハンバーガーメニューのコンテンツ内にaタグ使うと表示されなくなりました。

サルワカにしたがって、ハンバーガーメニューを作ったのですが......
CSSだけで簡単!ハンバーガーメニューの作り方(スマホ対応)

メニュー内の表示、つまり後に引用するHTML文の内、以下で不具合が発生します。

HTML

1<div class="header-item global-menu"> 2 <ul> 3 <li class="global-menu-item"> 4 <a href="#">HOME</a> 5 <li> 6     <!--略--> 7 </ul> 8</div>

上記のようにしていると、ドロワーとして横から出てくる白いベタ色、およびその上に表示される筈の文字が表示されなくなりました。

いくらかいじってみていると、どうやらリンクのaタグ、HOMEを囲んでいるaタグが悪さをしているようです。
テストで、以下のように、aタグを削除して、ただの文字列にしたら問題なく表示されました。

HTML

1 <li class="global-menu-item"> 2       HOME 3 <li>

ただ、やはりページ遷移のためのドロワーであるため、aタグ使えないのは流石に困ってしまうのですが、
解決する手段、どなたかわかるでしょうか??

ちなみに、サルワカサイトでデモ画面として用意されているcodepenで、
aタグを使った場合は、特に問題なく表示されました。

となると、私の書いた別部分のコードとの相性がよくなかった。ということだとは思うのですが、
2時間ほど探してもどこが悪いのか検討がつかず、お伺いする次第です。

何卒宜しくお願いいたします。

以下が、該当部分のHTML/CSSです。

HTML

1 <header> 2 <div class="header-area"> 3 <div class="header-item logo"> 4 <h1><a href="#">SITE NAME<a></h1> 5 </div> 6 <!-- for humberger nav-menu --> 7 <div id="nav-drawer"> 8 <input id="nav-input" type="checkbox" name="nav-input" class="nav-unshown"> 9 <label id="nav-open" for="nav-input"><span></span></label> 10 <label class="nav-unshown" id="nav-close" for="nav-input"></label> 11 <div class="header-item global-menu" id="nav-content"> 12 <ul> 13 <li class="global-menu-item"> 14 <a href="#">HOME</a> 15 </li><span class="global-menu-slash">/</span> 16 <li class="global-menu-item"> 17 <a href="#">ABOUT</a> 18 </li><span class="global-menu-slash">/</span> 19 <li class="global-menu-item"> 20 <a href="#">WORK</a> 21 </li><span class="global-menu-slash">/</span> 22 <li class="global-menu-item"> 23 <a href="#">LESSON</a> 24 </li> 25 </ul> 26 </div> 27 </div> 28 </div> 29 </header>

css

1/*===================================== 2* header 3*=====================================*/ 4.header-area { 5 display: flex; 6 flex-direction: row; 7 justify-content: flex-end; 8 padding: 30px 30px; 9 width: 100%; 10 line-height: 1.5; 11 background-color: #ffffff; 12} 13 14.header-item.logo h1 a { 15 font-size: 2.0rem; 16} 17 18.header-item:first-child { 19 margin-right: auto; 20} 21 22.logo a { 23 color: #460000; 24} 25 26.header-item.global-menu ul { 27 color: #460000; 28} 29 30.global-menu { 31 text-align: end; 32} 33 34.global-menu-item { 35 display: inline-block; 36 margin: 0 30px; 37} 38 39 40li.global-menu-item a { 41 display: inline-block; 42 text-decoration: none; 43 color: #460000; 44 font-size: 1.6rem; 45 font-weight: bold; 46 line-height: 40px; 47} 48 49.global-menu-item a::after { 50 content: ''; 51 display: block; 52 width: 0; 53 margin: -8px auto 0; 54 border-bottom: 4px solid #460000; 55 transition: width 0.1s ease-in-out; 56} 57 58.global-menu-item a:hover::after { 59 width: 100%; 60} 61 62.global-menu-item a:hover { 63 color: #460000; 64 transition: 0.1s; 65} 66 67#nav-open, 68#nav-input { 69 display: none; 70} 71 72/*===================================== 73* header for sp 74*=====================================*/ 75 76@media(max-width: 768px) { 77 .header-item.logo h1 a { 78 font-size: 1.2rem; 79 } 80 81 .header-area { 82 padding: 20px 20px; 83 } 84 85 .global-menu-slash { 86 display: none; 87 } 88 89 /* humberger nav-menu*/ 90 #nav-drawer { 91 position: relative; 92 } 93 94 /*チェックボックス等は非表示に*/ 95 .nav-unshown { 96 display: none; 97 } 98 99 /*アイコンのスペース*/ 100 #nav-open { 101 display: inline-block; 102 width: 30px; 103 height: 22px; 104 vertical-align: middle; 105 } 106 107 /*ハンバーガーアイコンをCSSだけで表現*/ 108 #nav-open span, 109 #nav-open span:before, 110 #nav-open span:after { 111 position: absolute; 112 height: 3px; 113 /*線の太さ*/ 114 width: 25px; 115 /*長さ*/ 116 border-radius: 3px; 117 background: #460000; 118 display: block; 119 content: ''; 120 cursor: pointer; 121 } 122 123 #nav-open span:before { 124 bottom: -8px; 125 } 126 127 #nav-open span:after { 128 bottom: -16px; 129 } 130 131 /*閉じる用の薄黒カバー*/ 132 #nav-close { 133 display: none; 134 position: fixed; 135 z-index: 99; 136 top: 0; 137 138 left: 0; 139 width: 100%; 140 height: 100%; 141 background: black; 142 opacity: 0; 143 transition: .2s ease-in-out; 144 } 145 146 147 /*中身*/ 148 #nav-content { 149 overflow: auto; 150 position: fixed; 151 top: 0; 152 left: 0; 153 z-index: 9999; 154 /*最前面に*/ 155 width: 80%; 156 /*右側に隙間を作る(閉じるカバーを表示)*/ 157 max-width: 330px; 158 /*最大幅(調整してください)*/ 159 height: 100%; 160 background: #fff; 161 /*背景色*/ 162 transition: .2s ease-in-out; 163 /*滑らかに表示*/ 164 -webkit-transform: translateX(-105%); 165 transform: translateX(-105%); 166 /*左に隠しておく*/ 167 } 168 169 /*チェックが入ったらもろもろ表示*/ 170 #nav-input:checked~#nav-close { 171 display: block; 172 /*カバーを表示*/ 173 opacity: .5; 174 } 175 176 #nav-input:checked~#nav-content { 177 -webkit-transform: translateX(0%); 178 transform: translateX(0%); 179 /*中身を表示(右へスライド)*/ 180 box-shadow: 6px 0 25px rgba(0, 0, 0, .15); 181 } 182 183}

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

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

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

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

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

Lhankor_Mhy

2019/07/27 04:47

ご提示のコードを当方で試してみましたが、『ドロワーとして横から出てくる白いベタ色、およびその上に表示される筈の文字が表示されなくなりました』という問題が再現しませんでした。 https://jsfiddle.net/Lhankor_Mhy/jc58awov/ ryujnoさんの環境では、↑のページで問題が再現しますか? 問題が再現するのであれば、環境に原因があると思います。 問題が再現しないのであれば、ご提示いただいていない部分に問題があるかもしれません。 ご確認ください。
ryujno

2019/07/27 08:18 編集

ありがとうございます! 試してみたところ、問題が再現しませんでした。 となると、仰っていただいた通り、他の部分に原因があるのかもしれません。 ただ、どの部分かの見当がさっぱりついていないので、もう少し見てみます。 ありがとうございます。
guest

回答1

0

自己解決

ありがとうございました!
発見しました!

非常に情けないミスだったのですが、
該当箇所の直前にある部分の書き損じでした。

<h1><a href="#">SITE NAME<a></h1> と、いう風に、</a>でとじれていなかったというミスでした。

お騒がせしてすみません。ありがとうございました。

投稿2019/07/27 08:32

ryujno

総合スコア19

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問