ソースコードを含む Jquery 垂直マルチレベル アコーディオン メニュー download_jquery

まず最初にレンダリングを示します。気に入ったら、以下を読み続けてください。

これは、シンプルですが実用的な複数レベルの垂直アコーディオン ドロップダウン リスト メニューです。このマルチレベル アコーディオン メニューは完全に CSS を使用して作成されており、さまざまなサブメニューをグループ化することでマルチレベル メニューの効果を作成します。

この複数レベルのアコーディオン メニューは、checkbox 要素の :checked 擬似要素を使用して作成されます。見栄えの良いアニメーション効果が必要な場合は、プラグインで提供されている main.js ファイルを使用できます。これにより、メニューを開いたり縮小したりするときに左側の小さな矢印にアニメーション効果を提供できます。

エフェクトデモ ソースコードダウンロード

使用方法

HTML 構造

この複数レベルのアコーディオン メニューの HTML 構造は非常に単純です。アコーディオン全体は順序付けされていないリストです。リスト項目にサブメニューが含まれている場合は、input[type=checkbox] とラベルを追加し、リスト項目に .has-children クラスを追加します。他のすべての標準リスト項目は、a タグに含まれます。

<ul class="cd-accordion-menu">
 <li class="has-children">
 <input type="checkbox" name ="group-1" id="group-1" checked>
 <label for="group-1">Group 1</label>
 <ul>
 <li class="has-children">
  <input type="checkbox" name ="sub-group-1" id="sub-group-1">
 <label for="sub-group-1">Sub Group 1</label>
 <ul>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
  <li><a href="#0">Image</a></li>
 </ul>
 </li>
 <li><a href="#0">Image</a></li>
 <li><a href="#0">Image</a></li>
 </ul>
 </li>
 <li><a href="#0">Image</a></li>
 <li><a href="#0">Image</a></li>
</ul> <!-- cd-accordion-menu --> 

CSS スタイル

このマルチレベル アコーディオン メニューは、CSS のみを使用してクリックを検出し、サブメニューを展開します。使用する方法は、チェックボックス要素を介して、次に :checked 擬似クラスと隣接する兄弟セレクターを介して、

要素の表示モードを「none」から「block」に変更することです。

まず、サブメニューのあるすべてのリスト項目にチェックボックス要素があることを確認する必要があります。 label 要素をクリックすると、実際には対応するチェックボックス要素をクリックすることになります。これは、label 要素の for 属性を設定することによって実現されます。次に、チェックボックス要素を非表示にして、ラベル要素に置き換えることができます。

.cd-accordion-menu input[type=checkbox] {
 /* hide native checkbox */
 position: absolute;
 opacity: 0;
}
.cd-accordion-menu label, .cd-accordion-menu a {
 position: relative;
 display: block;
 padding: 18px 18px 18px 64px;
 background: #4d5158;
 box-shadow: inset 0 -1px #555960;
 color: #ffffff;
 font-size: 1.6rem;
}  

JavaScript

このアコーディオン メニューに素敵なアニメーション効果を追加する必要がある場合は、プラグインで提供される jQuery と main.js ファイルを使用できます。同時に、.animate クラスを ul.cd-accordion-menu 要素に追加する必要があります。これにより、サブメニューの開閉時に小さな矢印の方向がアニメーション化されます。

上記の内容は、この記事で紹介した Jquery 垂直マルチレベル アコーディオン メニューとソース コードのダウンロードの全説明です。気に入っていただければ幸いです。気に入った友人は直接クリックしてソース コードをダウンロードできます。