【jQuery/HTML5/CSS】アコーディオンメニューを9パターン作ってみた

スポンサーリンク
アコーディオンメニューアイキャッチ プログラミング

こんにちは!セミマサです。

クリックで開け閉めできるアコーディオンメニューは多くのウェブサイトで見かけますよね!今回はjQuery6パターン、HTML5のみ1パターン、CSSのみで2パターン、計9パターンのアコーディオンメニューを作ったので作成方法をまとめていきたいと思います。

※ソースに関して:複数回登場するクラス(accordion-inner等)は初出の部分にのみcssを記載しています。

jQuery/6パターン

複数開けるタイプ

よくあるタイプのアコーディオンメニューです。

HTML

CSS

CSSです。

・after疑似要素で下向きのマークを作っています。

・+セレクタを使って2番目以降のアコーディオンに上方向のマージンを当てています。

jQuery

・accordionクラスをクリックした際に、accordionクラスの次の要素をslideToggleメソッドを使って開け閉めしています。今回は300ミリ秒(0.3秒)を引数で与えています。

デモサイト

複数開けるタイプ(最初から開いているものアリ)

「複数開けるタイプ」とほぼ同じで、開けておきたいものにopenクラスを付与しています。 jQueryは同一なので掲載していません。

HTML

CSS

openクラスのcssです。

1つしか開けられないタイプ

HTMLとCSSは「複数開けられるタイプ」とほぼ同じです。

HTML

CSS

jQuery

・1つしか開いていない状態にするため、notメソッドを使って「クリックしたaccordion-oneクラス」以外の「accordion-oneクラス」をslideUPメソッドで非表示にしています。

横に開くタイプ

HTML

CSS

横向きということで多少CSSが変わっています。

・中身であるaccordion-content-sideクラスのwhite-spaceプロパティに改行をしなくなる「nowrap」を指定しています。こうしないと中身が縮んだ際にテキストが崩れて残念な表示になります。

・親要素の幅と子要素の幅を合わせて100%になるように指定。

・疑似要素のマークをrotateの数字を調整して右向きにしています。

jQuery

横向きの場合はanimateメソッドを使います。

・クリックしたaccordion-sideクラスの「次の要素のwidthプロパティ」を、’toggle’指定を使って表示/非表示で切り替えています。速度には「normal」を指定しました。

横に開くタイプ(1つしか開けられない)

HTMLとCSSは「横に開くタイプ」とほぼ同じです。

HTML

CSS

jQuery

縦開きの1つしか開けられないタイプと同じく、notメソッドで「クリックしたaccordion-side-oneクラス」以外の「accordion-side-oneクラス」のwidthプロパティをanimateメソッドの’hide‘指定で非表示にしています。

カテゴリメニュー型

HTML

CSS

jQuery

jQueryに関しては「複数開けるタイプ」と同様です。notメソッドを利用すれば1つしか開かなくすることもできます。

HTML5のみ/1パターン

detailsタグとsummaryタグを使います!

HTML

CSS

・detailsタグの子要素にsummaryタグを配置すればOKです。summaryタグと同階層にあるpタグは「detailsの内容」を示しており、メニューの中身になります。

※detailsタグとsummaryタグの本来の用途はdetailタグの内容をsummaryタグで要約することです。不適切なマークアップにならないよう内容に気を付けましょう!

CSS/2パターン

縦開き

HTML

・labelタグのfor属性を使ってinputタグとlabelタグを紐づけます。こうすることでラベルがクリックされた際にチェックが入るようになります。

CSS

・アコーディオンの中身である「accordion-content-css」の高さと不透明度を0にしておきます。

・「~」セレクタを使って条件分岐のようなことをしています。上のソースの場合、「#accordion-check」にチェックがついている場合、「accordion-content-css」クラスに括弧内の内容が適用されて表示されるようになります。

横開き

HTML

CSS

・仕組みは縦開きのものと同様で、最初はアコーディオンの中身である「accordion-content-css-side」の不透明度を0にしつつ「transform:tranlateX」で左にずらしておきます。チェックボックスにチェックが入ったら透明度を1にしつつ元の位置へ戻すようにしています。

おわりに

今回は9パターンのアコーディオンメニューを作成しました。アコーディオンメニューはjQueryで作ることが多かったのですがCSSのみでもなんとかなりそうですね!

CSSのセレクタはまだ使ったことがないものが多いのでうまく使えば複雑な動きもつけられるかもしれません。いろいろ試してみたいと思います。

タイトルとURLをコピーしました