ドロップダウンメニューのアレンジで作る、わかりやすいナビゲーション

Webサイトにおいて主要なコンテンツへの目次の役割を果たすグローバルナビゲーション（グローバルメニューとも言われます）。多くのWebサイトではヘッダーに配置されたメニューがグローバルナビゲーションの役割を果たします。
BiNDupでグローバルナビゲーションを作成する時に使えるテクニックを紹介します。

BiNDupには様々なメニュースタイルが用意されていますが、今回はマウスオーバーで下層メニューが表示される「ドロップダウン・バルーン」メニューを使ったカスタマイズ方法を紹介します。

サンプルサイト

ドロップダウン・バルーンでメニューを作成

まずはサイトにドロップダウン・バルーンのメニューを追加します。

新規ブロックにドロップダウン・バルーンを追加する場合

ブロックテンプレートのナビゲーションから「ドロップダウン・バルーン」を選択して追加します。

新規作成したメニューのブロックは他のページでも使えるように共有設定しておくと便利です。
参考：ブロックを共有設定する

既存のメニューをドロップダウン・バルーンに変更する場合

エディタモードであれば、既存メニューのスタイルを変更することができます。
ブロックエディタで設定済みのメニューを選択した状態で「メニューのスタイル」の中から「モーションメニュー」を開いて、「ドロップダウン・バルーン」を適用してください。

エディタモードでドロップダウン・バルーンの下層メニューを作る時は、下層にしたいメニューを選択して１段階インデントします。インデントした項目がインデントしていない項目の下層メニューになります。

PCサイトで表示されるデザインをカスタマイズ

ドロップダウン・バルーンのメニューが準備できたら、まずはPCサイト（表示領域が広いデバイス含む）での見え方を調整していきます。「デザイン編集」ボタンからDressを開いて細部をカスタマイズします。

ドロップダウン・バルーンの構造

ドロップダウン・バルーンの構造は下記のようになっています。
Dressでは、このパーツごとにスタイルを編集していきます。

PCサイト向けのスタイルを編集する時は「共通の設定」のみ編集します。

設定されているデザインを編集したい時

テンプレートのように既にデザインが設定された状態のものを調整したい場合、以下の項目のスタイルを編集するとよいでしょう。

メニュー全体の背景や余白など

• ドロップダウン・バルーン
• ドロップダウン・バルーン（2階層目）

各メニューの文字色や背景色など（通常時）

• ドロップダウン・バルーン › リスト項目 <li> › リンク
• ドロップダウン・バルーン（2階層目） › リスト項目 <li> › リンク

マウスオーバーした時の各メニューの文字色や背景色など

• ドロップダウン・バルーン › リスト項目 <li> › リンク：マウスオーバー
• ドロップダウン・バルーン（2階層目） › リスト項目 <li> › リンク：マウスオーバー

現在地のメニューリンクの文字色や背景色など

• ドロップダウン・バルーン › 現在地 › リンク
• ドロップダウン・バルーン（2階層目） › 現在地 › リンク

リンクが貼られていないメニューの文字色や背景色など

• ドロップダウン・バルーン › リスト項目 <li> › リンクなし
• ドロップダウン・バルーン（2階層目） › リスト項目 <li> › リンクなし

上級者向けのカスタマイズ例

こちらのサンプルのカスタマイズポイントを紹介します。

メニューを中央寄せにする

デフォルトのドロップダウン・バルーンはメニューが左寄せになっているため、中央に揃えるテクニックです。
（1）「ドロップダウン・バルーン」の「横方向の配置」を中央揃えにします。
（2）「ドロップダウン・バルーン › リスト項目 <li>」の「フロート」を「フローとしない」にします。
（3）同じく「ドロップダウン・バルーン › リスト項目 <li>」の「表示形式」をインラインブロックにします。
以上で中央寄せのメニューになります。
この設定を行うとスマホでも横並びになってしまうので、スマホで縦並びにする場合は（3）の「表示形式」設定時、モバイル向けの設定にブロックを設定しておきましょう。

ドロップダウン・バルーン全体

グローバルナビゲーションとして印象付けるため、全体に背景色を敷きました。

ドロップダウン・バルーン（2階層目） › before要素

親メニューに表示される矢印（▼）はサイズを小さくして、色を変更しました。「枠線」の線幅や線の色で調整しています。サイズを調整したので、位置も調整します。

ドロップダウン・バルーン（2階層目）

下層メニューはシャドウを付けたり、幅を広くしたりしています。
幅を広げると表示位置がずれるため、外余白を0にしてから位置を変形（transform）で調整しています。

ドロップダウン・バルーン（2階層目） › リスト項目 <li> › before要素

下層メニューに表示される吹き出し部分（▲）は非表示にしました。枠線を 四辺とも「線なし」にしています。

その他、デフォルトで表示される線を消したり、全体的な余白やリンクの文字色などを調整したりして完成です。詳しくはサイトデータを用意していますので、そちらをご確認ください。
サンプルのDressは高度な設定を使用しています。

メニューにワンポイントを入れる

メニューの中でも目を引きたいポイントがある時は、リンクパーツの設定で使用できるリンクボタンやアイコンが有用です。

リンクボタンで目立たせる

コーポレートサイトなら「お問い合わせ」、ショップなら「予約」や「購入」などのように特に目立たせたいメニューがある場合はリンクボタンを活用するとよいでしょう。

ブロックエディタで該当するリンクパーツを選択し、右サイドの「デザイン」からボタンの装飾を適用することができます。

アイコンを使う

リンクパーツにはアイコンを追加することもできます。右サイドの「アイコン画像」からアイコンフォントなどを選択します。

アイコンを設定してテキスト欄を空欄にすれば、アイコンだけのメニューを作ることもできます。

スマホサイトで表示されるデザインをカスタマイズ

PCサイトでのデザインができたら、スマホ（表示領域が狭いモバイル端末など）での見え方を整えます。

スマホメニューの基本設定

サイトエディタをスマホモードにして、「スマホメニューの設定」でボタンの位置やメニューを表示する時の動きを設定します。

設定できたら「デザイン編集」ボタンからDressを開いて細部をカスタマイズしていきます。
基本的にはPCサイト用に設定したスタイルはスマホサイトにも引き継がれるので、上書きしたいスタイルのみ「モバイル向けの設定」で編集します。

スマホメニューボタンをカスタマイズ

ハンバーガーメニューとも呼ばれる3本線のボタンを編集する時は「スマホサイズでプレビュー」に切り替えて、「スマホメニューボタン」を選択します。

上級者向けのカスタマイズ例

こちらのサンプルでは、ボタン自体は枠線を消して円形にして、表示される位置も調整しています。3本線部分もサイズや間隔を調整しています。

高度な設定を使用しています。

スマホメニューのカスタマイズ

開かれたメニューの見た目を編集したい時は、スマホメニューボタンにマウスオーバーして「開く」ボタンをクリックして、プレビュー上でスマホメニューを開きます。

スマホメニューエリアを選択して各項目をカスタマイズします。

上級者向けのカスタマイズ例

サイトの閲覧者が操作しやすくするためにメニューごとの余白を広めに設定しました。その他、メニューエリア全体にシャドウを付けたり、文字色などを調整しています。

サンプルサイトのデータをダウンロード

今回の記事で紹介したサンプルサイトのサイトデータをダウンロードしていただけます。
以下よりログインしてお使いください。