クルーデザイン

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 クラスの追加・クラスの削除 クリックで色が付くメニュー(addClass・removeClass)

jQueryを使えば、タグにクラスを追加したり削除したりすることが簡単にできます。 今回はクリックされた「li」にクラスを追加して、クリックで色が付くメニューを作成してみようと思います。 こんなイメー …

jQuery テキストボックスのフォーカス時にテキストを全選択

サイトのUI(ユーザーインターフェイス)向上のためにテキストボックスがフォーカスされた時に、テキストボックスの内容を選択済みにして内容を変更しやすくしたい場合があります。 バックスペースで1文字ずつ削 …

jQuery ローカルストレージ で入力値の保存と読み込みをする

ブラウザごとに値を保存しておくことができるローカルストレージについて学びたいと思います。 ブラウザの機能として提供されているものなので、特別なものは不要です。 クッキーとは少し違い、保存の有効期限など …

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

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

jQuery 絞り込み検索サンプル(正規表現)

jQueryを利用すれば、絞り込み検索機能も簡単に作成できます。 絞り込み検索機能とは、テキストボックスに入力した値とマッチするものを表示・マッチしないものを非表示にするような機能です。 以下のような …


comment

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