より省スペースに！左にロゴ、右にメガメニューのレイアウト作成方法｜BiNDup

こんにちは、デザイナーのオモトです。
私がノーコードCMS「BiNDup」を使う上で、活用している実用的なカスタマイズ・テクニック第2弾です。
今回は、意外とできることを知ってる人が少ない！？「左にロゴ、右にメガメニューのレイアウト作成方法」について解説します。
とくにマウスオーバーで開く隠れた下層コンテンツ部分ではなく、常に見えているグローバルナビ部分のアレンジを中心にご紹介。
設定できなかった方にはとBiNDupのサイトデータを用意しているのでご安心を！

★作業前のご注意★ 必ずお読みください！

※ブログの内容についてはサポート対象外なので要注意！質問いただいてもお答えできません。（ごめんなさい！）

→ノーコードで自由にデザインできるホームページ作成サービスBiNDupを30日間無料体験

メガメニューとは？

メガメニューは、ウェブサイトやアプリでよく使われる大きなドロップダウンメニューの一種です。通常のドロップダウンメニューとは異なり、たくさんの項目が一度に表示されるので、ユーザーはたくさんの情報を早く見つけることができます。
WordPressではプラグインを入れないと使えない機能ですが、BiNDupではデフォルトでメガメニューの機能がついていますので、かんたんに自サイトに取り入れることができます。
メガメニューの基本や、隠れた下層コンテンツ部分のアレンジ方法は、こちらも参考にしてください。
メガメニューのアレンジ｜文字や色、レイアウトを編集する方法
【サンプル無料】メガメニューが活躍！迷わないメニュー導線の作り方

基本のメガメニューアレンジ

BiNDupのメガメニューの仕組みとしては、「タイトル（赤枠）」が、グローバルナビに変化します。
そして、次の「タイトル」までに記述されている要素（青枠）はすべて、マウスオーバーで自動的に開く下層コンテンツとなり、分割線を入れると下層コンテンツ内でカラムが分割されます。

また、「タイトル」の次に隙間を空けずに、段落スタイルを入れると、通常のナビゲーションになります。

Dress不要で意外と簡単！基本のロゴ+メガメニュー

サンプルを見る
やり方としては、一番最初の「タイトル」にロゴを入れるだけです！
「タイトル」の次に隙間を空けずに、段落スタイルを入れると、通常のナビゲーションになる仕組みを利用し、ロゴのすぐ後に「タイトル」を記述することで、ロゴの「タイトル」を通常のメニュー扱いにします。

→ノーコードで自由にデザインできるホームページ作成サービスBiNDupを30日間無料体験

左寄せのロゴ+メガメニューのカスタマイズ方法

BiNDupのメガメニューはCSSフレックスボックス（display:flex）を使って作成されています。
justify-content：centerの指定によって、中央揃えになっているので、Dressの「メガメニュー>フレックスコンテナ」の「主軸の位置」を「先頭寄せ（flex-start）」にすると左寄せにすることができます。
サンプルを見る

→ノーコードで自由にデザインできるホームページ作成サービスBiNDupを30日間無料体験

左寄せのロゴ+メガメニュー+離れた位置にCVボタンを置く方法：かんたん編

以前は「ロゴが左、グローバルナビ+CVボタンが右」といったレイアウトが主流でしたが、CV意識の高まりにより、「ロゴ+グローバルナビが左、CVボタンだけ右側」にというレイアウトをよく見かけるようになりました。ちょっとしたデザインテクニックですが、CVボタンをグローバルナビより離れた位置に置くことで、CVボタンだけを目立たせることができます。

サンプルを見る

やり方は、メガメニューをヘッダー・ゴーストヘッダーに入れ、右側のウィジェットにCVボタンを入れると完成！Dressを使わず簡単にできます。
ウィジェット内に２個３個とボタンを配置することも可能なので、とても便利ですよ。
ただし、ウィジェットなのでスクロールするとどうしても追従してしまいます。追従して欲しくない場合は、次のやり方を試してみてください。

→ノーコードで自由にデザインできるホームページ作成サービスBiNDupを30日間無料体験

左寄せのロゴ+メガメニュー+離れた位置にCVボタンを置く方法：難しい編

サンプルを見る
Dressでは指定ができないので、スクリプト詳細設定などに、以下のcssを直接記載していきます。
※危ないので、cssがわからない人は使わないでください！

</p> <style type="text/css"> .megamenu-list li:nth-last-child(1) { position:absolute; right:0px; } .-dress_SampleMegamenuLeftCV .megamenu-list .b-megamenu_contents li:nth-last-child(1) { position:relative; } @media (max-width: 768px) { .megamenu-list li:nth-last-child(1) { position:relative; } } </style> <p>

ちなみにnth-last-child(1)は、最後から１つめの要素に対してcssを効かせる指定です。
今回の場合、左が先頭なので、一番右側のボタンが最後になります。

まとめ

いかがでしたでしょうか？
こんな感じで実用的なカスタマイズ・テクニックを引き続き紹介していくので、楽しみにしていてくださいね！

ホームページ作成サービスのBiNDupでは、複雑なCSSやJavaScriptの記述なしで簡単にオリジナルデザインのサイトが作成できます。
今回のようなデザインアレンジされたメガメニューを実装しているテンプレートも沢山ありますので、まだお使いになっていない方はぜひ試してみてください。

BiNDupのテンプレートYADA Corporate（有料）｜テンプレートのメガメニューも自由にアレンジ可能

ホームページ作成サービスBiNDupを無料で使ってみるBiNDの制作事例を見る

今回作成したサンプルサイトのダウンロード

自分では設定ができなそう・・と不安な方は
今回のサンプルサイトのサイトデータを用意しましたので、以下よりログインしてダウンロードしてみてください。
（BiND10以降、BiNDup対応）