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

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を使用してヘッダーアニメーション効果を作成する

推薦する

PHP クラスにおける static と self の違いの簡単な分析

メソッドが定義されているクラスに応じて、現在のクラスへの静的参照を取得するには、self:: または...

Linux の chown コマンドと chmod コマンドの違いの詳細な説明

Linux システムでは、chmod コマンドと chown コマンドの両方を使用して権限を設定でき...

フロントエンドのパフォーマンス最適化 - フロントエンドエンジニアが話し合うべき問題点

はじめに<br />前回の記事「私の CSS アーキテクチャ コンセプト」では、公園で友...

Linux7で仮想ホストを実装する3つの方法

1. 同じIPアドレス、異なるポート番号仮想ホスト 1: ホスト IP アドレスは 172.16.3...

Vueコンポーネントドキュメントを自動生成する方法を分析する

目次1. 現状2. コミュニティソリューション2.1 事業レビュー3. 技術的ソリューション3.1....

数千万データを持つMySQLテーブルを最適化する実践記録

序文まずここで説明させてください。インターネット上では、Alibaba では 500 万のデータを異...

Vueカスタムディレクティブを使用してドラッグアンドドロッププラグインを構築する方法

HTML5 のドラッグ アンド ドロップ機能は誰もが知っていますが、これを使用するとドラッグ アンド...

MySQL ビューの原則分析

目次更新可能なビュービューのパフォーマンスビューの制限ビューは MySQL 5.0 以降で導入されま...

SQL文のANDとORの実行順序で発生する問題

質問昨日、データベースSQLを書いているときに問題が発生しました。問題の根本は、SQL ステートメン...

React Hooks に基づく小さな状態管理の詳細な説明

目次React Hooks に基づく状態共有の実装ユーザーエクスペリエンスこの記事では、主に Rea...

角度コンテンツ投影の詳細な説明

目次単一コンテンツ投影マルチコンテンツ投影単一条件のコンテンツ投影アプリ-人物-htmlアプリ担当者...

MySQL LOAD_FILE() 関数メソッドの概要

MySQL では、LOAD_FILE() 関数はファイルを読み取り、その内容を文字列として返します。...

Linux Dig コマンドの使用法

発掘紹介: Dig は、Unix ライクなコマンドライン モードで NS レコード、A レコード、M...

Javascript における分割代入構文の詳細な説明

序文ES6 で初めて導入された「構造化代入構文」を使用すると、配列やオブジェクトの値を異なる変数に挿...

MySQL データベースは XA 仕様をどのように実装しますか?

MySQL 一貫性ログMySQL データベースの電源が切れた場合、コミットされていないトランザクシ...