Diviのテーマビルダーを使用してレスポンシブスライドインメニューを作成する方法

公開: 2020-04-15

あなた自身のクライアントのためにウェブサイトをセットアップするとき、あなたはあなた自身がどんなタイプのヘッダーを構築するべきかについて考えていることに気付くでしょう。 Webで最もよく使用されるのは、上部の水平メニューバーですが、スライドインメニューなどの他のオプションもあります。 スライドインメニューは、グローバルヘッダーが占めるスペースを制限するのに役立ちます。 すべてのメニュー項目をすぐに表示するのではなく、訪問者が右上隅にあるハンバーガーアイコンをクリックしたときに、スライドインメニューを表示させることができます。 スライドインメニューを使用すると、Webサイトにインタラクションを追加するのに役立ちます。

今日のユースケースDiviチュートリアルでは、Diviのテーマビルダー、組み込みのDivi要素、およびいくつかの追加コードを使用して作成する方法を示します。 このスライドインメニューのデザインは、Yoga Instructor Layout Packと完全に一致していますが、作成するWebサイトに合わせて自由に変更できます。 JSONファイルも無料でダウンロードできます！

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

スライドインメニュー

モバイル

スライドインメニュー

レスポンシブスライドインメニューのグローバルヘッダーテンプレートを無料でダウンロード

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

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

無料でダウンロード

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

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

1. Divi Theme Builderに移動し、グローバルヘッダーの作成を開始します

Diviテーマビルダーに移動します

WordPressWebサイトのバックエンドにあるDiviTheme Builderに移動し、[グローバルヘッダーの追加]をクリックすることから始めます。

スライドインメニュー

グローバルヘッダーの作成を開始します

[グローバルヘッダーの作成]を選択して続行します。

スライドインメニュー

2.ヘッダーデザインを作成します

セクション設定

背景色

テンプレートエディタに入ると、セクションが表示されます。 そのセクションを開き、背景色を透明にします。

  • 背景色：rgba（255,255,255,0）

スライドインメニュー

間隔

デザインタブに移動し、デフォルトの上下のパディングをすべて削除します。

  • トップパディング：0px
  • ボトムパディング：0px

スライドインメニュー

ポジション

次に、[詳細設定]タブに移動し、位置設定を変更して、セクションを修正します。

  • 位置：固定
  • 場所：トップセンター

スライドインメニュー

行＃1を追加

カラム構造

セクションの設定が完了したら、次の列構造を使用して新しい行を追加します。

スライドインメニュー

サイジング

モジュールをまだ追加せずに、行設定を開き、次のようにサイズ設定を変更します。

  • 幅：97％
  • 最大幅：100％

スライドインメニュー

間隔

次に間隔設定を変更します。

  • トップパディング：1％
  • ボトムパディング：0px

スライドインメニュー

主な要素

次に、[詳細設定]タブに移動し、2行のCSSコードを行のメイン要素に追加します。 これにより、行の列コンテンツを垂直方向に揃えることができます。 

display: flex;
align-items: center;

スライドインメニュー

列1に画像モジュールを追加

ロゴをアップロード

列1の画像モジュールから始めて、モジュールを追加します。ロゴをアップロードします。

スライドインメニュー

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

コンテンツボックスに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

スライドインメニュー

行＃2を追加

カラム構造

次の行へ！ この行を使用して、スライドインメニュー全体をデザインします。 次の列構造を使用します。

スライドインメニュー

背景色

モジュールを追加せずに、行設定を開き、次のように背景色を変更します。

  • 背景色：＃e7e0e2

スライドインメニュー

背景画像

パターンの背景画像も使用しています。 使用した画像は、このチュートリアルの最初にダウンロードできたダウンロードフォルダーにありますが、他の任意の背景パターンを自由に使用してください。

  • 背景画像サイズ：実際のサイズ
  • 背景画像の位置：中央
  • 背景画像の繰り返し：繰り返し

スライドインメニュー

サイジング

次に、[デザイン]タブに移動し、それに応じてサイズ設定を変更します。

  • カスタムガター幅を使用：はい
  • 側溝幅：1
  • 幅：20％（デスクトップ）、40％（タブレット）、60％（電話）
  • 高さ：100vh

スライドインメニュー

間隔

さまざまな画面サイズの間隔設定も変更します。

  • トップパディング：10vw（デスクトップ）、30vw（タブレット）、40vw（電話）

スライドインメニュー

国境

そして、左の境界線を追加して行の設定を完了します。

  • 左ボーダー幅：10px
  • 左ボーダーの色：＃24394a
  • 左ボーダースタイル：ダブル

スライドインメニュー

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

コンテンツを追加する

最初のメニュー項目テキストモジュールを追加する時が来ました！ コピーをコンテンツボックスに追加します。

スライドインメニュー

リンクを追加

メニュー項目に関連するリンクを追加して続行します。

  • モジュールリンクURL：＃

スライドインメニュー

背景色

次に背景色を変更します。

  • 背景色：rgba（216,210,212,0.35）

スライドインメニュー

テキスト設定

次に、[デザイン]タブに移動し、次のようにテキスト設定を変更します。

  • テキストフォント：Domine
  • テキストフォントの太さ：太字
  • テキストの色：＃000000
  • テキストサイズ：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
  • テキストの配置：中央

スライドインメニュー

間隔

さまざまな画面サイズにカスタム間隔値を追加して、モジュール設定を完了します。

  • 下マージン：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
  • トップパディング：1vw
  • ボトムパディング：1vw

スライドインメニュー

クローンテキストモジュール（メニュー項目ごとに1つのモジュール）

最初のメニュー項目のテキストモジュールを完了すると、必要な回数だけクローンを作成できます。 モジュールがビューポートの高さを超えないようにしてください。

スライドインメニュー

重複するテキストモジュールのコンテンツとリンクを変更する

重複する各テキストモジュールのコンテンツとリンクを変更します。

スライドインメニュー

スライドインメニュー

ボタンモジュールを列に追加

コピーを追加

この行で必要な最後のモジュールはボタンモジュールです。 選択したコピーをいくつか追加します。

スライドインメニュー

リンクを追加

リンクも追加します。

  • ボタンリンクURL：＃

スライドインメニュー

配置

デザインタブに移動し、ボタンの配置を変更します。

  • ボタンの配置：中央

スライドインメニュー

ボタンの設定

次のようにボタンモジュールのスタイルを設定して続行します。

  • ボタンにカスタムスタイルを使用する：はい
  • ボタンのテキストサイズ：0.7vw（デスクトップ）、1.5vw（タブレット）、2.5vw（電話）
  • ボタンのテキストの色：＃000000
  • ボタンの背景色：rgba（0,0,0,0）
  • ボタンの境界線の色：＃24394a
  • ボタンの境界線半径：0px
  • ボタンの文字間隔：4px

スライドインメニュー

  • ボタンフォント：Sansを開く
  • ボタンのフォントの太さ：太字
  • ボタンのフォントスタイル：大文字

スライドインメニュー

間隔

そして、さまざまな画面サイズにカスタム間隔値を追加して、モジュール設定を完了します。

  • トップマージン：5vw
  • トップパディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
  • 下部のパディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
  • 左パディング：1.8vw（デスクトップ）、3vw（タブレット）、4vw（電話）
  • 右パディング：1.8vw（デスクトップ）、3vw（タブレット）、4vw（電話）

スライドインメニュー

3.スライドイン機能を追加します

メニューアイコンテキストモジュールにCSSIDを追加します

すべての要素が揃ったので、レスポンシブなスライドインメニュー効果を作成します。 まず、最初の行の3番目の列にあるテキストモジュール（スパンを含む）を開き、[詳細設定]タブでカスタムCSSIDを使用します。 このCSSIDを使用して、コードにクリック関数を作成します。

  • CSS ID：スライドインオープン

スライドインメニュー

行＃2にCSSクラスを追加します

次に、2番目の行を開き、[詳細設定]タブに移動して、カスタムCSSクラスを追加します。 クリックすると、行をスライドさせます。

  • CSSクラス：slide-in-menu-container

スライドインメニュー

行＃2の位置を変更する

この行も再配置します。 サイズ設定で、水平オフセットがさまざまな画面サイズで行の幅とどのように一致するかに注目してください。

  • 位置：絶対
  • 場所：右上
  • 水平オフセット：-20％（デスクトップ）、-40％（タブレット）、-60％（電話）

スライドインメニュー

行＃2の不透明度を変更する

そして、デフォルトの状態で不透明度を0にします。 

opacity: 0;

スライドインメニュー

最初の行の2番目の列にコードモジュールを追加する

CSSコードを挿入

クリック機能効果を作成し、ハンバーガーアイコンのスパンのスタイルを設定するには、CSSコードが必要です。 最初の行の2番目の列にコードモジュールを追加し、下の印刷画面でわかるように、スタイルタグの間にCSSコードの次の行を配置します。 

#slide-in-open{
cursor: pointer;
}

.line{
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #24394A;
border-radius: 9px;
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;
}

#slide-in-open.open .line-1 {
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}

#slide-in-open.open .line-2 {
display: none;
}

#slide-in-open.open .line-3 {
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}

.slide-in-menu {
right: 0 !important;
opacity: 1 !important;
}

.slide-in-menu-container {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

スライドインメニュー

JQueryコードを挿入する

クリック関数にもJQueryを追加する必要があります。 以下の印刷画面でわかるように、スクリプトタグの間にコードを配置してください。 

jQuery(function($){
$('#slide-in-open').click(function(){
$(this).toggleClass('open');
$('.slide-in-menu-container').toggleClass('slide-in-menu');
});
});

スライドインメニュー

4.テーマビルダーの変更を保存してWebサイトに結果を表示する

グローバルヘッダーのすべての要素を完了したら、あとはすべての変更を保存して、Webサイトで結果を表示するだけです。

スライドインメニュー

スライドインメニュー

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

デスクトップ

スライドインメニュー

モバイル

スライドインメニュー

最終的な考え

この投稿では、Diviのテーマビルダーを使用して、次のDiviプロジェクト用のレスポンシブスライドインメニューを作成する方法を紹介しました。 Diviの最高の組み込み要素とオプションを、いくつかのカスタムクリック関数コードと組み合わせました。 これにより、スライドインメニューの設計に集中し、コードでグローバルヘッダーの機能部分を引き継ぐことができます。 JSONファイルも無料でダウンロードできました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。