Diviのテーマビルダーを使用してモバイル折りたたみネストメニューを作成する方法
公開: 2019-12-12しばらく前に、折りたたむネストされたメニューを作成するのに役立つモバイルメニューハックを共有しました。 多くの方がご利用いただいていることは承知しておりますが、新しいDivi Theme Builderを使用すると、アプローチが少し異なります。 今日のチュートリアルでは、Diviテーマビルダー内のメニューモジュールにモバイル折りたたみ効果を適用する方法を紹介します。 このチュートリアルには、3つの主要な部分があります。
- メニューを設定し、メニュー項目に正しいクラスを割り当てます
- テーマビルダーとメニューモジュールを使用してメニューを作成する
- テーマビルダー内にカスタムコードを追加する
テンプレートJSONファイルも無料でダウンロードできます！ それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
モバイル
デスクトップ
グローバルヘッダーデザインを無料でダウンロード
重要：JSONファイルをダウンロードしてテーマビルダーにアップロードした後も、正しいCSSクラスを使用してメニューを手動で設定し、CSSおよびJQueryコードを使用してコードモジュールを追加する必要があります（この投稿のステップ1および3） 。
無料の折りたたみネストメニューを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
私たちのYoutubeチャンネルを購読する
1.メニューを設定します
メニュー項目とサブメニュー項目を追加する
あなたがする必要がある最初のことはあなたのメニューを作成することです。 選択したサブアイテムを追加します。
CSSクラスオプションを追加
メニュー項目を追加したら、[画面オプション]をクリックして[CSSクラス]を有効にすることで、CSSクラスオプションを有効にできます。
サブメニュー項目を含む第1レベルのメニュー項目にCSSクラスを追加する
サブメニュー項目を含む第1レベルのメニュー項目にCSSクラスを追加して続行します。 この例では、CSSクラスを「サービス」および「ポートフォリオ」メニュー項目に追加することを意味します。
- CSSクラス：第1レベル
CSSクラスを第2レベルのメニュー項目に追加してメニューを保存する
次に、メニューの第2レベルのメニュー項目に別のCSSクラスを割り当てます。 このCSSクラスを第2レベルのメニュー項目にのみ追加するようにしてください（さらにレベルを追加する場合）。 このチュートリアルの後半では、このCSSクラスと、第1レベルのメニュー項目に割り当てたクラスを使用して、折りたたみするネストされたメニューを作成します。
- CSSクラス：第2レベル
2. Divi Theme Builderに移動し、グローバルヘッダーの作成を開始します
Diviテーマビルダーに移動します
このチュートリアルの次のパートでは、ヘッダーデザインの作成に焦点を当てます。 （メニューモジュールを使用して）既に作成したヘッダーにネストされた手法を適用する場合は、この手順をスキップして、チュートリアルの最後の部分に進むことができます。 デザインを再作成する場合は、引き続き手順に従ってください。 Diviテーマビルダーに移動します。
グローバルヘッダーの作成を開始します
次に、グローバルヘッダーの作成を開始します。
セクション設定
間隔
テンプレートエディタ内に、セクションがあります。 そのセクションを開き、デフォルトの上部と下部のパディングをすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
Zインデックス
セクションのzインデックスも増やします。
- Zインデックス：99999
新しい行を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行の設定を開き、行が画面の幅全体を占めるようにします。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 列の高さを等しくする：はい
- 幅：100％
- 最大幅：100％
間隔
次に、デフォルトの上下のパディングをすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
主な要素
行のメイン要素にも1行のCSSコードを追加して、すべてのモジュールが小さい画面サイズで隣り合って表示されるようにします。
display: flex;
列1
間隔
次に、列1の設定を開き、カスタムの上部と下部のパディングを追加します。
- トップパディング：20px
- ボトムパディング：20px
国境
境界線の半径も追加します。
- 右上：100px
- 右下：100px
ボックスシャドウ
そして、微妙なボックスシャドウを追加して、列1の設定を完了します。
- ボックスシャドウの水平位置：20px
- ボックスシャドウブラー強度：50px
- 影の色：rgba（0,0,0,0.15）
列2
間隔
次に2番目の列の設定を開き、上下のパディングを追加します。
- トップパディング：20px
- ボトムパディング：20px
列3
グラデーションの背景
次の最後の列に進みます。 グラデーションの背景を追加します。
- 色1：＃26c699
- 色2：＃abe02f
- 勾配方向：116度
間隔
次に、カスタムの上部と下部のパディングを追加します。
- トップパディング：20px
- ボトムパディング：20px
国境
次に、境界線の設定に移動し、次の変更を加えます。
- 左上：100px
- 左下：100px
ボックスシャドウ
ボックスシャドウを追加して、列の設定を完了します。
- ボックスシャドウの水平位置：-26px
- ボックスシャドウの垂直位置：0px
- 影の色：＃d2ff0c
列1に画像モジュールを追加
ロゴをアップロード
列1の画像モジュールから始めて、モジュールを追加します。ロゴをアップロードします。
配置
次に、モジュールの画像配置を変更します。
- 画像の配置：中央
サイジング
さまざまな画面サイズで幅を変更して、モジュールの設定を完了します。
- 幅：120px（デスクトップ）、80px（タブレットと電話）
メニューモジュールを列2に追加
メニューを選択
2列目では、必要なモジュールはメニューモジュールのみです。 このチュートリアルの最初の部分で作成したメニューを選択します。
背景色を削除する
次に、モジュールの背景色を削除します。
レイアウト
次に、レイアウト設定を変更します。
- スタイル：中央揃え
- ドロップダウンメニューの方向：下向き
メニューテキスト
メニューテキストもスタイル設定します。
- メニューフォント：Montserrat
- メニューフォントの太さ：中
- メニューテキストの色：＃000000
- メニューテキストサイズ：13px
- メニューの文字間隔：1px
ドロップダウンメニュー
ドロップダウンメニュー設定でいくつかの色を変更して続行します。
- ドロップダウンメニューの背景色：#ffffff
- ドロップダウンメニューの線の色：＃000000
アイコン
アイコン設定でハンバーガーメニューのアイコンの色を変更して、モジュールの設定を完了します。
- ハンバーガーメニューアイコンの色：＃000000
列3にテキストモジュールを追加
コンテンツを追加する
次の最後のモジュール、つまり列3のテキストモジュールに進みます。選択したコピーをいくつか追加します。
リンクを追加
次に、モジュールへのリンクを追加します。
- モジュールリンクURL：＃
テキスト設定
[デザイン]タブに移動し、それに応じてテキスト設定を変更します。
- テキストフォント：Montserrat
- テキストフォントの太さ：半太字
- テキストの色：#ffffff
- テキストサイズ：16px
- テキスト行の高さ：1em
- テキストの配置：中央
間隔
トップマージンを追加して、モジュールの設定を完了します。
- トップマージン：10px
3.コードモジュールを使用してメニューに機能を追加する
列2にコードモジュールを追加する
ヘッダーのデザインが完了したら、モバイルメニューを折りたたみのネストされたメニューに変換するカスタムコードを追加します。 コードモジュールを2番目の列（または他の場所）に追加します。
CSSとJQueryコードを挿入する
次に、CSSとJQueryのコードを追加します。 CSSコードはスタイルタグの間に配置し、JQueryコードはスクリプトタグの間に配置してください。
.et_mobile_menu .first-level > a {
background-color: transparent;
position: relative;
}
.et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
.et_mobile_menu .first-level > .icon-switch:after{
content: '\4d';
}
.second-level {
display: none;
}
.reveal-items {
display: block;
}
.et_mobile_menu {
margin-top: 20px;
width: 230%;
margin-left: -65%;
}(function($) {
function setup_collapsible_submenus() {
var FirstLevel = $('.et_mobile_menu .first-level > a');
FirstLevel.off('click').click(function() {
$(this).attr('href', '#');
$(this).parent().children().children().toggleClass('reveal-items');
$(this).toggleClass('icon-switch');
});
}
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
})(jQuery);
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
モバイル
デスクトップ
最終的な考え
この投稿では、折りたたまれたネストされたメニューをテーマビルダー内のグローバルヘッダーに適用する方法を示しました。 プライマリメニューバーを作成することから始め、メニューモジュールを使用してテーマビルダー内のヘッダーを設計し、エフェクトを機能させるカスタムコードを追加してチュートリアルを完了しました。 このチュートリアルを楽しんでいただけたでしょうか。ご不明な点がございましたら、下のコメントセクションにコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。