ニタバルWebサイトにおいて主要なコンテンツへの目次の役割を果たすグローバルナビゲーション(グローバルメニューとも言われます)。多くのWebサイトではヘッダーに配置されたメニューがグローバルナビゲーションの役割を果たします。BiNDupでグローバルナビゲーションを作成する時に使えるテクニックを紹介します。BiNDupには様々なメニュースタイルが用意されていますが、今回はマウスオーバーで下層メニューが表示される「ドロップダウン・バルーン」メニューを使ったカスタマイズ方法を紹介します。サンプルサイトドロップダウン・バルーンでメニューを作成まずはサイトにドロップダウン・バルーンのメニューを追加します。新規ブロックにドロップダウン・バルーンを追加する場合ブロックテンプレートのナビゲーションから「ドロップダウン・バルーン」を選択して追加します。新規作成したメニューのブロックは他のページでも使えるように共有設定しておくと便利です。参考:ブロックを共有設定する既存のメニューをドロップダウン・バルーンに変更する場合エディタモードであれば、既存メニューのスタイルを変更することができます。ブロックエディタで設定済みのメニューを選択した状態で「メニューのスタイル」の中から「モーションメニュー」を開いて、「ドロップダウン・バルーン」を適用してください。エディタモードでドロップダウン・バルーンの下層メニューを作る時は、下層にしたいメニューを選択して1段階インデントします。インデントした項目がインデントしていない項目の下層メニューになります。PCサイトで表示されるデザインをカスタマイズドロップダウン・バルーンのメニューが準備できたら、まずはPCサイト(表示領域が広いデバイス含む)での見え方を調整していきます。「デザイン編集」ボタンからDressを開いて細部をカスタマイズします。ドロップダウン・バルーンの構造ドロップダウン・バルーンの構造は下記のようになっています。Dressでは、このパーツごとにスタイルを編集していきます。<li>メニューを項目ごとを囲んでいるエリア現在開いているページのリンクのみスタイル変更したい時はこの部分が「現在地」になります。3リンクメニューリンクリンクが設定されたメニューは「リンク」、リンク未設定の時は「リンクなし」になります。before要素」です。デフォルトは▼の形をしています。枠線で三角形を形成しているので、色を変えたい時は枠線の上辺の色を変更します。before要素」です。デフォルトは▲の形をしています。枠線で三角形を形成しているので、色を変えたい時は枠線の下辺の色を変更します。テンプレートによってはデザインが異なっていたり、表示されないこともありますPCサイト向けのスタイルを編集する時は「共通の設定」のみ編集します。設定されているデザインを編集したい時テンプレートのように既にデザインが設定された状態のものを調整したい場合、以下の項目のスタイルを編集するとよいでしょう。リンクなし上級者向けのカスタマイズ例こちらのサンプルのカスタマイズポイントを紹介します。メニューを中央寄せにするデフォルトのドロップダウン・バルーンはメニューが左寄せになっているため、中央に揃えるテクニックです。(1)「ドロップダウン・バルーン」の「横方向の配置」を中央揃えにします。<li>」の「フロート」を「フローとしない」にします。<li>」の「表示形式」をインラインブロックにします。以上で中央寄せのメニューになります。モバイル向けの設定にブロックを設定しておきましょう。ドロップダウン・バルーン全体グローバルナビゲーションとして印象付けるため、全体に背景色を敷きました。親メニューに表示される矢印(▼)はサイズを小さくして、色を変更しました。「枠線」の線幅や線の色で調整しています。サイズを調整したので、位置も調整します。ドロップダウン・バルーン(2階層目)下層メニューはシャドウを付けたり、幅を広くしたりしています。幅を広げると表示位置がずれるため、外余白を0にしてから位置を変形(transform)で調整しています。下層メニューに表示される吹き出し部分(▲)は非表示にしました。四辺とも「線なし」にしています。その他、デフォルトで表示される線を消したり、全体的な余白やリンクの文字色などを調整したりして完成です。詳しくはサイトデータを用意していますので、そちらをご確認ください。サンプルのDressは高度な設定を使用しています。メニューにワンポイントを入れるメニューの中でも目を引きたいポイントがある時は、リンクパーツの設定で使用できるリンクボタンやアイコンが有用です。リンクボタンで目立たせるコーポレートサイトなら「お問い合わせ」、ショップなら「予約」や「購入」などのように特に目立たせたいメニューがある場合はリンクボタンを活用するとよいでしょう。ブロックエディタで該当するリンクパーツを選択し、右サイドの「デザイン」からボタンの装飾を適用することができます。アイコンを使うリンクパーツにはアイコンを追加することもできます。右サイドの「アイコン画像」からアイコンフォントなどを選択します。アイコンを設定してテキスト欄を空欄にすれば、アイコンだけのメニューを作ることもできます。スマホサイトで表示されるデザインをカスタマイズPCサイトでのデザインができたら、スマホ(表示領域が狭いモバイル端末など)での見え方を整えます。スマホメニューの基本設定サイトエディタをスマホモードにして、「スマホメニューの設定」でボタンの位置やメニューを表示する時の動きを設定します。設定できたら「デザイン編集」ボタンからDressを開いて細部をカスタマイズしていきます。基本的にはPCサイト用に設定したスタイルはスマホサイトにも引き継がれるので、上書きしたいスタイルのみ「モバイル向けの設定」で編集します。スマホメニューボタンをカスタマイズハンバーガーメニューとも呼ばれる3本線のボタンを編集する時は「スマホサイズでプレビュー」に切り替えて、「スマホメニューボタン」を選択します。上級者向けのカスタマイズ例こちらのサンプルでは、ボタン自体は枠線を消して円形にして、表示される位置も調整しています。3本線部分もサイズや間隔を調整しています。高度な設定を使用しています。スマホメニューのカスタマイズ開かれたメニューの見た目を編集したい時は、スマホメニューボタンにマウスオーバーして「開く」ボタンをクリックして、プレビュー上でスマホメニューを開きます。スマホメニューエリアを選択して各項目をカスタマイズします。上級者向けのカスタマイズ例サイトの閲覧者が操作しやすくするためにメニューごとの余白を広めに設定しました。その他、メニューエリア全体にシャドウを付けたり、文字色などを調整しています。サンプルサイトのデータをダウンロード今回の記事で紹介したサンプルサイトのサイトデータをダウンロードしていただけます。以下よりログインしてお使いください。CAMPで最も読まれた記事は?コンセプト。