クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

jQuery

jQuery アコーディオンメニューを自作サンプル(slideToggle)

投稿日:2017年12月2日 更新日:

クリックすれば開閉される「アコーディオンメニュー」は良く使うと思います。
プラグインも多く出ており簡単に実装することができますが、プラグインだとデザインを変更する時に苦労したりします。

プラグインからの装飾に苦労するようであれば、自分で作ったほうが早いかもしれませんね。
アコーディオンメニューはjQueryで簡単に作成することができますので、作り方を解説しようと思います。

簡単なサンプルも作りました。

HTML(アコーディオンメニュー)

「ul」と「li」を使って階層を作ります。
「aタグ」に「menu」というクラスを付けておき、クリックされるとメニューを開閉させます。
「ulタグ」に「menu__child」というクラスを付けておきます。このクラスはCSSで非表示にしておきます。

CSS(アコーディオンメニュー)

「li」のマークを削除して「menu__child」クラスを非表示にします。

スクリプト(アコーディオンメニュー)

[ 2〜4行目 ]
「menu」クラスがクリックされた時の処理を記述します。
3行目でCSSで「none」にしていたクラスを表示させています。
表示にはjQueryの「slideToggle」という関数を利用しており、これは「表示されていなければ表示、表示されていれば非表示する」という特徴を持つ便利な関数です。

以上、アコーディオンメニューは簡単に実装できます。
適用するデザインが複雑な場合はプラグインでは無く、自分で作成するのも手段の1つとして考えても良いかと思います。

サンプルのリンクも載せておきますね。

-jQuery

執筆者:

関連記事

jQuery 選択した画像への差し替え

jQueryは一番有名なJavaScriptのライブラリです。 jQueryのおかげで簡単にJavaScriptを利用できるようになりましたね。 他のライブラリも多く出てきましたが、まだまだ使う機会も …

jQuery ブロックレベル要素をリンクにしたい(aタグで囲まない)

インライン要素をブロックレベル要素で囲ってはいけないというHTMLの文法規約があります。 そのため、divで作ったグローバルメニューなどをaタグで囲むことができません。 ※実際は動作する場合もあります …

jQuery 文字の大きさ(フォントサイズ)の変更(小中大)

jQueryで文字サイズの大きさを変更するボタンを作ってみようと思います。 行政のサイトで良く見かけますよね。 これもjQueryで簡単に実現できます。 昔からある機能なので古いイメージがありますが、 …

CSS Animate.css の基本サンプル(通常・クリックされた・マウスオーバー)

テキストだけのサイトだと「さびしい」「少しだけ動きが欲しい」という場合には「Animate.css」が便利です。 Animate.cssは、あらかじめ定義されているクラスを追加するだけで要素にアニメー …

jQuery ページの最上部へスクロールする処理(サンプル付き)

よく見かける「トップへ戻る」を作ってみます。 ホームページをいくらかスクロールしていくと、右下に出てくきて、ずっと付いてくるやつですね。 それをクリックすると、ページの最上部まで「ぎゅいーん」とスクロ …


comment

メールアドレスが公開されることはありません。