お問い合わせ

SWELLカスタマイズ|メガメニューを自前で実装する

企業サイトなどではメガメニューの導入が必要なことも多いです。

SWELLは企業サイトなどでの導入も増えてきておりますが、テーマ機能にはメガメニューがありません。

メガメニューのプラグインもありますので、そちらを利用している人も多きかもしれません。

プラグインのメガメニューは多機能なので自由が利かない不便さがあります。

実は画像を表示しないメガメニューであれば、CSSのみのカスタマイズで対応できますのでSWELLでも簡単に実装できます。

この記事ではSWELLを例にメガメニューを実装する手順をご紹介します。

この記事を書いた人

Wordpressのカスタマイズ歴10年のプロです。無料から有料までWordpressテーマの使用経験は豊富で、テーマのカスタマイズに関する知見も深い。Webサイト制作からカスタマイズまで仕事を請け負った実績は多数あり。

目次

メガメニューの実装はCSSのみ

シンプルなメガメニューの実装はCSSのみで対応できます。

GeneratePressという海外テーマのカスタマイズ事例として、紹介されている記事をアレンジすることでほとんどのテーマで導入できます。

メニューの親の追加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を修正すれば対応できると思います。

この記事が気に入ったら
いいねしてね!

よかったらシェアしてね!

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

目次