Diviでクリックすると展開する円形アイコンメニューを作成する方法

円形のアイコンメニューは、Diviサイトにシンプルなメニューを追加するためのエレガントなソリューションです。 このスタイルのメニューは直感的で、モバイルデバイスの固定メニューとして非常にうまく機能します。 今日は、Divi Builderの強力なデザイン機能を実際に強調する方法で、Diviで円形のアイコンメニューを作成する方法を示します。 また、クリック時にメニューを開いたり閉じたりするための簡単なJavaScriptスニペットを提供します。

始めましょう

スニークピーク

これが、作成する円形のアイコンメニューの概要です。

サークルアイコンメニューレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。

チュートリアルに行きましょう。

始めるために必要なもの

開始するには、次のことを行う必要があります。

1. まだインストールしていない場合は、インストールされているDiviテーマ（またはDiviテーマを使用していない場合はDivi Builderプラグイン）をインストールしてアクティブ化します。
2. WordPressで新しいページを作成し、Divi Builderがフロントエンド（ビジュアルビルダー）でページを編集できるようにします。

このチュートリアルでは、blurbモジュールのDiviの組み込みアイコンを使用するため、外部アセットは必要ありません。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

パート1

Divi Builderでフロントエンドのページを編集できるようになったら、デフォルトの通常のセクションに1列の行を追加します。

次に、行設定を開き、次のパディングを追加します。

パディング：300pxトップ

これは単に、クリックすると円形のメニュー項目が飛び出すためのスペースを提供するためです。

宣伝文句を使用したメニューアイコンの作成

ぼかし＃1

行のパディングが配置されたら、列に宣伝文モジュールを追加します。 これは、円形のアイコンメニューを構成するために追加する5つの宣伝文の最初のものになります。 これをblurb＃1と呼びます。

次に、タイトルと本文を取り出して宣伝文の内容を更新します。 次に、次のように宣伝文にアイコンを追加します。

アイコンを使用：はい
アイコン：スクリーンショットを参照

次に、デザイン設定を次のように更新します。

アイコンの色：＃29a1f2
円のアイコン：はい
サークルカラー：＃222222
円の境界線を表示：はい
円の境界線の色：＃29a1f2
アイコンのフォントサイズを使用：はい
アイコンフォントサイズ：25px
本文サイズ：20px
マージン：0px

円形アイコンのスタイル設定に加えて、本文のテキストサイズも追加しました。 本文のテキストはありませんが、emの長さの単位（親の本文のテキストサイズを基準にしています）を使用して、transform translateを使用してメニュー項目/ぼかしの間隔を空けるときに、後で役立ちます。 これについては後で詳しく説明します。

その後、デフォルトの画像/アイコンアニメーションを取り出します。

画像/アイコンアニメーション：アニメーションなし

次に、このモジュールのZインデックスを1に設定して、最終的にモジュールの後ろに配置される他のモジュールの上に配置されるようにします。

Zインデックス：1

最後に、次のカスタムCSSを宣伝文画像に追加して、アイコンの下のデフォルトの下マージンを削除します。

margin-bottom: 0px;

宣伝文＃2

2番目の宣伝文を作成するには、宣伝文＃1を複製するだけです。

次に、新しい宣伝文（宣伝文＃2）の設定を開き、アイコンを変更して、Zインデックスをデフォルト（0）に戻します。

その後、次のように変換スケールを使用してアイコンを縮小しましょう。

変換スケール：70％

宣伝文＃3、＃4、および＃5の作成

次の3つの宣伝文は、宣伝文＃2を複製し、それぞれのアイコンを更新することで作成できます。

同じ絶対位置で宣伝文を積み重ねる

メニューのデフォルトの状態では、すべての宣伝文が絶対位置にあり、4つのメニュー項目の宣伝文がメインのハンバーガーメニューアイコンの宣伝文の後ろに積み重ねられています。 宣伝文を同じ絶対位置にするには、複数選択機能（ctrl / cmdを押しながらそれぞれをクリック）を使用して、5つの宣伝文モジュールすべてを選択します。 次に、選択した宣伝文の1つの設定を開いて、5つすべての要素設定を同時に更新します。

次に、次のカスタムCSSをメイン要素に追加します。

position: absolute !important;
bottom: 20px;
left: 20px;

これにより、宣伝文が行の左下に配置されます。

変換変換を使用したメニューアイコンの配置

すべての宣伝文がデフォルト状態に配置されたら、クリック状態（メインメニューボタンをクリックした後に終了する）のメニュー項目の配置を開始できます。 これを行うには、Diviビルダー内でtransformtranslateプロパティを使用できます。 これはJavaScriptによって処理されるものであるため、Diviビルダー（ホバーなど）で使用できるクリック状態はありません。 そこで、今すぐクリックしたい場所にメニュー項目を配置します。 次に、Javascriptを使用して、メインメニューボタンをクリックしたときにその位置のオンとオフを切り替えます。

ぼかし＃1はメインメニューボタンであるため、そのままにしておきます。 ただし、宣伝文＃2、＃3、＃4、＃5を移動したいと思います。 宣伝文がビジュアルビルダーにスタックされたので、ワイヤーフレームモードを展開して、各宣伝文の位置を更新しましょう。

宣伝文＃2の位置

宣伝文＃2の設定を開き、以下を更新します。

変換変換Y軸：-10em

これが宣伝文＃2の新しい位置です。

宣伝文＃3の位置

宣伝文＃3の設定を開き、以下を更新します。

変換変換Y軸：-8.6em
変換変換X軸：5em

これが宣伝文＃3の新しい位置です。

宣伝文＃4の位置

宣伝文＃4の設定を開き、以下を更新します。

変換変換Y軸：-5em
変換変換X軸：8.6em

これが宣伝文＃4の新しい位置です。

宣伝文＃5の位置

宣伝文＃5の設定を開き、以下を更新します。

変換変換Y軸：0px
変換変換X軸：10em

これが宣伝文＃5の新しい位置です。

宣伝文へのカスタムCSSクラスの追加

JavaScriptが正しく機能するためには、追加のスタイルと機能のセレクターとして機能するCSSクラスをいくつか追加する必要があります。

CSSクラスを宣伝文＃1に追加する

ワイヤーフレームビューモードで、宣伝文＃1の設定を開き、次のCSSクラスを追加します。

CSSクラス：transform_target

CSSクラスを宣伝文＃2、＃3、＃4、および＃5に追加する

他の4つの宣伝文はすべて同じCSSクラスを共有するため、複数選択機能を使用して宣伝文＃2、＃3、＃4、および＃5を選択し、次のように4つすべてのCSSクラスを更新できます。

CSSクラス：has-transformtoggle-transform-animation

スペースで区切られた2つのcssクラスがあることに注意してください。

コードモジュールを使用した外部CSSとJavaScriptの追加

CSSクラスが宣伝文に追加されたら、コードモジュールを使用してページにコードを追加する準備が整います。 これを行うには、宣伝文＃5の下にコードモジュールを追加します。

次に、次のコードをコードモジュールに貼り付けます。

<style>
  .has-transform, .transform_target .et-pb-icon {
    transition: all 400ms ease-in-out;
  } 
  .toggle-transform-animation {
    transform: none !important;
  }
  .transform_target {
    cursor: pointer;
  }
  .toggle-active-target.et_pb_blurb .et-pb-icon {
    background-color: transparent;
  }
</style>

これは、jQueryコードと組み合わせて使用​​される外部CSSです。

<script>
(function($) {
  $(document).ready(function(){
    $('.transform_target').click(function(){
      $(this).toggleClass('toggle-active-target');
      $('.has-transform').toggleClass('toggle-transform-animation');   
    });    
  });
})( jQuery );   
</script>

これは、JavaScriptがメニューボタンをクリックしたときに円形のアイコンメニュー項目を拡張するために必要なものです。

styleタグをCSSにラップし、 scriptタグをJavaScript / jQueryにラップしたままにしてください。

ライブページで機能の最終結果を確認してください。

メニュー項目のURLの追加

これはメニューなので、4つのメニュー項目にはリンク/ URLが必要です。 各メニュー項目に必要なURLを追加するには、4つのメニュー項目のそれぞれの宣伝文モジュール設定を開き、モジュールリンクURLを追加します。

メニューボタンをスティッキーにする（または修正する）

このメニューはモバイルデバイス向けに小さく直感的であるため、ブラウザの左下に固定されるようにメニューを固定することをお勧めします。

これを行うには、複数選択機能を使用して5つの宣伝文をすべて選択し、位置の値「絶対」を「固定」に置き換えて、メイン要素のカスタムCSSを更新します。

position: fixed !important;
bottom: 20px;
left: 20px;

これで、メニューはブラウザウィンドウの左下に固定されたままになります。

メニューがページ上の他のコンテンツの上に表示されるようにするには、次のように行のzインデックスを更新します。

Zインデックス：11

次に、行のパディングを取り出します。

パディング：0px上、0px下

最終設計

これは、事前に作成されたレイアウトの固定円形アイコンの最終的なデザインです。

そして、ここではモバイル上にあります。

メニューのサイズと間隔を簡単に調整する方法

前述のように、メニューは、メニュー項目をx軸とy軸に配置するためのem長さの単位を使用して設計されました（変換変換を使用）。 emの長さの単位は、親本文のテキストサイズのサイズを基準にしています。 したがって、各宣伝文モジュールの本文テキストサイズは20ピクセルと同じであるため、複数選択を使用して、すべての宣伝文の本文テキストを一度に変更できます。

これにより、必要に応じてメニュー項目間の間隔が増減します。

また、アイコンのフォントサイズについても同じことができます。 複数選択を使用するだけで、すべてのメニュー項目のアイコンフォントのサイズを一度に調整できます。

最終的な考え

固定の円形アイコンメニューをページに追加することを誰が知っていたのか、Diviを使えばこれほど簡単にできます。 モバイルにもピッタリのメニューです！ 確かに、必要なカスタムコードスニペットがいくつかありますが、ビジュアルビルダーを使用してメニュー項目のクリック状態を設計および配置できるという事実は非常に優れています。 メニューを自分のウェブサイトに簡単に一致させることができるさまざまな色、サイズ、ホバーデザインを探すことを忘れないでください。

コメントでお返事をお待ちしております。

乾杯！