企業サイトなどではメガメニューの導入が必要なことも多いです。
SWELLは企業サイトなどでの導入も増えてきておりますが、テーマ機能にはメガメニューがありません。
メガメニューのプラグインもありますので、そちらを利用している人も多きかもしれません。
プラグインのメガメニューは多機能なので自由が利かない不便さがあります。
実は画像を表示しないメガメニューであれば、CSSのみのカスタマイズで対応できますのでSWELLでも簡単に実装できます。
この記事ではSWELLを例にメガメニューを実装する手順をご紹介します。
この記事を書いた人
目次
メガメニューの実装はCSSのみ
シンプルなメガメニューの実装はCSSのみで対応できます。
GeneratePressという海外テーマのカスタマイズ事例として、紹介されている記事をアレンジすることでほとんどのテーマで導入できます。
Documentation
Building a Simple Mega Menu – Documentation GeneratePress doesn’t have a mega menu by default, simply because not everyone would use it and it adds a decent amount of CSS. However, creating a simple mega …
メニューの親の追加classにmega-menuを追加するだけでメガメニューになります。
更に、カラム数を指定するクラスを追加すると、カラム数も指定できます。初期値はcol-4です。
mega-menu-col-2
mega-menu-col-3
mega-menu-col-4
mega-menu-col-5参考記事からの変更点
CSSのセレクタ名だけテーマ毎に変更してあげれば大丈夫です。
SWELLの場合は、nav .main-navの部分を.g-cnavに置き換えて、追加CSSか子テーマのstyle.cssに張り付ければ大丈夫です。
@media (min-width: 769px) {
.c-gnav .mega-menu {
position: static;
}
.c-gnav .mega-menu > ul {
position: absolute;
width: 100%;
/*left: 0 !important;*/
display: flex;
flex-wrap: wrap;
}
.c-gnav .mega-menu > ul > li > a {
font-weight: bold;
}
.c-gnav .mega-menu>ul>li {
display: inline-block;
width: 25%;
vertical-align: top;
}
.c-gnav .mega-menu.mega-menu-col-2>ul>li {
width: 50%;
}
.c-gnav .mega-menu.mega-menu-col-3>ul>li {
width: 33.3333%;
}
.c-gnav .mega-menu.mega-menu-col-5>ul>li {
width: 20%;
}
.c-gnav .mega-menu > ul > li:hover > a,
.c-gnav .mega-menu > ul > li:focus > a,
.c-gnav .mega-menu > ul > li[class*="current-"] > a,
.c-gnav .mega-menu ul ul {
background-color: transparent !important;
color: inherit;
}
.c-gnav .mega-menu ul .sub-menu {
position: static;
display: block;
opacity: 1;
visibility: visible;
width: 100%;
box-shadow: 0 0 0;
left: 0;
height: auto;
pointer-events: auto;
transform: scale(1);
}
.c-gnav .mega-menu ul.toggled-on .sub-menu {
pointer-events: auto;
}
.c-gnav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
display: none;
}
}まとめ
企業サイトやメディアサイトでメガメニューが必要な時には、今回のカスタマイズ事例を思い出して、テーマに合わせてCSSを修正すれば対応できると思います。
コメント