Diviでスライド式でレスポンシブなサイドメニューを作成したいですか?
作成するとき サイトのWebの場合、どのタイプのヘッダーを作成するべきか迷うことがよくあります。 Web で最もよく使用されるのは上部の水平メニュー バーですが、スライド メニューなどの他のオプションもあります。
ほとんどの場合、スライド メニューは、グローバル ヘッダーが占めるスペースを制限するのに役立ちます。 そのため、スライドアウト メニューを表示させることができます。 訪問者 右上隅のハンバーガー アイコンをクリックします。
したがって、スライドアウト メニューを使用すると、 サイトのWeb.
したがって、このチュートリアルでは、Diviのテーマビルダーを使用して作成する方法を示します。
始めましょう!
調査
このチュートリアルに飛び込む前に、まず、得られる結果を見てみましょう。
テーマビルダーに移動し、グローバルヘッダーを作成します
テーマビルダーに移動します
開始するには、WordPressダッシュボードにあるDiviメニューからテーマビルダーに移動し、[グローバルヘッダーの追加]をクリックします。
グローバルヘッダーを作成する
[グローバルヘッダーの作成]を選択して続行します。
ヘッダースタイルを作成する
セクション設定
背景色
テンプレートエディタに入ると、セクションが表示されます。 このセクションを開き、背景色を透明にします。
- 背景:rgba(255,255,255,0)
スペーシング
[スタイル]タブに切り替えて、下と上の余白をすべて削除します。
- 内側マージン頂点:0px
- 下部内部マージン:0px
投稿する
次に、[詳細設定]タブに移動し、位置設定を変更して、セクションの位置を変更します。
- 位置:固定
- 場所:トップセンター
最初の行を追加します
カラムの構造
セクションの設定が完了したら、次の列構造を使用して新しい行を追加します。
サイズ剤
モジュールをまだ追加せずに、行設定を開き、次のようにサイズ設定を変更します。
- 最大幅:97%
- 最大幅:100%
スペーシング
間隔の設定を変更します。
- ピーク内部マージン:1%
- 下部内部マージン:0px
主な要素
次に、詳細タブに移動し、その行のメイン要素に XNUMX 行の CSS コードを追加します。 これは、垂直方向に整列させるのに役立ちます。 コンテンツ 私たちの行の列の。
display: flex;
align-items: center;
列1に画像モジュールを追加します
ロゴをダウンロードする
1列目の画像モジュールから始めて、モジュールを追加します。ロゴをアップロードします。
列3にテキストモジュールを追加します
コンテンツ領域に3つのスペースを追加します
<spanclass="line line-1"></span>
<spanclass="line line-2"></span>
<spanclass="line line-3"></span>
背景色
モジュールの背景色を変更します。
- 背景:rgba(0,0,0,0.04)
テキスト設定
次に、[スタイル]タブに切り替えて、テキスト行の高さを削除します。 これにより、追加したスコープを完全に制御できるようになります。
- テキスト行の高さ:0em
サイズ剤
モジュールのサイズ設定パラメータを変更します。
- 最大幅:120ピクセル
- テキストの配置:右
スペーシング
そして、モジュールを正方形に変換して、モジュールパラメータを完成させます。 このために、間隔設定でカスタムパディング値を使用します。
- 内側マージン頂点:40px
- 下部内部マージン:60px
- 左内側マージン:40px
- 右内側マージン:40px
XNUMX行目を追加
カラムの構造
次の行! この行を使用して、スライドメニュー全体をデザインします。 次の列構造を使用します。
背景色
モジュールを追加せずに、行設定を開き、次のように背景色を変更します。
- 背景:#e7e0e2
背景画像
また、パターン化された背景画像を使用します。 お好みの背景パターンを使用できます。
- 背景画像サイズ:実寸
- 背景画像の位置:中央
- 背景画像を繰り返す:繰り返し
サイズ剤
次に、[スタイル]タブに切り替えて、それに応じてサイズ設定を変更します。
- カスタムガター幅を使用:はい
- 列間隔:1
- 最大幅:20%(デスクトップ)、40%(タブレット)、60%(電話)
- 高さ:100vh
スペーシング
また、さまざまな画面サイズの間隔設定を変更します。
- サミットの内部マージン:10 vw(デスクトップ)、30 vw(タブレット)、40 vw(電話)
国境
そして、左の境界線を追加して、ラインパラメータを完成させます。
- 左ボーダー幅:10px
- 左ボーダーの色:#24394a
- 左ボーダースタイル:ダブル
列にテキストモジュールを追加します
コンテンツを追加する
最初のテキスト モジュール メニュー項目を追加します。 コピーをボックスに追加します コンテンツ.
リンクを追加
メニュー項目に関連するリンクを追加して続行します。
- モジュールリンクURL:#
背景色
次に、背景色を変更します。
- 背景:rgba(216,210,212,0.35)
テキスト設定
次に、[スタイル] 3タブに切り替えて、テキスト設定を次のように変更します。
- テキストフォント:Domine
- ソフトライトテキスト:太字テキスト
- テキストカラーテキスト:#000000
- テキストテキストサイズ:1vw(デスクトップ)、2vw(タブレット)、3vw(電話)
- テキストの配置:中央揃え
スペーシング
さまざまな画面サイズにカスタム間隔値を追加して、モジュール設定を完了します。
- 下マージン:1vw(デスクトップ)、2vw(タブレット)、3vw(電話)
- ピーク内部マージン:1vw
- 下部内部マージン:1vw
テキストモジュールのクローン(メニュー項目ごとに1つのモジュール)
最初のメニュー項目テキストモジュールを完了すると、必要な回数だけクローンを作成できます。 モジュールがウィンドウの高さを超えないようにしてください。
重複するテキストモジュールのコンテンツとリンクを編集する
を変更します コンテンツ および各 Duplicate Text モジュールのリンク。
ボタンモジュールを列に追加
コピーを追加
この行で必要な最後のモジュールはButtonモジュールです。 選択したコピーを追加します。
リンクを追加
また、リンクを追加します。
- ボタンリンクURL:#
Alignement
[スタイル]タブに切り替えて、ボタンの配置を変更します。
- ボタンの配置:中央に配置
ボタンの設定
ボタンモジュールを次のようにカスタマイズして続行します。
- ボタンにカスタムスタイルを使用する:はい
- ボタンのテキストサイズ:0,7 vw(デスクトップ)、1,5 vw(タブレット)、2,5 vw(電話)
- ボタンのテキストの色:#000000
- 背景ボタン:rgba(0,0,0,0)
- ボタンの境界線の色:#24394a
- ボーダー半径ボタン:0ピクセル
- ボタンの文字間隔:4px
- フォントボタン:開くなし
- ソフトライトボタン:太字のテキスト
- コピースタイルボタン:TT
スペーシング
そして、さまざまな画面サイズにカスタム間隔値を追加して、モジュール設定を完了します。
- トップマージン:5vw
- ピーク内部マージン:1vw(デスクトップ)、2vw(タブレット)、3vw(電話)
- 内側マージン下部:1vw(デスクトップ)、2vw(タブレット)、3vw(電話)
- 左内部マージン:1,8 vw(デスクトップ)、3 vw(タブレット)、4 vw(電話)
- 右内側マージン:1,8 vw(デスクトップ)、3 vw(タブレット)、4 vw(電話)
スライド機能を追加
メニューアイコンテキストモジュールにCSSIDを追加します
すべての要素が揃ったので、レスポンシブなスライディングメニュー効果を作成します。 まず、最初の行のXNUMX番目の列にあるテキストモジュール(スコープを含む)を開き、[詳細設定]タブでカスタムCSSIDを使用します。 このCSSIDを使用して、コードにクリック関数を作成します。
- CSS ID:スライドインオープン
行#2にCSSクラスを追加します
次に、XNUMX行目を開き、[詳細設定]タブに移動して、カスタムCSSクラスを追加します。 クリックすると、線がスライドします。
- CSSクラス:slide-in-menu-container
ライン#2の位置を変更します
この行も再配置します。 サイズ設定のさまざまな画面サイズで、水平オフセットが線幅とどのように一致するかに注目してください。
- 位置:絶対
- 場所:右上
- 水平オフセット:-20%(デスクトップ)、-40%(タブレット)、-60%(電話)
2行目の不透明度を変更します
そして、デフォルト状態で不透明度を0にします。
opacity: 0;
コードモジュールを最初の行のXNUMX番目の列に追加します
CSSコードを挿入します
クリック機能効果を作成し、ハンバーガーアイコンの譜表のスタイルを設定するには、CSSコードが必要です。 最初の行のXNUMX番目の列にコードモジュールを追加し、 次の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: all0.5s ease !important;
-moz-transition: all0.5s ease !important;
-o-transition: all0.5s ease !important;
-ms-transition: all0.5s ease !important;
transition: all0.5s ease !important;
}
JQueryコードを挿入します
また、クリック機能用にJQueryを追加する必要があります。 あなたを確認してください スクリプトタグの間にコードを配置する 、以下の印刷画面でわかるように:
jQuery(function($){$('#slide-in-open')。click(function(){$(this).toggleClass('open'); $('。slide-in-menu-container') .toggleClass('slide-in-menu');});});
テーマビルダーの変更を保存し、結果をWebサイトに表示します
グローバルヘッダーのすべての要素を完了したら、すべての変更を保存して結果をサイトに表示するだけです。
調査
すべての手順を完了したので、最後に結果を見てみましょう。
まとめ
結論として、この記事では、レスポンシブスライディングメニューを作成するためにDiviのテーマビルダーを使用する方法を示しました。 このために、Diviの最高の組み込み要素とオプションをカスタムクリック関数コードと組み合わせました。 したがって、スライドアウトメニューの設計に集中し、コードでグローバルヘッダーの機能部分を処理することができます。
ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。