Mega Menu

Mega Menu(メガメニュー)をBeaverBuilderで設定する

コンテンツが多いウェブサイトの場合には、いわゆるMega Menu(メガメニュー)を用いることで、ナビゲーションを整理することができます。

 

mega menu

参考:Patagoniaウェブサイト

 

まずはメニューを作成する

Beaver Builderでは、Wordpress標準のメニュー機能を用いて、MegaMenuを簡単に実装することができます。

まず、外観>メニューより親・子・孫、三階層のナビゲーションを作成します。

 

メニュー

 

※メニューの種類は、固定ページ、投稿、カスタムリンク、カテゴリ、なんでも構いません。

 

Classの追加

メニューの登録が完了したら、親カテゴリ(上図でいうと、記事メニュー)にclassを追加します。

メニューへのclass追加は初期設定の状態だとできません。

 

表示オプション

 

画面右上の表示オプションより、CSSクラスにチェックを入れいます。すると、メニューの設定画面でclassを追加することができるようになります。

 

class

 

親メニューのCSS classに「mega-menu」と入力します。これだけで、Mega Menu(メガメニュー)を実現することができます。

 

メガメニュー

 

レスポンシブ対応済みのメガメニューをとても簡単に導入することができました。