【コピペで完了！】ヘッダーのドロップダウン型カテゴリメニューの作り方

まじかる☆タルるートくんのストーリーが微塵も思い出せないオガリア中村です。嗚呼くそう！視聴者だった記憶だけはあるのに。というか主人公のシルエットも出てこないですね、もはや。

この29年間ハンカチーフを持ち歩いた事が一切無かったんですが(濡れた手の乾燥は自然の力に任せます)、先日必要に迫られて買いました。クマのぷーさんのハンカチーフ。29歳になって汗腺の蓋をどこかに失くしてしまったからです。汗だくだからです。汗だくの人がみんな良い人に見えますね。暑つぅぅぅぅううい！

本日は、マウスカーソルを置いたら、下階層がぱっと出てくる「ドロップダウン型」のヘッダーメニューをご用意しました。CSSだけで実装してるので、楽天GOLDを使わずにRMSへの貼り付けだけで完了します。

デモ

ヘッダーのドロップダウンカテゴリメニューのデモ

■デザインパターン1：
初期表示されているカテゴリにマウスを合わせると、下層カテゴリが現れます。超シンプルなKATACHI。

■デザインパターン2
カテゴリ名と一緒にアイコン画像を表示できます。

デザインパターン1のテンプレート(楽天専用)

↑のタイプのテンプレートです。

HTML

まずは次のHTMLを丸々コピーしてくださいまっせ。

<ul class="header-dropmenu">
  <li>
    <a href="#">カテゴリ1</a>
    <ul>
      <li><a href="#">サブカテゴリ</a></li>
      <li><a href="#">サブカテゴリ</a></li>
      <li><a href="#">サブカテゴリ</a></li>
    </ul>
  </li>
  <li>
    <a href="#">カテゴリ2</a>
    <ul>
      <li><a href="#">サブカテゴリ</a></li>
      <li><a href="#">サブカテゴリ</a></li>
      <li><a href="#">サブカテゴリ</a></li>
    </ul>
  </li>
  <li>
    <a href="#">カテゴリ3</a>
    <ul>
      <li><a href="#">サブカテゴリ</a></li>
      <li><a href="#">サブカテゴリ</a></li>
      <li><a href="#">サブカテゴリ</a></li>
    </ul>
  </li>
  <li>
    <a href="#">カテゴリ4</a>
    <ul>
      <li><a href="#">サブカテゴリ</a></li>
      <li><a href="#">サブカテゴリ</a></li>
      <li><a href="#">サブカテゴリ</a></li>
    </ul>
  </li>
  <li>
    <a href="#">カテゴリ5</a>
    <ul>
      <li><a href="#">サブカテゴリ</a></li>
      <li><a href="#">サブカテゴリ</a></li>
      <li><a href="#">サブカテゴリ</a></li>
    </ul>
  </li>
</ul>

赤文字になってる箇所は要書き換えです。
　・# = リンク先のカテゴリページURL
　・カテゴリ = カテゴリ名
にそれぞれ書き換えてくださいませ。

サンプルは「5つのカテゴリ」にそれぞれ「3つのサブカテゴリ」がついてる形になってますが、カテゴリ/サブカテゴリどちらもお好きに増減させて問題ありません。レイアウトは崩れないようになってます。

CSS

次にCSSです。先ほどコピーしたHTMLの上部に貼り付けましょう。

<style type="text/css">
<!--
ul.header-dropmenu {
  list-style: none;
  width: 100%;
  height: 40px;
  margin: 0 auto;
  padding: 0;
  display: table;
  table-layout: fixed;
}
ul.header-dropmenu > li {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  border: 1px solid #f8f8f8;
  background: #f8f8f8; /* 背景色*/
}
ul.header-dropmenu li a {
  display: block;
  text-align: center;
  line-height: 40px;
  font-weight: bold;
  text-decoration: none;
  font-size: 14px;
}
ul.header-dropmenu li ul {
  visibility: hidden;
  width: 100%;
  list-style: none;
  position: absolute;
  top: 100%;
  left: -1px;
  margin: 0;
  padding: 0;
  border: 1px solid #222; /* マウスオーバー時の枠線 */
  border-top: none;
}
ul.header-dropmenu li:hover ul {
  visibility: visible;
}
ul.header-dropmenu li ul li {
  background: #fff;
  transition: all .2s ease;
}
ul.header-dropmenu > li:hover {
  background: #fff;
  border: 1px solid #222; /* マウスオーバー時の枠線 */
  border-bottom: none;
}
ul.header-dropmenu li:hover ul li:hover {
  background: #f8f8f8;
}
-->
</style>

これで完成！

デザインパターン2のテンプレート(楽天/ヤフー)

　
カテゴリと一緒に画像を表示できるデザインです。こちらはogaRiaサービスご契約店舗様限定公開となりますー！オガリアサービスにログインした状態で↓へアクセスすれば、HTMLとCSSを確認できます。
　
CSSを見る(ogaRiaフルバージョンプランご契約店舗様限定)

カテゴリ階層が深いショップにおすすめ

ヘッダーで多階層のカテゴリを見せるのは店舗内の回遊性を高めるためです。

• 欲しい物がある程度ハッキリしているお客様が、
  商品までたどり着く為の近道として使う
• ウィンドウショッピングしたいお客様が、
  ショップ内の取扱商材を把握するのに使う

という様なメリットがあります。レフトナビよりも早い段階でページに出てくる為、カテゴリ階層が深く、特に上記のメリットが必要になる店舗様にオススメです。

逆に言えば、カテゴリ階層が浅い(取扱い商材の幅が狭く、1商品ずつを丁寧に見せる必要がある)ショップについては、ヘッダーは商品画像を印象的に見せた方が効果的かもしれませんね。

レフトナビ用はこちら！

レフトナビ用のドロップダウンカテゴリ(アコーディオンカテゴリ)の方が好きだよ！って方はこちらをどうぞ。

【楽天ショップ用】クリックで下層が出現するアコーディオンカテゴリの作り方