作成しますか スライドとプッシュメニュー DIVIで あなたのページの要素を隠さないのはどれですか？
多くのナビゲーション リンクを含む大きなヘッダーは、 サイトのWeb。 このため、コンテキスト メニューとスライドアウト メニューの人気が高まっています。 ほとんどの場合、スライドして表示されるメニューは、 コンテンツ ページの一部の要素を非表示にします。
ただし、スライド プッシュ メニューの動作は少し異なります。 スライド プッシュ効果は、メニューをページの上部からスライドさせながら同時にメニューを押し込むという点で独特です。 コンテンツ ページから一番下まで移動できるため、何も表示されなくなります。
このチュートリアルでは、DiviThemeBuilderを使用してスライディングプッシュメニューを最初から作成する方法を示します。
行こう！
概要
このチュートリアルで作成するスライディングプッシュメニューを簡単に見てみましょう。
Diviテーマビルダーを使用してスライディングプッシュメニューを作成します
新しいグローバルメニューの作成
メニューを作成するには、Diviテーマビルダー内に新しいグローバルヘッダーを作成します。
Divi>ThemeBuilderに移動します。
また読みます： DIVIでログインフォームを使用してグローバルヘッダーを作成する方法
次に、[グローバル ヘッダーの追加] 領域をクリックします。 ウェブサイトのテンプレート デフォルトで。 ドロップダウン リストから、[グローバル ヘッダーのビルド] を選択します。
プッシュメニューの作成
一緒に構築する最初の要素は、プッシュメニューセクションです。 このセクションには、メニュートグルボタンをクリックすると上下にトグルするメニュー項目が含まれます。
セクション設定
デフォルトのセクション設定を開き、次のように設定を更新します。
バックグラウンド
- 背景：＃1a1e36
内部マージン
- 内部マージン：0px上、0px下
CSSクラス
[詳細設定]タブで、JSコードの後半で使用される次のCSSクラスを追加します。
- CSSクラス：et-push-menu
1行を追加する
セクションパラメータを定義したら、セクションにXNUMX列の行を作成します。
1行目のパラメータ
次に、ラインパラメータを次のように更新します。
サイズ剤
- カスタムガター幅を使用：はい
- 列間隔：1
- 最大幅：100％
- 最大幅：1ピクセル
スペーシング
- マージン：上3vh、下3vh
国境
- 下枠幅：1px
- 下の境界線の色：rgba（255,255,255,0.2）
カスタムCSS
[詳細設定]タブで、次のカスタムCSSをメイン要素に追加します。
display:flex;
justify-content:center;
align-items:center;
列パラメーター
行設定が定義されたら、列設定を開き、カスタムCSSスニペットをメイン要素に追加します。
display:flex;
align-items:center;
justify-content:center;これにより、中央に配置されます コンテンツ 列の垂直方向と水平方向の両方。
ボタンを追加
これで、Buttonモジュールを使用してメニュー項目の追加を開始する準備が整いました。 列に新しいボタンを追加することから始めます。
次のガイドも参照してください。 DIVIで垂直ナビゲーションメニューを作成する方法
ボタン設定
次に、ボタンの設定を次のように更新します。
中身
- ボタンのテキスト：デザイン
- ボタンリンクURL：＃（後で独自のカスタムURLに置き換えます）
形式
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストの色：#ffffff
- ボタンの境界線の幅：0ピクセル
- ボタンフォント：Montserrat
- ソフトライトボタン：ヘビー
- アイコンボタン：はい
- アイコンボタン：[あなたの選択]
- ホバーボタンにアイコンのみを表示：いいえ
- ボタンアイコンの配置：左
重複する列
ここで、メニューの追加ボタンを作成するために、列を複製できます。 このデザインでは、列を4回複製して、5列の行に合計XNUMXつのメニュー項目/ボタンを作成します。
2行を追加する
最初の行が完成したら、別のメニュー項目のセットに使用できるボタンの別の行を追加する準備が整いました。
また読む： DIVIのグローバルヘッダーに連絡フォームを追加する方法
次の行を作成するには、行1を複製します。
XNUMXつを除くすべての列を削除します
次に、重複する行のXNUMX列を除くすべてを削除します。
2行目のパラメータ
2行目のパラメータを次のように更新します。
- 最大幅：1ピクセル
- 下枠幅：0px
列パラメーター
次に、次のように列に境界線を追加します。
- 右ボーダー幅：1px
- 右の境界線の色：rgba（255,255,255,0.2）
ボタン設定の更新
列に正しい境界線が表示されたら、ボタン設定を開き、以下を更新します。
- ボタンのテキストサイズ：14px
- ソフトライトボタン：太字のテキスト
- ボタンの文字間隔：2ピクセル
- ボタンコピースタイル：TT
- アイコンボタン：いいえ
重複する列
前と同じように、列を複製して追加のボタンと列を作成しましょう。 このデザインでは、列を3回複製して、4列の行に合計4つのボタンを作成します。
最後の列から境界線を削除します
最後の列に正しい境界線を付けたくないので、列4の設定を開き、境界線の幅を更新します。
- 右ボーダー幅：0px
メインヘッダーバーの作成
次に、メインのヘッダー バー セクションを作成します。 このヘッダー バーは常に表示されたままになり、サイトのロゴ、行動を促すフレーズ、メニューの切り替えボタンが表示されます。
セクションを追加する
新しいセクションを追加する前に、前のセクションのラベルを更新して「プッシュメニューセクション」を読むことをお勧めします。
参照してください： DIVIでテーマビルダーを使用してグローバルヘッダーを作成する方法
次に、最初のセクションの下に新しいセクションを作成します。
セクション設定
次に、新しいセクションのラベルを「ヘッダーセクション」に更新します。 次に、セクション設定を開き、以下を更新します。
スペーシング
- 内部マージン：0px上、0px下
行を追加する
セクションのパディングを設定したら、セクションにXNUMX列の行を追加します。
ライン設定
行パラメーターを開き、以下を更新します。
サイズ剤
- 側溝幅：1
- 幅：90％
- 高さ：70px
スペーシング
- 内部マージン：0px上、0px下
カスタムCSS
[詳細設定]タブで、次のカスタムCSSをメイン要素に追加します。
display:flex;
align-items:center;これにより、行の列が垂直方向に中央揃えになります。
ボタンを追加
ヘッダーセクションにメインCTAを作成するには、上部セクションの1番目の行ボタンを使用できます。 上部セクションの行2の列1からボタンをコピーし、ヘッダーセクションの行の列XNUMXに貼り付けます。
ボタン設定の更新
次に、重複するボタン設定を開き、以下を更新します。
- ボタンテキスト：登録
- ボタンのテキストサイズ：14px
- ボタンのテキストの色：＃1a1e36
- アイコンボタン：はい
- アイコンボタン：右矢印（スクリーンショットを参照）
ロゴを追加する
中央の列に、画像モジュールを追加します。 これが、サイトのロゴを動的に追加する方法になります。
画像領域にカーソルを合わせ、[動的コンテンツを使用]アイコンをクリックします。 ドロップダウンメニューから、[サイトのロゴ]を選択します。
画像設定
次に、[スタイル]タブで、以下を更新します。
- 画像の配置：中央揃え
- 最大高さ：55ピクセル
カスタムハンバーガーアイコンを追加する
レイアウトモジュールを介して通常のアイコンをメニュートグルとして使用できますが、このチュートリアルでは、クールなトランジション効果を備えたカスタムメニュートグルを追加すると思いました。
テキストモジュールを追加する
メニューアイコンを作成するには、外部CSSでスタイル設定されるカスタムHTMLコードを含むテキストモジュールを使用します。
先に進み、テキストモジュールを列3に追加します。
テキストモジュールにHTMLコードを追加する
次に、テキストモジュールのコンテンツに次のHTMLコードを追加します。
<p><span class="line line-1"></span><br /> <span class="line line-2"></span><br /> <span class="line line-3"></span></p>
バックグラウンド
テキストモジュールに背景色を付けます。
- 背景色：＃1a1e36
テキストのフォーマット
次に、スタイル設定を次のように更新します。
- 幅：70ピクセル
- モジュールの配置：右
- 高さ：70px
- 内部マージン：上20px、下20px、左16px、右16px
CSSクラス
[詳細設定]タブで、次のCSSクラスを追加します。
- CSSクラス：et-push-menu-toggle
コードを追加
このスライディングプッシュメニューを機能させるために必要な機能を家に持ち帰るために、カスタムCSSとjQueryをコードモジュールに追加します。
先に進み、テキストモジュールの下の列3にコードモジュールを追加します。
次に、次のコードを貼り付けます（注：このコードをタグでラップします 正しく機能するため）：
.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 );
ボタンのテキストとリンクを更新する
最後に、必要なボタンテキストとリンクURLですべてのボタンを更新できます。
されております ！
設定を保存する
テーマビルダーのレイアウトと設定を保存することを忘れないでください。
最終結果
最終結果を確認するには、 ウェブサイト.
スティッキーにする
メニューの「スティッキー」バージョンが必要な場合は、次のCSSコードスニペットをコードモジュール（スタイルタグの間）に追加するだけです。
header {
position: sticky;
top:0;
z-index:9999;
}#page-container {
overflow-y: visible !important;
}
結果は次のとおりです。
今すぐDIVIをダウンロード!!!
まとめ
このスライディングプッシュメニューをお楽しみください。 その効果は独特であり、より創造的なヘッダーへの扉を開きます。 懸念や提案がある場合は、 コメントセクション それを議論する。
ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
