シンプルな単一レベルのドロップダウン メニューの実装_html/css_WEB-ITnose

効果プレビュー

これは、純粋な CSS を使用した単純な単一レベルのドロップダウン メニューです。マウスをメニュー タイトルの上に移動すると、ドロップダウン メニューが表示されます。

基本的な考え方

メニューがカーソルの下にあるときは表示し、それ以外の時間は非表示にします。この処理はまず :hover 疑似クラスを考えて実装する必要がありますが、通常の状態ではメニューが非表示になっており、:hover をトリガーする方法がないため、疑似クラスを直接使用することはできません。 、ドロップダウン メニューが非表示になっている場合でも、メニュー タイトルは表示されます。カーソルがメニューの下にあるときはメニューが表示されますが、マウスをメニュー上に移動すると、ドロップダウン メニューが表示されます。このとき、ドロップダウンメニューに:hover を追加して表示することを考えましたが、想像力が広すぎる場合は、分割メニューをコンテナに入れてどうするか?今回は、タグのネスト関係を使用して、コンテナの :hover 疑似クラスの派生要素のスタイルを記述すれば、すべてが完了します。

HTMLの構造

 1 <ul id="dropdown-wrapper"> 2 <li> 3     <span>Rewrite</span> 4     <ul class="dropdown-sublist"> 5         <li>Kotarou</li> 6         <li>Kotori</li> 7         <li>Akane</li> 8         <li>Kagari</li> 9         <li>Lucia</li>10         <li>Shizuru</li>11         <li>Chihaya</li>12     </ul>13 </li>14 <li>15     <span>Clannad</span>16     <ul class="dropdown-sublist">17         <li>Tomoya</li>18         <li>Nagisa</li>19         <li>Ushio</li>20         <li>Ryou</li>21         <li>Kyou</li>22         <li>Yukine</li>23         <li>Fuko</li>24         <li>Tomoyo</li>25         <li>Kotomi</li>26     </ul>27 </li>28 <li>29     <span>Air</span>30     <ul class="dropdown-sublist">31         <li>Yukito</li>32         <li>Misuzu</li>33         <li>Kano</li>34         <li>Minagi</li>35     </ul>36 </li>37 </ul>

CSS

実装のポイントは、ビックリマークの付け方と、ドロップダウンメニューの表示・非表示の属性の記述ルールにあります。同時に、メニュー表示をより自然にするために、いくつかのグラデーションと翻訳が追加されました。

れー