このチュートリアルでは、Diviの全幅メニューモジュールを使用してドロップダウンメニューボタンを作成する方法を示します。 これを行うには、最初にWordPressでメニューを作成します。 次に、Diviの全幅メニューモジュールを使用して、Diviビルダーと少しのカスタムCSSを使用してカスタムスタイルでそのメニューを表示します。 その結果、実用的でスタイリッシュなドロップダウンメニューボタンができました。
のは、始めましょう。
概要
以下は、このチュートリアルに統合するドロップダウンメニューボタンの概要です。
始めるために必要なもの
開始するには、まだインストールしていない場合は、 Diviテーマ インストールされています (または、Divi Builder プラグインを使用していない場合は Diviテーマ）。 最初に Divi ビルダーを使用して、ドロップダウン メニュー ボタンを設計します。
それでおしまい ！
WordPressでメニューを作成する
Divi Builderでドロップダウンメニューの作成を開始する前に、まず、全幅メニューモジュールに使用するWordPressメニューを作成する必要があります。 これを行うには、WordPressダッシュボードに移動し、[外観]> [メニュー]に移動します。 次に、[新しいメニューの作成]リンクをクリックし、メニュー名を入力して[メニューの作成]ボタンをクリックして、新しいメニューを作成します。
今のところ、リンクテキストとともにURLプレースホルダーとして「＃」を使用してカスタムリンクを作成できます。
トップレベルのメニュー項目にXNUMXつのサブメニュー項目がある「詳細」リンクがあるようにメニュー項目を構成します。
その後、必ずメニューを保存してください。
Divi全角メニューモジュールでドロップダウンメニューボタンを作成する方法
メニューが作成されたら、Diviを使用してドロップダウンメニューボタンの設計を開始できます。 プロジェクトを開始するには、WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）でページを編集します。
その後、Diviでデザインを開始するための空白のキャンバスが作成されます。
偽のコンテンツを作成する
まず、デフォルトの標準セクションにXNUMX列の行を追加します。
テキストモジュールを追加する
次に、次の内容のテキストモジュールを行に追加します。
ディビメニューあなたのコンテンツはここにあります。 このテキストをインラインで、またはモジュールのコンテンツ設定で編集または削除します。 モジュールのデザイン設定でこのコンテンツのあらゆる側面のスタイルを設定したり、モジュールの詳細設定でこのテキストにカスタムCSSを適用したりすることもできます。
次に、設計パラメーターを次のように更新します。
パディングセクション
次に、次の項目でセクション設定を更新します。
- パディング：0pxダウン
行間隔と境界線
セクションの塗りつぶしが更新された後、線の設定を開き、塗りつぶしとわずかな境界線を割り当てます。
- 室内装飾品：上部に10vw、下部に10vw、左側に5vw、右側に5vw
- ボーダーの幅：1px
ドロップダウンメニューボタンを作成する
ドロップダウンメニューボタンを作成するために、全幅メニューモジュールを使用します。 これにより、以前に作成したメニューを追加できます。
全角メニューを追加する
全角メニューモジュールを作成するには、現在の標準セクションの下に新しい全角セクションを追加します。
次に、全幅メニューモジュールを行に追加します。
全幅メニュー設定ポップアップウィンドウ（コンテンツの下）で、ドロップダウンメニューを使用して、表示するメニューを選択します。 これは、以前に作成した「ドロップダウンボタンメニュー」という名前のメニューと同じである必要があります。
次に、メニューのデフォルトの白い背景色を削除します。
全幅メニューモジュールでメニューを追加したら、設定を保存します。 少し後でこのモジュールに戻って、設計を完了します。 ただし、ここでは、全幅セクションに背景を追加します。
全幅セクションのデザインを更新する
全角セクションの設定を開き、次を更新します。
- 左背景のグラデーション：＃0047d6
- 右背景のグラデーションカラー：＃45b2ff
- 最大幅：240px
- セクションの配置：中央
最大セクション幅を240pxに設定しました。これは、Diviのデフォルトのドロップダウンメニュー幅の幅と一致するためです。 デスクトップやモバイルのボタンにも適したサイズです。
- 角丸：5px
[詳細設定]タブで、次のCSSクラス、オーバーフロー、およびZインデックスを追加します。
- CSSクラス：ドロップダウンボタン
- 水平オーバーフロー：目に見える
- 垂直オーバーフロー：目に見える
- Zインデックス：14
後で外部CSSをこのセクションにターゲティングできるように、CSSクラスが必要です。 ドロップダウンメニューを表示するには、オーバーフローを表示に設定する必要があります。 また、Zインデックスは、ページ上の他のすべてのコンテンツの上にドロップダウンを維持するのに役立ちます。
Fulwidthメニューを設計する
これで、Fulwidthメニューモジュールを設計する準備が整いました。 全幅メニューモジュール設定を開き、以下を更新します。
- 全角メニューリンクを作成：はい
- ドロップダウンテキストの色：#ffffff
- モバイルメニューテキストの色：#ffffff
- テキストの配置：中央
- ドロップダウンメニューの背景色：＃45b2ff
- ドロップダウンメニューラインの色：#ffffff
- メニューの背景色：#45b2ff
- フォントメニュー：半圧縮なしのエンコード
- フォントメニューの太さ：半太字
- メニューテキストの色：#ffffff
- メニューのテキストサイズ：16px
- メニュー間隔：2px
- ドロップダウンメニューのアニメーション：展開
ドロップダウンボタンを配置する
ボタンが下の境界線に重なるようにするには、ボタンの高さのちょうど半分である負の上マージンを追加する必要があります。
- マージン：-40.5px high
ご覧のとおり、ホバースペースはまだボタン領域全体を占めておらず、ドロップダウンメニューはまだ右側にあります。 この問題を解決するために、カスタムCSSを追加できます。
カスタムCSSを追加する
カスタムCSSを追加する前に、CSS ID「ドロップダウン」をモジュール全体ではなく全幅セクションに追加してください。
CSS IDがないと、以下のCSSは機能しません。
カスタムCSSを追加するには、ページ設定を開き、次のコードをカスタムCSS入力ボックスに貼り付けます。
.dropdown-button .et_pb_fullwidth_menu .fullwidth-menu-nav> ul {padding-top：0px！重要; } .dropdown-button .fullwidth-menu li> a {padding-bottom：0px; 行の高さ：81px; } .dropdown-button .fullwidth-menu li li a {パディング：6px 0px; 行の高さ：1.6em; } .dropdown-button .et_mobile_menu li a：ホバー、.nav ul li a：ホバー、.dropdown-button .fullwidth-menu a：ホバー{不透明度：1; } .dropdown-button .et_pb_fullwidth_menu_fullwidth .et_pb_row {パディング：0 0！重要; } .dropdown-button .fullwidth-menu li {表示：ブロック; } .dropdown-button .fullwidth-menu .menu-item-has-children> a：first-child：after {right：20px; }
これが最終結果です
最終的な考え
Diviの全幅メニューモジュールを使用してドロップダウンメニューボタンを作成するには、いくつかの重要な手順が必要です。 まず、モジュールに統合するメニューをWordPressで作成します。 次に、Divi Builderを使用して、全幅メニューモジュールを好みに合わせてスタイル設定します。 次に、カスタムCSSを追加して、デスクトップとモバイルの両方でデザインを磨きます。 その結果、デスクトップホバーとモバイルクリック用に展開された美しい（そして便利な）ドロップダウンメニューが作成されます。 これがデザインツールキットへの便利な追加であることがわかることを願っています。
