こんにちは、長友です。
今日は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を使用するなど工夫してみてください。