CSSのみのアコーディオンメニューを作成する方法は？

非表示のチェックボックスとCSSを使用してください。隣接する兄弟セレクター（）と組み合わせたチェックされた擬似クラス（）を制御するコンテンツディスプレイ。 2. HTML構造には、崩壊したアイテムごとに入力、ラベル、コンテンツDIVが含まれています。 3.最大高さの遷移を設定することにより、スムーズな拡張/崩壊アニメーション。 4.擬似要素を使用してオープン/クローズステータスアイコンを追加します。 5.無線タイプを使用してシングルオープンモードを実装しますが、チェックボックスを使用すると複数の開口部が可能になります。これは、JavaScriptを必要とせず、最新のブラウザーと互換性のあるインタラクティブな折りたたみ式メニューの実装です。

メニューに応じてCSSのみを作成することは、JavaScriptに依存せずにインタラクティブコンテンツを追加するのに最適な方法です。次のことを使用します:checked ）コンテンツの可視性を切り替えます。一歩一歩構築する方法は次のとおりです。

1。HTML構造

チェックボックス（またはラジオボタン）を使用して、クリーンなHTML構造から始めて、各アイテムを制御します。各セクションには、ラベル（クリック可能なヘッダーとして）とコンテンツDivが含まれます。

 <div class = "accordion">
  <div class = "accordion-item">
    <入力型= "チェックボックス" id = "section1" name = "Accordion" />
    <ラベル= "section1">セクション1 </label>
    <div class = "accordion-content">
      <p>これは、セクション1のコンテンツです。</p>
    </div>
  </div>

  <div class = "accordion-item">
    <入力型= "チェックボックス" id = "section2" name = "Accordion" />
    <ラベル= "section2">セクション2 </label>
    <div class = "accordion-content">
      <p>これはセクション2のコンテンツです。</p>
    </div>
  </div>

  <div class = "accordion-item">
    <入力型= "チェックボックス" id = "section3" name = "Accordion" />
    <ラベル= "section3">セクション3 </label>
    <div class = "accordion-content">
      <p>これはセクション3のコンテンツです。</p>
    </div>
  </div>
</div>

一度に1つのセクションのみを開く必要がある場合は、 checkboxの代わりにtype="radio"を使用します。

2。基本的なCSSスタイリング

きれいで機能的な見た目に応じてスタイルをスタイルします。チェックボックス入力を非表示にし、クリック可能なヘッダーとしてラベルをスタイリングします。

 .accordion {
  幅：100％;
  最大幅：600px;
  マージン：0 Auto;
  フォントファミリー：arial、sans-serif;
}

.ACCORDION-ITEM {
  ボーダーボトム：1PX SOLID #DDD;
}

.accordion-itemラベル{
  表示：ブロック;
  パディング：15px;
  背景色：＃f5f5f5;
  font-weight：bold;
  カーソル：ポインター;
  ユーザーセレクト：なし;
  遷移：バックグラウンドカラー0.3s容易さ。
}

.ACCORDION-ITEMラベル：Hover {
  背景色：＃e9e9e9;
}

.accordion-content {
  Max-Height：0;
  オーバーフロー：隠し;
  遷移：最大0.3秒の容易さ、パディング0.3s容易さ。
  パディング：0 15px;
  バックグラウンドカラー：#fff;
}

.ACCORDION-CONTENT P {
  マージン：10px 0;
}

3。CSSでコンテンツを切り替えます

使用:checkedセレクターと （隣接する兄弟）コンバイナーチェックボックスがチェックされたときにコンテンツを拡張します。

 ＃section1：checked label .accordion-content、
＃セクション2：checked label .accordion-content、
＃セクション3：checked label .accordion-content {
  Max-Height：200px;
  パディング：15px;
}

max-heightトリックにより、スムーズな開閉が可能になります。コンテンツに適合するのに十分高く設定しますが、長いアニメーションを避けるには高すぎません。

4.オプション：開いた/閉じるアイコンを追加します

擬似要素を使用して、小さな矢印またはプラス/マイナスアイコンを追加できます。

 .ACCORDION-ITEMラベル::後{
  コンテンツ： ' ';
  フロート：そうです;
}

＃セクション1：チェックラベル::後、
＃セクション2：チェックラベル::後、
＃section3：checked label :: afted {
  コンテンツ： ' - ';
}

これにより、ユーザーは各セクションの状態に関する視覚的な手がかりを得ることができます。

覚えておくべき重要なポイント

• チェックボックスは、兄弟セレクターが動作するためにHTMLのラベルとコンテンツの前に来る必要があります。
• ディスプレイの代わりにmax-heightを使用しますdisplay: none 。
• ラジオ入力（ type="radio" ）では、一度に1つの開いたアイテムのみが許可されます。チェックボックスでは、複数のオープンアイテムが可能になります。
• アクセシビリティ：後で最小限のJSで強化する場合はaria-expandedおよびaria-controls属性の追加を検討してください。

基本的に、それは相互作用をシミュレートするためのフォーム入力とCSSセレクターの巧妙な使用です。 JavaScriptは不要であり、すべての最新のブラウザで動作します。

以上がCSSのみのアコーディオンメニューを作成する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。