一般的なスマホ用メニューを実装する
一般的なスマホ用メニューに、ハンバーガーメニュー(※)と呼ばれるものがあります。 をタップするとメニューリストが見られるタイプです。
※アイコンがハンバーガ―に似ているところから
展開されるメニューには、大まかに二種類あります。
ドロップダウンメニュー
カラーミーショップのレスポンシブ対応テンプレート(MONOを除く)のメニューは、シンプルなドロップダウンメニュー(上から下に開くメニュー)が開きます。
ドロップダウンメニュー・デモ(ブラウザの幅を狭めて確認してください)
ドロワーメニュー
メニュー項目が多い場合は、MONOやPLAIN(スマホ用テンプレート)などに実装されているドロワーメニュー(※)がおすすめです。
※ドロワー、引き出しのこと
横からスルッと飛び出てくるのでタイプで、カテゴリーやグループの項目も表示しています(下画像はPLAINのもの)。上下にスクロールしますので、項目を増やしても大丈夫です。
凝ったメニューを検討される場合はこちらをおすすめします。
ドロワーメニュー・デモ(ブラウザの幅を狭めて確認してください)
実装
既存テンプレートを参考にします。また検索すると幅広く情報が得られます。
PLAINは無料テンプレートですので、中をみることができます(機能はjQueryで書いてあります)。
注意点
既存テンプレートに実装されているドロップダウンメニューは、カテゴリーやグループで絞り込むように作られていない場合があります。
テンプレート選びの際はカテゴリーやグループの絞り込みがあるか見ておく必要があります。
執筆者

えいじ@naeco.jp この記事を書いた人
メーカー系情報システム部門出身で、第一種情報処理技術者。
個人事業主/カラーミー歴10年目/カラーミーショップ公認パートナー。
カスタマイズやモールへの出店作業 (CSV) をお手伝いしています。
お仕事のご相談はこちら
個人事業主/カラーミー歴10年目/カラーミーショップ公認パートナー。
カスタマイズやモールへの出店作業 (CSV) をお手伝いしています。
お仕事のご相談はこちら