ページの主要部分: <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 ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
>>: CSS3を使用してヘッダーアニメーション効果を作成する
メソッドが定義されているクラスに応じて、現在のクラスへの静的参照を取得するには、self:: または...
Linux システムでは、chmod コマンドと chown コマンドの両方を使用して権限を設定でき...
はじめに<br />前回の記事「私の CSS アーキテクチャ コンセプト」では、公園で友...
1. 同じIPアドレス、異なるポート番号仮想ホスト 1: ホスト IP アドレスは 172.16.3...
目次1. 現状2. コミュニティソリューション2.1 事業レビュー3. 技術的ソリューション3.1....
序文まずここで説明させてください。インターネット上では、Alibaba では 500 万のデータを異...
HTML5 のドラッグ アンド ドロップ機能は誰もが知っていますが、これを使用するとドラッグ アンド...
目次更新可能なビュービューのパフォーマンスビューの制限ビューは MySQL 5.0 以降で導入されま...
質問昨日、データベースSQLを書いているときに問題が発生しました。問題の根本は、SQL ステートメン...
目次React Hooks に基づく状態共有の実装ユーザーエクスペリエンスこの記事では、主に Rea...
目次単一コンテンツ投影マルチコンテンツ投影単一条件のコンテンツ投影アプリ-人物-htmlアプリ担当者...
MySQL では、LOAD_FILE() 関数はファイルを読み取り、その内容を文字列として返します。...
発掘紹介: Dig は、Unix ライクなコマンドライン モードで NS レコード、A レコード、M...
序文ES6 で初めて導入された「構造化代入構文」を使用すると、配列やオブジェクトの値を異なる変数に挿...
MySQL 一貫性ログMySQL データベースの電源が切れた場合、コミットされていないトランザクシ...