グッと見やすくなる！Lightning G3 Proでサブメニューを幅広くカラム表示する方法

2023年2月28日

Lightningではグローバルメニューにサブメニューがある場合、親メニューをマウスオーバーするとドロップダウン表示する形式となっています。

でもドロップダウンの場合、サブメニュー数が多くなると見にくいですよね。

そこで本記事ではサブメニューをカラム表示にする方法を紹介します。サブメニューが幅広く表示されるので、メニュー項目が多くてもグッと見映え良くなりますよ。

サブメニューの表示形式を確認しておく

次のようなヘッダーを作成してあるとします。

ヘッダーメニューのメニュー項目は、ホームページ・サービス紹介・会社概要・ブログ・お問い合わせの５つだけですが、サービス紹介と会社概要には、サブメニューが設定してあります。

デフォルトのサブメニュー表示（ドロップダウン）

デフォルトでは、サブメニューは親メニューにマウスオーバーするとドロップダウン表示されます。

今回作成するサブメニューのカラム表示

次のように、マウスオーバーでサブメニューが横に広がったカラム表示とします。

サブメニューをカラム表示させる手順

手順は次の２ステップだけです。

1. テーマカスタマイザーで、ヘッダーメニューのレイアウト設定を中央揃えまたはナビ貫通とする
2. カスタムCSSの記述をする（コピペでOK）

１．メニューを中央配置またはナビ貫通としておく

Lightning G3 Pro Unitを使う理由としては、メニューのレイアウトをデフォルトの回り込み（サイト全体の右側に表示される）のレイアウトでなく、中央揃えまたはナビ貫通レイアウトとしたいためです。

Lightningのヘッダーナビのレイアウトについてはこちらもご参照ください。

手順としては、ダッシュボードの外観＞カスタマイズ＞Lightningヘッダー設定　に入って、ヘッダーレイアウトを中央揃えまたはナビ貫通に設定します。

今回の例では、”ヘッダーコンタクトあり＆ナビ貫通”を選択しました。

２．カスタムCSSを記述する

次のカスタムCSSを記述します。

記述場所は、テーマカスタマイザーの追加CSS欄でもよいですし、子テーマのstyle.cssに記述してもよいでしょう。

#menu-header-nav > li {
  position: static;
}
#menu-header-nav > li > a {
  transition: all 0.5s;
}
#menu-header-nav > li > a:hover {
  background-color: var(--wp--preset--color--vk-color-primary);
  color: #fff;
}
#menu-header-nav > li:hover > ul {
  left: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 16px;
  -moz-column-gap: calc(10% / 2);
  column-gap: calc(10% / 2);
  margin-left: 0;
  width: calc(
    var(--vk-width-container) - var(--vk-width-container-padding) * 2
  );
  padding: 1.5em 10%;
  transition: all 0.2s ease-out;
}
#menu-header-nav > li:hover > ul > li {
  width: 30%;
  height: 40px;
  background-color: #eee;
  font-size: 14px;
}
#menu-header-nav > li:hover > ul > li > a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  color: #333;
  font-weight: bold;
}
#menu-header-nav > li:hover > ul > li > a:hover {
  background-color: transparent;
  color: var(--wp--preset--color--vk-color-primary);
}
#menu-header-nav > li > ul {
  transition: all 0s;
}

4～10行目は実は今回のカラム表示とは関係はなくて、単に親メニューをマウスオーバーするときに背景色を設定しただけですが、サブメニュー領域の背景色と同じ色としました。

サブメニュー表示のスピードを調整したければ、24行目の0.2sを変更してみてください。0.5sだともう少しゆっくり開き、0sだと瞬時に開きます。

まとめ

今回は、比較的簡単な手順でサブメニュー表示をぐっと変更する方法を紹介しました。企業サイトなどでサブメニューが増えた場合、全体を幅広いカラム表示にすると見映えもぐっと良くなると思います。