スマートフォンサイトにアコーディオンメニューを実装する

メニューが開閉するアコーディオンメニューはスマートフォンサイトでよく見かけます。プラグインもたくさんありますが、それらを使わないでもシンプルなコードで実装できますので、基本的な作成方法を解説します。

作成するメニューは以下になります。横幅はスクリーンサイズに応じて変化します。
カテゴリをクリックするとその下に隠れているメニューが開きますが、そのとき右側のアイコンも切り替ります。

アコーディオンメニューのスマホ画面

今回は各カテゴリを複数同時に開くことができるメニューと、1つのカテゴリを開くと他のカテゴリは閉じるメニューの2種類作成してみます。

またメニューに表示するアイコンは、CSSで作成したものとアイコンフォントで作成したものを2つ示します。

スマホでもPCでも動作するデモページを用意しましたのでご覧ください。

>> 複数のカテゴリがオープン可能なメニューの DEMO ページへ

>> 1つのカテゴリのみオープンするメニューの DEMO ページへ

>> アイコンフォントを使用したメニューの DEMO ページへ

【コンテンツ】

  1. HTMLコードを作成する
  2. CSSコードを作成する
  3. JavaScriptコードを作成する
  4. jsファイル読み込みコードをHTMLに記述する
  5. 1つのカテゴリのみオープンするメニューを作成する
  6. アイコンフォントを使用する

HTMLコードを作成する

メニュー部分の HTMLコードは以下になります。
HTMLタグの使い方をさまざま試してみましたが、CSS や JavaScript を考え合わせるとこの構成に落ち着きました。メニューが開くとき、dt要素には JavaScript でクラス名 "open" が付与されます。

CSSコードを作成する

最初はメニューに表示するアイコンを CSSで作成してみます。アイコンは before疑似要素と after疑似要素に設定しています。

JavaScriptコードを作成する

コードは以下になります。このコードでは複数のカテゴリがオープン可能です。

特に難しい部分はありません。
最初にCSSを「display: none」にして、メニューをすべて非表示にしています。

dt要素に記述しているカテゴリ名をクリックすると、クラス "open" がトグルで付与されたり削除されたりして、それに伴い隣のdd要素が開いたり閉じたりします。この部分はメソッドチェーンを使って簡潔に記述しています。

メニュースライド時のスピードを調整したい場合は、slideToggle に指定している "fast" の部分に msec単位の数値を指定します。 "fast" を削除するとデフォルトの "normal" となり、少しゆっくりになります。

jsファイル読み込みコードをHTMLに記述する

作成したJavaScriptコードは「acd.js」というファイルに記述しておき、サイトのディレクトリ内に配置します。そしてHTMLのheadタグ内に、そのファイルとjQuery本体を読み込む記述を追加します。

これでアコーディオンメニューが実装されました。
ここまでで作成したメニューは以下のページで確認できます。

>> 複数のカテゴリがオープン可能なメニューの DEMO ページへ

1つのカテゴリのみオープンするメニューを作成する

表示エリアが限られているスマホでは、メニューだけで広い場所をとってしまうのは問題です。
そこでカテゴリは1つだけしかオープンできないように改造してみます。

JavaScriptを以下のようにします。新しく acdMenu2()という関数を定義しました。

dt要素をクリックしたときの処理に1行追加しているだけです。クリックされていない要素からクラス "open" を削除し、その隣の dd要素を閉じています。

デモページは以下です。

>> 1つのカテゴリのみオープンするメニューの DEMO ページへ

アイコンフォントを使用する

メニューのアイコンはCSSで作成していましたが、アイコンフォントに変えてみます。
アイコンフォントはテキストと同じように、大きさ、色、シャドウなどを簡単に設定できるので便利です。

アイコンフォントを自由に利用できるサイトがありますので、ここではそこからダウンロードしてみます。
今回は「IcoMoon App」というサイトを利用してみます。このサイトは必要なフォントだけをファイルに含めてダウンロードできますので、ファイルサイズを抑えることができます。

具体的なサイトの利用方法は別記事に記載していますので、興味がある方は参照してください。
「アイコンフォントの具体的な使い方 - IcoMoon App」

ダウンロードしたフォントファイルをディレクトリに配置する

フォントファイル4種類(.eot/.svg/.ttf/.woff)を、サイトのディレクトリに配置します。
今回はHTMLファイル直下に [fonts]ディレクトリを作成し、その中に配置することにします。

CSSを記述する

ダウンロードした圧縮ファイルにはCSSも含まれていますので、それをインクルードしても構いません。ここでは必要な部分だけを抜き出し、既存のCSSに追加することにします。

以下が追加した部分です。「@font-face」のurl部分はフォントファイルのパスに合わせて変更しています。アイコンは4つ含まれていますが、content に指定されている Unicode はあとで使用します。

アイコンフォントを、これまで before疑似要素と after疑似要素に設定していたCSSアイコンと入れ替えます。
入れ替えた部分のCSSは以下になります。

これでアイコンフォントを使用したアコーディオンメニューが完成しました。
デモページは以下です。

>> アイコンフォントを使用したメニューの DEMO ページへ

以上、アコーディオンメニューを実装する手順を解説しました。スマートフォンサイト制作には必須のテクニックですので、しっかりと覚えておきたいものです。

スポンサーリンク

ページの先頭へ