【サンプル無料】メガメニューが活躍！迷わないメニュー導線の作り方

皆様こんにちは。
2019年10月1日に新搭載されましたメガメニューはお使い頂けましたか？

今回はメガメニューの基本的な使い方からDressを使ったデザインのカスタマイズまで解説したいと思います。
サンプルデータもダウンロード出来ますので最後まで読んでみて下さいね。

メガメニューとは

さて、先ず「メガメニューとは何ぞや？」から解説したいと思います。

多くのリンクを整理して見せられる

階層的に見せるメニューとしては、モーションメニュー『ドロップダウン・バルーン』がありますが、メガメニューは更に階層を持たせた表現が可能になります。

サイト制作に於いて同一階層に何ページも並ぶ事は少なくて、多くは階層に基づいた設計になる事が殆どです。

商品のページであれば、
　商品トップ＞商品カテゴリ＞各商品
記事ページであれば、
　記事トップ＞記事カテゴリ＞各記事
と云った感じです。
この階層を綺麗に見せる事でサイトの作りが閲覧者に正しく伝わるのですね。

遷移に迷うサイトはこの階層構造の考え方が踏襲されておらず、別階層のページを並列に扱ってしまっています。
メガメニューはその整理に一役買うのですね。

要素を選ばず設置可能

設定方法は後述しますが、ブロックエディタで出来る事はおおよそ出来る為、自由度が高いのも特徴です。
画像もボタンも更には動画も好きな要素を加える事が出来ます。
主は飽くまでメニューですが、アイディア次第では全然違った表現も可能です。

スマホではタブスライドの多階層メニューに変換

実はこれまでスマホメニューでタブスライド形式の表現が出来ず、メニュー項目が全て表示されてしまっていました。
メガメニューを使う事でタブ内にメニューが収納されるのですっきり見せる事が出来ます。

メガメニューの基本的な使い方

それではさっそく使い方を学んで行きましょう。
スマートモードとエディタモードそれぞれ解説しますが、はっきり申しましてメガメニューの場合、エディタモードの方が圧倒的に自由度が高いのです。

スマートモードでの使い方

スマートモードで使う場合、先ずブロックテンプレートから選択します。
『ナビゲーション』カテゴリの中に、メガメニューのテンプレートが3種類ありますのでこちらから選んで下さい。

メガメニュー①：シンプルな見出しとメニューの組み合わせ
メガメニュー②：画像が加わったメニュー
メガメニュー③：画像をメインとしたメニュー

各要素の設定と出力の対応イメージは以下の図をご覧下さい。

ちなみにスマートモードでは4カラム固定になっており、要素もブロックテンプレートで決まったものだけになっています。
不要な要素はトグルをOFFにする事で非表示に出来ます。

もしメガメニュー内で階層メニューを表示させずシンプルなリンクだけを設置したい場合は、すべての要素のトグルをOFFにして、『リンク』要素に通常通りリンク設定を行えばOKです。

エディタモードでの使い方

エディタモードの場合は要素やカラムを自由に変更する事が可能になります。

基本的な構造は以下の図をご覧下さい。

分割パーツを入れる事で自由なカラム数に変更する事が出来ます。
通常、分割パーツは分割数の指定と一緒に使いますが、メガメニューの場合は分割パーツ分自動で分割されます。

階層メニューが不要な場合は、リンクパーツ化したタイトル要素のみにすればOKです。

Dressでのデザインカスタマイズ

Dressを使う事でメガメニューのデザインをカスタマイズする事が出来ます。
要素ごとに簡単な編集方法を解説します。

背景色を変更する

Dressを開いたらプレビューエリアのメガメニュー部分にカーソルを合わせると緑のボタンが表示されます。
このボタンをクリックする事で下層メニューが表示される様になります。
下層メニューが開いたら、その背景部分をクリックしましょう。
クリックすると右側の選択項目エリアにメガメニューの背景に関わるセレクタが抽出されます。

メガメニュー＞下層コンテンツ：下層メニュー全体に関する設定を行います
メガメニュー＞下層コンテンツ内カラム：下層メニュー内のカラムに関する設定を行います

『メガメニュー＞下層コンテンツ』を選んで、スタイル一覧から背景のカラーを指定してみましょう。
指定したカラーに変わるのが分かると思います。

ちなみに選択中のメニュー項目の背景色を変えたい場合は、同じ様にメニューの背景部分をクリックして、抽出された要素から、
メガメニュー＞メニュー項目：選択中
を選んで背景色を設定します。

サンプルデータについて

デザイナー・ニタバルが今回作成したサンプルデータでは3種類のメガメニューを提案しています。
ブロックDressテーマで設定されておりますので、それぞれのブロックからDressテーマの設定をご覧下さい。
このブロックDressテーマを使えば既存のサイトのデザインを変更する事も出来ますのでご活用下さい。

実際の動きはこちらからご覧下さい。

サンプルサイトを見る

サンプル1について

サンプル1はカラム毎に独立させたデザインになっています。
角丸が特徴的ですね。

こちらは先ほど解説しました、
　メガメニュー＞下層コンテンツ内カラム
をカスタマイズする事で表現出来ます。

サンプル2について

サンプル2はグラデーション背景を用いたデザインです。
華やかな印象になりますね。

こちらはメガメニューの全体背景をグラデーションにして、カラム毎に白い背景を設定しています。

サンプル3について

サンプル3は画像のインパクトを押し出したデザインです。

オプション項目「最初の子要素[first-child]」を用いて、最初のカラムのみ余白をなくして表現しています。

如何でしたか？
要素の整理からデザインのカスタマイズまで幅広い表現が可能なメガメニューを是非お使い下さい。

今回紹介したサンプルのサイトデータを配布します。
サイトデータは2019年10月1日にアップデートした最新のBiNDup環境でお使い頂けます。
※サイトデータのダウンロードにはログインが必要です。