一般的なスマホ用メニューを実装する

一般的なスマホ用メニューに、ハンバーガーメニュー（※）と呼ばれるものがあります。をタップするとメニューリストが見られるタイプです。
※アイコンがハンバーガ―に似ているところから

展開されるメニューには、大まかに二種類あります。

ドロップダウンメニュー

カラーミーショップのレスポンシブ対応テンプレート（MONOを除く）のメニューは、シンプルなドロップダウンメニュー（上から下に開くメニュー）が開きます。
ドロップダウンメニュー・デモ（ブラウザの幅を狭めて確認してください）

メニュー項目が多い場合はドロワーメニュー（※）がおすすめです。
MONO（有料テンプレート）やPLAIN（スマホ用テンプレート）などに実装されています。
※ドロワー、引き出しのこと

横からスルッと飛び出てくるのでタイプで、カテゴリーやグループの項目も表示しています（下画像はPLAINのもの）。上下にスクロールしますので、項目を増やしても大丈夫です。
画像を使った凝ったメニューも検討できます。

実装
既存テンプレートを参考にします。また検索すると幅広く情報が得られます。
PLAINは無料テンプレートですので、中をみることができます（機能はjQueryで書いてあります）。

注意点
既存テンプレートに実装されているドロップダウンメニューは、カテゴリーやグループで絞り込むように作られていない場合があります。
テンプレート選びの際はカテゴリーやグループの絞り込みがあるか見ておく必要があります。

えいじ@naeco.jp　この記事を書いた人

機能実装のお手伝いをしています。お気軽にご相談ください。
追加の要望や設置場所の状態によって、お見積り金額は変動します。

ご相談・お問い合わせはこちら