Diviでスライドダウンプッシュメニューを作成する方法

公開: 2020-07-22

ナビゲーションリンクがたくさんある大きなヘッダーは、サイトの貴重なスペースを大量に消費する可能性があります（特に折り目の上）。そのため、ポップアップやスライドインのメニューがますます人気になっています。ほとんどの場合、スライドして表示するメニューはページのコンテンツの上にとどまり、特定の要素を非表示にします。ただし、スライド式プッシュメニューの動作は少し異なります。スライドプッシュ効果は、メニューがページの上部からスライドインすると同時にページコンテンツを押し下げるという点で独特であり、ビューから隠されるものはありません。

このチュートリアルでは、Divi ThemeBuilderを使用してスライドプッシュメニューを最初から作成する方法を紹介します。メニューが作成されると、Divi Builderを使用してセクションに必要なコンテンツを入力できるため、すべてのタイプのアプリケーションに対応する汎用ツールになります。

それを手に入れよう！

スニークピーク

これは、このチュートリアルで作成するスライド式プッシュメニューの概要です。

レイアウトを無料でダウンロード

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

正常にサブスクライブしました。メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

セクションレイアウトをDiviテーマビルダーにインポートするには、Diviテーマビルダーに移動します。

移植性アイコンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

完了すると、セクションテンプレートがDiviテーマビルダーに表示されます。

divi-sliding-push-menu

チュートリアルに取り掛かりましょう。

Diviテーマビルダーを使用したスライディングプッシュメニューの作成

新しいグローバルメニューの作成

メニューを作成するために、Diviテーマビルダー内に新しいグローバルヘッダーを作成します。

Divi> ThemeBuilderに移動します。

次に、デフォルトのWebサイトテンプレート内の[グローバルヘッダーの追加]領域をクリックします。ドロップダウンから、「グローバルヘッダーの作成」を選択します。

divi-sliding-push-menu

これにより、グローバルヘッダーレイアウトエディターが表示されます。

グローバルヘッダーレイアウトエディタが表示されたら、[最初から作成]オプションを選択します。

divi-sliding-push-menu

プッシュメニューの作成

一緒に構築する最初の要素は、プッシュメニューセクションです。このセクションには、メニュー切り替えボタンをクリックしたときに上下に切り替わるメニュー項目が表示されます。

セクション設定

デフォルトセクションの設定を開き、次のように設定を更新します。

バックグラウンド

背景色：＃1a1e36

divi-sliding-push-menu

パディング

パディング：0px上、0px下

divi-sliding-push-menu

CSSクラス

[詳細設定]タブで、JSコードの後半で使用される次のCSSクラスを追加します。

CSSクラス：et-push-menu

divi-sliding-push-menu

カスタムCSS（タブレット）

次に、追加するメインヘッダーバーに対応するために、計算された高さを使用してモバイルのセクションの高さを調整する必要があります。これにより、ユーザーがメニューを開くように切り替えたときに、セクションがモバイルのウィンドウの高さ全体に広がるようになります。

次のカスタムCSSをタブレットのメイン要素にのみ追加します。

height: calc(100vh - 70px);
overflow:scroll !important;
overscroll-behavior: contain;

divi-sliding-push-menu

行1を追加

セクションの設定が完了したら、セクション内に1列の行を作成します。

divi-sliding-push-menu

行1の設定

次に、次のように行設定を更新します。

設計

側溝幅：1
幅：100％
最大幅：1280px
パディング：3vh上、3vh下
下の境界線の幅：1px
下の境界線の色：rgba（255,255,255,0.2）

divi-sliding-push-menu

カスタムCSS

[詳細設定]タブで、次のカスタムCSSをメイン要素に追加します。

デスクトップの下…

display:flex;
justify-content:center;
align-items:center;

タブレットの下で…

display:flex;
flex-direction:column;
align-items:center;

divi-sliding-push-menu

列の設定

行の設定が完了したら、列の設定を開き、カスタムCSSスニペットをメイン要素に追加します。

display:flex;
align-items:center;
justify-content:center;

これにより、列の内容が垂直方向と水平方向の両方で中央に配置されます。

divi-sliding-push-menu

追加ボタン

これで、ボタンモジュールを使用してメニュー項目の追加を開始する準備が整いました。列に新しいボタンを追加することから始めます。

divi-sliding-push-menu

ボタンの設定

次に、ボタンの設定を次のように更新します。

コンテンツ

ボタンテキスト：デザイン
ボタンリンクURL：＃（後でこれを独自のカスタムURLに置き換えます）

divi-sliding-push-menu

設計

ボタンのテキストの色：#ffffff
ボタンの境界線の幅：0px
ボタンフォント：Montserrat
ボタンのフォントの太さ：重い
ボタンアイコン：[あなたの選択]
ボタンアイコンの配置：左

divi-sliding-push-menu

列の複製

メニューの追加ボタンを作成するために、列を複製できます。このデザインでは、列を4回複製して、合計5つのメニュー項目/ボタンを作成します。 5列の行で。

divi-sliding-push-menu

行2を追加

最初の行が完了すると、別のメニュー項目のセットに使用できるボタンの別の行を追加する準備が整います。

次の行を作成するには、行1を複製します。

divi-sliding-push-menu

1つを除くすべての列を削除する

次に、重複する行内の1つを除くすべての列を削除します。

divi-sliding-push-menu

行2の設定

行2の設定を次のように更新します。

最大幅：1080px
下の境界線の幅：0px

divi-sliding-push-menu

列の設定

次に、次のように列に境界線を追加します。

右ボーダー幅：1px
右の境界線の色：rgba（255,255,255,0.2）

divi-sliding-push-menu

ボタン設定の更新

列に右側の境界線が表示されたら、ボタンの設定を開き、以下を更新します。

ボタンのテキストサイズ：14px
ボタンの文字間隔：2px
ボタンのフォントの太さ：半太字
ボタンのフォントスタイル：TT
ボタンアイコンを表示：いいえ

divi-sliding-push-menu

列を複製する

以前と同じように、列を複製して追加のボタンと列を作成しましょう。この設計では、列を3回複製して、4列の行に合計4つのボタンを作成します。

divi-sliding-push-menu

最後の列の境界線を削除する

最後の列に正しい境界線を設定したくないので、列4の設定を開き、境界線の幅を更新します。

右ボーダー幅：0px

divi-sliding-push-menu

メインヘッダーバーの作成

次に、メインヘッダーバーのセクションを作成します。このヘッダーバーは常に表示されたままで、サイトのロゴ、CTA、およびメニューの切り替えボタンを保持します。

セクションを追加

新しいセクションを追加する前に、前のセクションのラベルを「プッシュメニューセクション」に更新することをお勧めします。

次に、最初のセクションの下に新しいセクションを作成します。

divi-sliding-push-menu

セクション設定

次に、新しいセクションのラベルを更新して、「ヘッダーセクション」を読み取ります。次に、セクション設定を開き、以下を更新します。

パディング

パディング：0px上、0px下

divi-sliding-push-menu

行を追加する

セクションのパディングが追加されたら、セクションに3列の行を追加します。

divi-sliding-push-menu

行設定

行設定を開き、以下を更新します。

サイジング

側溝幅：1
幅：90％
高さ：70px

divi-sliding-push-menu

パディング

パディング：パディング：0px上、0px下

divi-sliding-push-menu

カスタムCSS

[詳細設定]タブで、次のカスタムCSSをメイン要素に追加します。

display:flex;
align-items:center;

これにより、行内の列が垂直方向に中央揃えになります。

divi-sliding-push-menu

追加ボタン

ヘッダーセクションにメインCTAを作成するには、上部セクションの2行目のボタンを使用します。上部セクションの行2の列1からボタンをコピーし、ヘッダーセクションの行の列1に貼り付けます。

divi-sliding-push-menu

ボタン設定の更新

次に、複製ボタンのボタン設定を開き、以下を更新します。

ボタンテキスト：サインアップ
ボタンのテキストサイズ：14px
ボタンのテキストの色：＃1a1e36
ボタンアイコンを表示：はい
ボタンアイコン：右矢印（スクリーンショットを参照）

divi-sliding-push-menu

ロゴを追加

中央の列に、イメージモジュールを追加します。これが、サイトのロゴを動的に追加する方法です。

divi-sliding-push-menu

画像ボックスにカーソルを合わせ、[動的コンテンツを使用]アイコンをクリックします。ドロップダウンから「サイトロゴ」を選択します。

divi-sliding-push-menu

画像設定

次に、[デザイン]タブで、以下を更新します。

画像の配置：中央
最大高さ：55px

divi-sliding-push-menu

カスタムハンバーガーアイコンを追加

メニュートグルとして宣伝文句モジュールを介して通常のアイコンを使用することもできますが、このチュートリアルでは、クールなトランジション効果を備えたカスタムメニュートグルを追加すると思いました。

テキストモジュールを追加

メニューアイコンを作成するには、外部CSSでスタイル設定されるカスタムHTMLを含むテキストモジュールを使用します。

先に進み、列3にテキストモジュールを追加します。

divi-sliding-push-menu

テキストモジュールHTMLを追加

次に、テキストモジュールのコンテンツに次のHTMLを追加します。

<p><span class="line line-1"></span><br /> <span class="line line-2"></span><br /> <span class="line line-3"></span></p>

divi-sliding-push-menu

バックグラウンド

テキストモジュールに背景色を付けます。

背景色：＃1a1e36

divi-sliding-push-menu

テキストデザイン

次に、次のように設計設定を更新します。

幅：70px
モジュールの配置：右
高さ：70px
パディング：上20px、下20px、左16px、右16px

divi-sliding-push-menu

CSSクラス

[詳細設定]タブで、次のCSSクラスを追加します。

CSSクラス：et-push-menu-toggle

divi-sliding-push-menu

コードを追加

このスライディングプッシュメニューが機能するために必要な機能を持ち帰るために、カスタムCSSとjQueryをコードモジュールに追加します。

先に進み、テキストモジュールの下の列3にコードモジュールを追加します。

divi-sliding-push-menu

次に、次のコードを貼り付けます（重要：正しく機能するように、このコードをスタイルタグでラップします）。

  .line {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #ffffff;
    opacity: 1;
    -webkit-transition: .1s ease-in-out;
    -moz-transition: .1s ease-in-out;
    -o-transition: .1s ease-in-out;
    transition: .1s ease-in-out;
  }
  .line-2 {
    top: 10px;
  }
  .line-3 {
    top: 20px;
  }
  .et-push-menu-toggle.open .line-1 {
    top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  .et-push-menu-toggle.open .line-2 {
    display: none;
  }
  .et-push-menu-toggle.open .line-3 {
    top: 10px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  .et-push-menu {
    display:none;
  }
  .et-fb .et-push-menu {
    display:block;
  }
  .et-push-menu-toggle {
    cursor:pointer;
  }

次に、このコードをコピーしてそのすぐ下に貼り付けます（重要：正しく機能するように、このコードをスクリプトタグでラップします）。

(function($) {
  $(document).ready(function(){
    $('.et-push-menu-toggle').click(function(){
      $(this).toggleClass('open');
      $('.et-push-menu').slideToggle( "300").toggleClass('et-push-menu-active');
    });
  });  
})( jQuery );

divi-sliding-push-menu

ボタンのテキストとリンクを更新する

最後に、必要なボタンテキストとリンクURLですべてのボタンを更新できます。

divi-sliding-push-menu

それでおしまい！

設定を保存する

レイアウトとテーマビルダーの設定を保存することを忘れないでください。

divi-sliding-push-menu

最終結果

最終結果を表示するには、サイトのライブページを確認してください。

粘着性にする

メニューの「スティッキー」バージョンが必要な場合は、次のCSSスニペットをコードモジュール（スタイルタグの間）に追加するだけです。

  header {
    position: sticky;
    top:0;
    z-index:9999;
  }
  #page-container {
    overflow-y: visible !important;
  }

そして、これが結果です。

最終的な考え

このスライディングプッシュメニューをお楽しみください。効果は独特であり、それは将来のより創造的なヘッダーへの扉を開きます。

コメントでお返事をお待ちしております。

乾杯！

Diviでスライドダウンプッシュメニューを作成する方法

スニークピーク

レイアウトを無料でダウンロード

無料でダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

Diviテーマビルダーを使用したスライディングプッシュメニューの作成

新しいグローバルメニューの作成

プッシュメニューの作成

セクション設定

バックグラウンド

パディング

CSSクラス

カスタムCSS（タブレット）

行1を追加

行1の設定

設計

カスタムCSS

列の設定

追加ボタン

ボタンの設定

コンテンツ

設計

列の複製

行2を追加

1つを除くすべての列を削除する

行2の設定

列の設定

ボタン設定の更新

列を複製する

最後の列の境界線を削除する

メインヘッダーバーの作成

セクションを追加

セクション設定

パディング

行を追加する

行設定

サイジング

パディング

カスタムCSS

追加ボタン

ボタン設定の更新

ロゴを追加

画像設定

カスタムハンバーガーアイコンを追加

テキストモジュールを追加

テキストモジュールHTMLを追加

バックグラウンド

テキストデザイン

CSSクラス

コードを追加

ボタンのテキストとリンクを更新する

設定を保存する

最終結果

粘着性にする

最終的な考え

正常にサブスクライブしました。メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。