Diviでスライドインメニューを作成する方法
公開: 2022-05-12スライドメニューの優れている点は、画面上の余分なスペースを占有することなく、より多くのコンテンツを利用できることです。また、ほとんどのレイアウトに適合し、モバイルアプリ内でよく見られるため、使い慣れた感覚が得られます。
このチュートリアルでは、Divi Webサイトにスライドインメニューを表示する2つの方法を示します。1つはDiviテーマのテーマカスタマイザーを使用する方法、もう1つはDiviテーマビルダーを使用してグローバルヘッダーを作成する方法です。
テーマカスタマイザーを介してDiviでスライドインメニューを作成する方法
まず、管理者としてWordPressにログインして、Webサイトのテーマカスタマイザーにアクセスする必要があります。また、Diviテーマビルダーにアクティブなグローバルヘッダーがないことを確認する必要があります。 次に、 Divi→ThemeCustomizerに進みます。
あなたはあなたのウェブサイトをカスタマイズするためにテーマのカスタマイズに連れて行かれます。 ここから、サイトのタイトルとタグラインの変更、サイドバーまたはフッターへのウィジェットの追加、メニューの作成、ホームページの設定の変更などを行うことができます。
[ヘッダーとナビゲーション]ブロック→[ヘッダー形式]→ [ヘッダースタイル]をクリックして続行し、[スライドイン]オプションを選択します。
スライドインメニューの準備ができているのと同じように、Viola。
ただし、スライドインメニューの幅、背景色、テキストサイズなどを変更するなどのカスタマイズを追加する場合は、[ヘッダーとナビゲーション]ブロックの[スライドインとフルスクリーンヘッダーの設定]に移動して、スライドインまたはフルスクリーンメニューオプション。
テーマビルダーを介してDiviでスライドインメニューを作成する方法
今回は、グローバルヘッダーを作成して、Diviテーマビルダーを使用してDiviでスライドインメニューを作成する方法を紹介します。 WordPressダッシュボードのDiviメニューから、 Theme Builderオプションを選択し、グローバルヘッダーの作成に進みます。
セクション設定
セクション設定アイコンをクリックして、DiviBuilderエディターに移動します。 
最初のセクションの設定を変更します。 セクションの背景色を透明な色に変更して続行します： rgba(255,255,255,0)
[デザイン]タブ→ [間隔]に移動して、デフォルトの上部と下部のパディングを削除します。 両方の値を0に設定します。
[詳細設定]タブ→ [位置]に移動し、[位置]オプションを[固定]に変更して、[場所]を中央上部に変更します。
最初の行の設定
次の列構造を使用して、セクションに新しい行を追加して続行します。
モジュールを追加する前に、まず行設定を開き、次に[デザイン]タブの[サイズと間隔]オプションを次のように変更します。
サイジング：
- 幅：97％
- 最大幅：100％
間隔：
- トップパディング：1％
- ボトムパディング：0px
次に、[詳細設定]タブ→ [カスタムCSS ]→[メイン要素]に移動し、そこに次のスニペットを追加します。
表示：フレックス; align-items：center;
この行の最初の列に画像モジュールを追加することで、サイトのロゴを配置できます。
インタラクティブなハンバーガーアイコンを作成する
3番目の列または列3に移動し、テキストモジュールを追加します。 ビジュアルの代わりにテキストタブを使用して、カスタムクラスで3つのHTMLスパンを追加し、インタラクティブなハンバーガーアイコンを作成します。
<span class = "line line-1"> </ span> <span class = "line line-2"> </ span> <span class = "line line-3"> </ span>
次に、次の値を使用して背景色を変更します： rgba(0,0,0,0.04)
[デザイン]タブ→ [テキスト] → [テキスト行の高さ]に移動し、 0em値を入力してテキスト行の高さを削除し、追加したスパンを完全に制御します。
サイズ設定に移動し、次のように値を変更します。
- 幅：120px
- モジュールの配置：右
間隔設定にパディングカスタム値を追加して、モジュールを二乗してみましょう。値は次のとおりです。
- トップパディング：40px
- ボトムパディング：60px
- 左パディング：40px
- 右パディング：40px
次に、カスタムCSSIDを追加してモジュールを完成させます。 このCSSIDを使用して、コードにクリック関数を作成します。 [詳細設定]タブ→[ CSSIDとクラス]に移動し、[ CSSID ]フィールドに次のテキストを入力します。
- CSS ID ：スライドインオープン
2行目の設定
続けて、新しい行、2番目の行を作成します。 モジュールをまだ追加せずに、行設定アイコンをクリックしてその設定を開きます。 この行は、スライドインメニュー全体の場所になります。
背景色をお好みに合わせて変更しましょう。メニューでは次の色を選択します： #e7e0e2
[デザイン]タブ→ [サイズ変更]に移動して、次のように値を変更します。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 幅：20％（デスクトップ）、40％（タブレット）、60％（電話）
- 高さ：100vh
次に、[間隔]設定に移動し、トップパディングのさまざまなデバイス間で値を変更します：10vw（デスクトップ）、30vw（タブレット）、40vw（電話）。
カスタムCSSクラスを追加して続行します。行をスライドさせるために必要です。[詳細設定]タブ→ [ CSSIDとクラス]に移動し、[ CSSクラス]フィールドに次のテキストを入力します。
- CSSクラス：slide-in-menu-container
次に、不透明度を挿入して、デフォルト状態で行の不透明度を0にしますopacity: 0; カスタムCSS→メイン要素で。
2行目の設定を終了するには、[位置]設定の位置を次の値に変更します。
- 位置：絶対
- 場所：右上
- 水平オフセット：-20％（デスクトップ）、-40％（タブレット）、-60％（電話）
メニューの追加
テキストモジュールを追加し、表示する最初のメニューを入力してメニューの追加を始めましょう。最初のメニューにはホームを使用します。 次に、それに関連するリンクを追加します。
背景色を次のように変更して続行します： rgba(216,210,212,0.35)
[デザイン]タブに移動し、次のようにテキスト設定を変更します。
- テキストフォント：Arial
- テキストフォントの太さ：太字
- テキストの色：＃0c71c3
- テキストサイズ：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
- テキストシャドウ：ライトエフェクト
- テキストの配置：中央
さまざまなデバイス間で間隔の値を変更して続行します。 値は次のとおりです。
- 下マージン：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
- トップパディング：1vw
- ボトムパディング：1vw
最初のメニューが完成しました。残りのメニューについては、複製モジュールアイコンをクリックして最初のメニューのクローンを作成する必要があります。 
次に、テキストとリンクを必要に応じて変更します。
スライドイン機能の追加
最初の行の2番目の列にコードモジュールを追加してメニューを終了し、次のコードをモジュールにコピーしましょう。
<スタイル>
＃slide-in-open {
カーソル：ポインタ;
}
。ライン{
表示ブロック;
位置：絶対;
高さ：4px;
幅：100％;
背景：＃24394A;
border-radius：9px;
不透明度：1;
-webkit-transition：.1sイーズインアウト;
-moz-transition：.1sイーズインアウト;
-o-transition：.1sイーズインアウト;
遷移：.1sイーズインアウト;
}
。2行目 {
上：10px;
}
.line-3 {
上：20px;
}
＃slide-in-open.open .line-1 {
上：10px;
-webkit-transform：rotate（135deg）;
-moz-transform：rotate（135deg）;
-o-transform：rotate（135deg）;
変換：rotate（135deg）;
}
＃slide-in-open.open .line-2 {
表示：なし;
}
＃slide-in-open.open .line-3 {
上：10px;
-webkit-transform：rotate（-135deg）;
-moz-transform：rotate（-135deg）;
-o-transform：rotate（-135deg）;
変換：rotate（-135deg）;
}
.slide-in-menu {
右：0！重要;
不透明度：1！重要;
}
.slide-in-menu-container {
-webkit-transition：すべての0.5が簡単になります！重要;
-moz-transition：すべての0.5が簡単になります！重要;
-o-transition：すべての0.5が簡単になります！重要;
-ms-transition：すべての0.5秒が簡単になります！重要;
遷移：すべての0.5秒が簡単になります！重要;
}
</ style>
<スクリプト>
jQuery（function（$）{
$（'＃slide-in-open'）。click（function（）{
$（this）.toggleClass（'open'）;
$（'。slide-in-menu-container'）。toggleClass（'slide-in-menu'）;
}）;
}）;
</ script>コードは、クリック機能の効果を処理し、ハンバーガーアイコンのスパンをスタイル設定してから、アイコンがクリックされたときにメニューをスライドさせる必要があります。
スライドインメニューが完成したら、プロジェクトを保存し、Diviテーマビルダーで[すべての変更を保存]をクリックして変更を適用しましょう。 私たちのウェブサイトの投稿でメニューを見てみましょう。
