Divi：垂直ナビゲーションメニューを作成する方法

DIVIのフォアグラウンドでより多くのアイテムを表示するように、垂直ナビゲーションメニューを作成しますか？

垂直ナビゲーションメニューは、フォアグラウンドでより多くのメニュー項目を必要とする一部のWebサイトで役立ちます。水平方向のメニューは、特にブラウザの幅が狭い場合、必要なすべてのメニューリンクに合わせるのが難しい場合があります。

このチュートリアルでは、Diviテーマビルダーを使用して垂直ナビゲーションメニューを作成する方法を示します。

これにより、WordPressメニュー項目を紹介するためのスペースが増えます。

始めましょう！

概要

このチュートリアルで作成するデザインを簡単に見てみましょう。

チュートリアルに行きましょう。

新しいグローバルヘッダーの作成

このチュートリアルでは、Diviのテーマビルダーを使用してグローバルヘッダーに垂直ナビゲーションメニューを作成します

開始するには、WordPressダッシュボードに移動し、Divi>テーマビルダーに移動します。

次に、[グローバルヘッダーの追加] 領域をクリックします。ウェブサイトのテンプレートデフォルトを選択し、ドロップダウンリストから [Build Global Header] を選択します。

また読む： DIVIでテーマビルダーを使用してグローバルヘッダーを作成する方法

垂直断面レイアウト設計

グローバルヘッダーレイアウトエディタで、すでにそこにある通常のセクション設定を開き、以下を更新します。

最大幅：300px
高さ：100vh

内側のマージン：4vh上、0px下

次のようにシャドウボックスを追加して、カスタマイズを続行します。

シャドウボックス：スクリーンショットを参照
ボックスシャドウの垂直位置：0px
ボックスシャドウブラーの強さ：20px
ボックスシャドウスプレッド強度：-10px
影の色：rgba（0,0,0,0.3）

ユーザーがスクロールしても垂直ナビゲーションメニューが左側に表示されたままになるようにするには、[詳細設定]タブを固定位置に更新し、次のようにz-indexを更新します。

固定ステーション
Zインデックス：9999

セクションの外側に拡張されるサブメニューナビゲーションを確実に表示するには、次のカスタムCSSをメイン要素に追加します。

overflow: visible !important;

これで、セクションはテンプレートの左側に垂直レイアウトになります。

垂直メニューをデザインする

セクションが配置されたら、垂直メニューを設計する準備が整いました。これを行うには、カスタムCSSを備えたメニューモジュールを使用して、ナビゲーションをカスタマイズして垂直方向に表示します。

また、メニューがさまざまなブラウザの高さにうまく適応するように、vhの長さの単位を使用します。

行を追加する

開始するには、セクションの列に行を追加します。

次に、ラインパラメータを次のように更新します。

サイズと間隔

カスタムガター幅を使用：はい
列間隔：1
最大幅：100％
最大幅：80％

内部マージン：3vh上、3vh下

国境

ボーダー幅：1px
ボーダーカラー：#eeeeee

メニューモジュールを追加

XNUMX列の行の中に、新しいメニューモジュールを追加します。

タブに表示するメニューを選択します中身.

次に、あなたのロゴを追加しますウェブサイトとしてコンテンツロゴボタンの下にあるダイナミック。

[スタイル]タブで、以下を更新します。

スタイル：中央揃え

フォントメニュー：Nunito Sans
メニューテキストの色：＃535b7c

メニューテキストサイズ：18px（デスクトップ）、14px（タブレットと電話）
メニュー行の高さ：2 em

ドロップダウン行の色：＃535b7c
[アクティブリンクの色]ドロップダウンメニュー：＃535b7c

カートアイコンの色：＃535b7c
検索アイコンの色：＃535b7c
ハンバーガーメニューのアイコンの色：＃535b7c

内部マージン：2vh上、2vh下

メニューにカスタムCSSを追加

メニューには、私たちが達成しようとしている垂直ナビゲーションを実現するためのカスタムCSSが必要です。開始するには、[詳細設定]タブに移動し、次のカスタムCSSをメニューリンクとメニューロゴに追加します。

CSSメニューリンク（デスクトップ）：

width: 100%;
padding: 1vh 15px;
background: #f8f8f8;
border-radius: 3px;
border: 1px solid #eeeeee;

CSSメニューリンク（タブレット）：

width: auto;
border:none;

メニューCSSロゴ：

margin-bottom: 20px;

次に、次のようにカスタムCSSクラスをMenuモジュールに追加します。

CSSクラス：et-vert-menu

このクラスは、Codeモジュールを使用して追加する外部カスタムCSSでこの特定のメニューをターゲットにするために使用されます。

コードモジュールを使用したカスタムCSSの追加

メニューモジュールの下に、コードモジュールを追加します。

次に、次のコードをコードボックスに貼り付けます（必ずスタイルタグの間に配置してください）。

/* Menu de Navigation Style Vertical*/
.et-vert-menu .et_pb_menu__menu>nav>ul {
  flex-direction: column;
  margin-left: 0px!important;
  margin-right: 0px!important;
  width: 100%;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li {
  margin: 10px0!important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul li {
  display:block!important;
  padding: 0px!important;
  }
  .et-vert-menu .et_pb_menu__menu>nav>ul ul {
    padding: 0px!important;
    top: 0px!important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul {
  left:calc(100%- 1px) !important;
  top:0px!important;
  }
.et-vert-menu .et-menu .menu-item-has-children>a:first-child:after {
  content: "5"!important; /*change arrow icon for submenu*/
  right: 20px!important;
  }
.et-vert-menu .nav li ul {
    left: calc(100%- 1px) !important; /*align submenu to the right of menu link*/
  }
@media alland (min-width: 981px) {
.et-vert-menu .et_pb_menu__menu, .et-vert-menu .et_pb_menu__menu>nav {
    width: 100%; /*width of the vertical navigation menu*/
  }
/*Adjust the width of the main content and footer area to make room for the fixed vertical header*/
#et-main-area {
  width: calc(100%- 300px);
  margin-left: 300px;
}
}