HTML6 は折りたたみメニューとアコーディオンメニューのサンプルコードを実装します

ページの主要部分:

<body> <ul id="メニュー">
          <li>   
                 <a href="#">第 1 レベル メニュー 1</a>
                 <ul>
                        <li>セカンダリメニュー 1-1</li>
                        <li>セカンダリメニュー 1-2</li>
                        <li>セカンダリメニュー 1-3</li>
                 </ul>       
          </li>
          <li>    
                  <a href="#">第 1 レベル メニュー 2</a>
                  <ul>
                        <li>セカンダリメニュー 2-1</li>
                        <li>セカンダリメニュー 2-2</li>
                        <li>セカンダリメニュー 2-3</li>
                  </ul>   
          </li>
          <li>
                  <a href="#">第 1 レベル メニュー 3</a>
                  <ul>
                        <li>セカンダリメニュー 3-1</li>
                        <li>セカンダリメニュー 3-2</li>
                        <li>セカンダリメニュー 3-3</li>
                  </ul> 
          </li>
          <li>
                  <a href="#">第 1 レベル メニュー 4</a>
                  <ul>
                        <li>セカンダリメニュー 4-1</li>
                        <li>セカンダリメニュー 4-2</li>
                        <li>セカンダリメニュー 4-3</li>
                  </ul> 
          </li>
  <ul>
</本文>

折りたたみメニューの例:

CSS部分

<ヘッド>
<スタイル タイプ="text/css">
li{
    list-style:none; リストの前のグラフィックを削除します}
li a{
    color:#123; 最初のレベルのメニューのテキストの色を設定します}
#メニュー ul{
    display:none; セカンダリメニューをデフォルトで表示しないように設定します}
#menu>li:hover ul{
    display:block; マウスを第1レベルのメニューの上に移動すると、第2レベルのメニューが表示されます}
</スタイル>
</head>

アコーディオンメニューの例:

CSS部分

<ヘッド>
<スタイル タイプ="text/css">
li{
    list-style:none; リストの前のグラフィックを削除します}
li a{
    color:#123; 最初のレベルのメニューのテキストの色を設定します}
#メニュー>li、#メニュー>li>a、#メニュー>li>ul{
    float:left; 最初のレベルのメニュー、2 番目のレベルのメニューは左に移動します}
#menu>li>a{
    表示:ブロック;
    背景色;赤;    
}
#menu>li:hover ul{
    表示:ブロック;
}
#メニュー>ul{
     表示:なし;
     幅:100ピクセル;
     背景色:#123;
     パディング上部:20px;
}
</スタイル>
</head>

要約する

上記は、エディターが紹介した折りたたみメニューとアコーディオンメニューを実装した HTML6 のサンプルコードです。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<: Vue v-for ループを書く 7 つの方法

>>: CSS3を使用してヘッダーアニメーション効果を作成する