MagentoにCSSのみで作成するメガメニューを実装する方法

2017年05月31日 │ 長友

こんにちは、長友です。
今日はMagentoにCSSのみで作成するメガメニューを実装する方法についてお話しします。
前々回「グローバルナビゲーションのCMSブロック化」についてお話していますので、それを活かしつつメガメニューを実装したいと思います。

エクステンションを使わなくてもメガメニューを実装できます。

まず前々回「グローバルナビゲーションのCMSブロック化」の手順で以下のようにブロックを登録します。

<nav id="nav">
  <ol class="nav-primary">
    <li class="level0 first parent">
      <a class="level0 has-children" href="#"><span>Menu1</span></a>
    </li>
    <li class="level0 parent">
      <a class="level0 has-children" href="#"><span>Menu2</span></a>
    </li>
    <li class="level0 last parent">
      <a class="level0 has-children" href="#"><span>Menu3</span></a>
    </li>
  </ol>
</nav>

次にこのブロックにメガメニュー用のclassを入れていきます。
olタグにclass=”menu”、liタグにclass=”menu__mega”を入れます。

<nav id="nav">
  <ol class="nav-primary menu">
    <li class="level0 first parent menu__mega">
      <a class="level0 has-children" href="#"><span>Menu1</span></a>
    </li>
    <li class="level0 parent menu__mega">
      <a class="level0 has-children" href="#"><span>Menu2</span></a>
    </li>
    <li class="level0 last parent menu__mega">
      <a class="level0 has-children" href="#"><span>Menu3</span></a>
      </li>
  </ol>
</nav>

最後にメガメニューの中身になる部分を作成します。
中身になるulにclass=”menu__second-level”を入れます。

<ul class="menu__second-level">
  <li><a href="#"><span>Sub Menu1</span></a></li>
  <li><a href="#"><span>Sub Menu2</span></a></li>
  <li><a href="#"><span>Sub Menu3</span></a></li>
  <li class="last"><a href="#"><span>Sub Menu4</span></a></li>
</ul>

ここまでをまとめたものが以下となります。これでメガメニューのHTMLは完成です。

<nav id="nav">
  <ol class="nav-primary menu">
    <li class="level0 first parent menu__mega">
      <a class="level0 has-children" href="#"><span>Menu1</span></a>
      <ul class="menu__second-level">
        <li><a href="#"><span>Sub Menu1</span></a></li>
        <li><a href="#"><span>Sub Menu2</span></a></li>
        <li><a href="#"><span>Sub Menu3</span></a></li>
        <li class="last"><a href="#"><span>Sub Menu4</span></a></li>
      </ul>
    </li>
    <li class="level0 parent menu__mega">
      <a class="level0 has-children" href="#"><span>Menu2</span></a>
    </li>
    <li class="level0 last parent menu__mega">
      <a class="level0 has-children" href="#"><span>Menu3</span></a>
    </li>
  </ol>
</nav>

メガメニューのCSS

メガメニューに必要なCSSはこれだけです。背景色やz-indexの値、paddingはデザインに合わせて適宜変更してください。

@media only screen and (min-width: 771px) {
#nav {
  .menu {
    position: relative;
    width: 100%;
  }
  .menu li.menu__mega {
    position: static;
  }
  ul.menu__second-level {
    border: none;
    visibility: hidden;
    opacity: 0;
    z-index: 1;
  }
  li.menu__mega ul.menu__second-level {
    position: absolute;
    top: 50px;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 30px 25px;
    background: #fff;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    z-index: 100;
  }
  li.menu__mega:hover ul.menu__second-level {
    top: 50px;
    visibility: visible;
    opacity: 1;
  }
}
}

メディアクエリを使用することで、PCのみにメガメニューを表示し、タブレット端末、スマートフォンではデフォルトのドロップダウンメニューを使用することができます。

PC

スマートフォン

スマートフォン オープン

メガメニューがはじめから用意されているテーマなどもありますが、普段使用しているテーマにメガメニューを追加したい場合などにCSSだけで手軽に実装することのできる方法だと思います。
場合によってはMagentoのCSSと衝突してしまう場合があると思いますので、その場合は!importantを使用したり、idを使用するなど工夫してみてください。

デザイン・店作り