お問い合わせ

SWELLにメガメニューを導入|プラグイン不要で実現するカスタマイズ 【有料級】

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

メガメニューとは、Webページのナビゲーションメニューの一種で、画面の半分から大半を覆うほどの大きなスペースを持つドロップダウンメニューのこと。

https://e-words.jp/w/%E3%83%A1%E3%82%AC%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC.html

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

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

メガメニューのプラグインは多機能すぎて自由が利かない不便さがあります。また、jQueryを使うメガメニューもありますが、時代遅れなので使いたくありません。

実は、画像を表示しないメガメニューであれば、多階層のメガメニューでもCSSのカスタマイズのみで実現できます。

もちろん、SWELLでも簡単に実装できます。

SWELLのメガメニューで検索すると、noteの有料記事が出てきます。noteを購入していないので内容はわかりません。

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

こんな人におススメな記事です
  • メニュー項目が増えたので画像を使わないシンプルなメガニューをSWELLに導入したい
  • 画像を使ったリッチなメガメニューをSWELLに導入したい
  • SWELLを使った他のサイトと差別化したい

SWELLにメガメニューをプラグイン無しで実現する

メガメニューの実装は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;
    }
}

有料級:SWELLのメガメニューで画像を使いたい

メガメニューに画像を使う場合は、レイアウトも含めて実装が大変になります。

SWELLの場合は、ブログパーツを使うと画像付きのメガメニューが簡単に実現できます。

ブログパーツをメニューから呼び出すには、メニューからショートコードを実行する必要があります。

max mega menuプラグインでも同じようなことができますが、いらない機能が多すぎるので、機能がシンプルなShortcode in Menusプラグインを使います。

今までご紹介したメガメニューのカスタマイズはこの内容には必要ありません。

STEP

Shortcode in Menusプラグインを導入

Shortcode in Menusプラグインをインストールします。

このプラグインは、メニューに直接ショートコード追加できるので、自動でメニューを展開したり、複雑な動きをさせることができます。

STEP

メガメニューで表示する内容をブログパーツで作成

メガメニューで表示したい内容をブログパーツで作成します。

例えば、カラムブロックなどで横並びで画像のあるリンクを作成するとメガメニューぽくなります。

STEP

メニューからブログパーツのショートコードを呼び出す

親メニューの子メニューとしてショートコードを追加します。

ブログパーツのショートコードを指定します。

  • 親メニュー
    • 子メニュー(ショートコード)
STEP

CSSで調整します

実際に表示させてみて大きさや表示位置などをCSSで調整します。

SWELLの高速化設定に『必要なCSSのみ読み込む』という項目があります。
『必要なCSSのみ読み込む』にチェックが入っていると、ブログパーツに必要なCSSが読み込まれないことがあります。
『必要なCSSのみ読み込む』はOFFにします。

まとめ

企業サイトやメディアサイトでメガメニューが必要な時には、今回のカスタマイズ事例を思い出して、テーマに合わせてCSSを修正すれば対応できると思います。

役に立ったら他の人にもシェア!

この記事を書いた人

Wordpressのカスタマイズ歴10年のプロです。無料から有料までWordpressテーマの使用経験は豊富。SWELLやCocoon、Snowmonkey、Arkheなどテーマのカスタマイズに関する知見も深い。Webサイト制作からカスタマイズまで仕事を請け負った実績は多数あり。
第二種情報処理技術者試験(合格率:15.5%)、Google アナリティクス上級者向けコースGoogle タグ マネージャーの基礎コース上級ウェブ解析士HTML5プロフェッショナル認定 レベル2

コメントを閉じる

コメント

コメントする

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

クリックできる目次