如何創建在 Divi 中單擊時展開的圓形圖標菜單

圓形圖標菜單是向 Divi 站點添加簡單菜單的優雅解決方案。 這種風格的菜單非常直觀，作為移動設備的固定菜單非常有效。 今天，我們將展示如何在Divi中以一種真正突出Divi Builder強大設計功能的方式創建圓形圖標菜單。 我們將提供一個簡單的 JavaScript 代碼段來在點擊時打開和關閉菜單。

讓我們開始吧

搶先看

這是我們將要構建的圓形圖標菜單的快速瀏覽。

免費下載圓形圖標菜單佈局

要從本教程中著手設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

要將佈局導入您的頁面，只需提取 zip 文件並將 json 文件拖到 Divi Builder 中。

讓我們進入教程好嗎？

你需要什麼開始

首先，您需要執行以下操作：

1. 如果您還沒有，請安裝並激活已安裝的 Divi 主題（如果不使用 Divi 主題，請安裝並激活 Divi Builder 插件）。
2. 在 WordPress 中創建一個新頁面，並啟用 Divi Builder 在前端（可視化構建器）編輯頁面。

在本教程中，我們將使用來自模糊模塊的 Divi 內置圖標，因此不需要任何外部資產。

之後，您將有一個空白畫布開始在 Divi 中進行設計。

第1部分

啟用 Divi Builder 以在前端編輯頁面後，將一列行添加到默認常規部分。

然後打開行設置並添加以下填充：

填充：300px 頂部

這只是為圓形菜單項提供一些空間以在單擊時彈出。

使用 Blurb 模塊創建菜單圖標

模糊 #1

行填充到位後，向列添加一個模糊模塊。 這將是我們將添加以組成圓形圖標菜單的 5 個總簡介中的第一個。 我們將把這個稱為blurb #1。

然後通過取出標題和正文來更新簡介內容。 然後將圖標添加到簡介中，如下所示。

使用圖標：是
圖標：見截圖

接下來，我們將更新設計設置如下：

圖標顏色：#29a1f2
圓圈圖標：是
圓圈顏色：#222222
顯示圓形邊框：是
圓形邊框顏色：#29a1f2
使用圖標字體大小：是
圖標字體大小：25px
正文文字大小：20px
邊距：0px

除了為圓形圖標設置樣式外，我們還添加了正文文本大小。 沒有正文文本，但是當我們使用 em 長度單位（相對於父正文文本大小）使用變換翻譯來分隔菜單項/模糊時，這將在以後派上用場。 稍後會詳細介紹。

之後，取出默認的圖像/圖標動畫。

圖像/圖標動畫：無動畫

然後將此模塊的 Z 索引設置為 1，以便它位於最終將位於其後面的其他模塊之上。

Z指數：1

最後，通過將以下自定義 CSS 添加到 Blurb 圖像中，去掉圖標下的默認底部邊距。

margin-bottom: 0px;

模糊 #2

要創建第二個簡介，只需複制簡介 #1。

然後打開新模糊（模糊 #2）的設置並更改圖標並將 Z 索引設置回默認值 (0)。

之後，讓我們使用變換比例縮小圖標，如下所示：

變換比例：70%

創建模糊 #3、#4 和 #5

接下來的三個宣傳片可以通過複製宣傳片 #2 並更新每個宣傳片的圖標來創建。

將 Blurbs 堆疊在相同的絕對位置

我們菜單的默認狀態將所有的宣傳語都處於絕對位置，四個菜單項宣傳語堆疊在主漢堡菜單圖標宣傳語後面。 要使我們的簡介處於相同的絕對位置，請使用多選功能（按住 ctrl/cmd 並單擊每個）來選擇所有五個簡介模塊。 然後打開所選宣傳語之一的設置以同時更新所有 5 個宣傳語的元素設置。

然後將以下自定義 CSS 添加到主元素：

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

這將定位在行的左下角。

使用 Transform Translate 定位菜單圖標

一旦所有的模糊定位為默認狀態，我們就可以開始定位單擊狀態的菜單項（單擊主菜單按鈕後它們將最終定位）。 為此，我們可以使用 Divi 構建器中的 transform translate 屬性。 Divi 構建器中沒有可用的單擊狀態（如懸停），因為這是由 JavaScript 處理的。 因此，我們現在要將菜單項放置在我們希望它們點擊的位置。 然後我們將使用 Javascript 在單擊主菜單按鈕時打開和關閉該位置。

我們希望保持第 1 條模糊，因為它是主菜單按鈕。 但是，我們確實想要移動模糊 #2、#3、#4 和 #5。 由於我們的宣傳語現在堆疊在可視化構建器中，讓我們部署線框模式來更新每個宣傳語的位置。

位置模糊 #2

打開模糊 #2 的設置並更新以下內容：

變換 平移 Y 軸：-10em

這是blurb #2 的新位置。

位置模糊 #3

打開模糊 #3 的設置並更新以下內容：

變換 平移 Y 軸：-8.6em
Transform Translate X 軸：5em

這是blurb #3 的新位置。

位置模糊 #4

打開模糊 #4 的設置並更新以下內容：

變換 平移 Y 軸：-5em
Transform Translate X 軸：8.6em

這是blurb #4 的新位置。

位置模糊 #5

打開模糊 #5 的設置並更新以下內容：

變換平移 Y 軸：0px
Transform Translate X 軸：10em

這是blurb #5 的新位置。

將自定義 CSS 類添加到 Blurbs

為了讓我們的 JavaScript 正常工作，我們需要添加一些 CSS 類，這些類將用作附加樣式和功能的選擇器。

將 CSS 類添加到 Blurb #1

在線框視圖模式下，打開模糊 #1 的設置並添加以下 CSS 類：

CSS 類：transform_target

將 CSS 類添加到 Blurbs #2、#3、#4 和 #5

其他四個模糊將共享相同的 CSS 類，因此我們可以使用多選功能選擇 Blurb #2、#3、#4 和 #5 並更新所有四個的 CSS 類，如下所示：

CSS 類： has-transform toggle-transform-animation

請注意，有兩個由空格分隔的 css 類。

使用代碼模塊添加外部 CSS 和 JavaScript

一旦我們的 CSS 類被添加到簡介中，我們就可以使用代碼模塊將我們的代碼添加到頁面中。 為此，在blurb #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

由於這是一個菜單，四個菜單項將需要鏈接/URL。 為了添加每個菜單項所需的 URL，打開 4 個菜單項中每一個的模糊模塊設置並添加一個模塊鏈接 URL。

使菜單按鈕具有粘性（或固定）

由於此菜單對於移動設備來說小而直觀，因此您可能希望使菜單具有粘性，以使其固定在瀏覽器的左下角。

為此，請使用多選功能選擇所有五個模糊，然後通過將位置值“絕對”替換為“固定”來更新主元素中的自定義 CSS。

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

現在菜單將固定在瀏覽器窗口的左下角。

要確保菜單位於頁面上其他內容的上方，請按如下方式更新該行的 z 索引：

Z指數：11

然後取出行的填充：

填充：0px 頂部，0px 底部

最終設計

這是帶有預製佈局的固定圓形圖標的最終設計。

這是在手機上。

如何輕鬆調整菜單大小和間距

如前所述，菜單是使用 em 長度單位設計的，用於在 x 和 y 軸上定位菜單項（使用變換平移）。 em 長度單位是相對於父正文文本大小的大小。 因此，由於我們的每個簡介模塊都具有相同的 20px 正文大小，我們可以使用多選來一次更改所有簡介的正文。

這將根據需要增加或減少菜單項之間的間距。

您也可以對 Icon 字體大小執行相同操作。 只需使用多選一次即可調整所有菜單項的圖標字體大小。

最後的想法

誰知道在頁面上添加一個固定的圓形圖標菜單可以用 Divi 這麼簡單。 它也是移動設備的完美菜單類型！ 當然，需要一些自定義代碼片段，但是您可以使用可視化構建器設計和定位菜單項的單擊狀態這一事實非常酷。 不要忘記探索不同的顏色、大小和懸停設計，這些設計可以輕鬆使菜單與您自己的網站相匹配。

我期待在評論中收到您的來信。

乾杯!