如何為您的 Divi Mega 菜單創建漢堡包圖標

已發表: 2017-04-18

漢堡包圖標已成為菜單的代名詞。 三個堆疊的水平線代表了一個列表的概念，並因其明顯的相似性而被暱稱為“漢堡包”。 Divi 使用漢堡包圖標在移動設備和某些標題樣式（如“滑入”和“全屏”）上切換主菜單。

今天我將向您展示如何使用漢堡包圖標在點擊時切換超級菜單。 對於那些有很多菜單選項的網站來說，這是一個很好的解決方案。 漢堡包圖標使標題保持整潔。 加上有組織的 4 列大型菜單佈局，用戶可以快速有效地找到他們需要的東西。

之前和之後

默認情況下，超級菜單通過將鼠標懸停在主父菜單鏈接上來工作：

實施新的設計和功能後，僅當您單擊漢堡包圖標時才會顯示超級菜單。

使用 Divi 實現設計

訂閱我們的 YouTube 頻道

將您的菜單轉換為超級菜單

首先，您需要創建一個超級菜單或將當前菜單更改為超級菜單。 這部分非常簡單。

從 wordpress 儀表板中，轉到外觀 → 菜單。 單擊創建新菜單並為您的菜單命名。

單擊創建菜單

確保通過單擊“菜單”屏幕右上角的“屏幕選項”選項卡並選中“CSS 類”來激活“CSS 類”菜單屬性。

現在您可以將菜單項添加到您創建的新菜單中。

首先，讓我們添加將作為我們的漢堡包圖標的菜單項。 此菜單項將是所有其他菜單項的父項。

要製作此菜單項，請使用以下設置創建自定義鏈接： 

URL: http://#

Navigation Label: <div class="hamburger"></div>

CSS Classes: mega-menu

URL 只是一個標籤（#），因為此菜單項不會鏈接到任何特定頁面。 我們將使用此菜單項在單擊時部署我們的超級菜單。

導航標籤有一些簡單的 html 代碼（一個帶有“hamburger”類的 div）。 這將是我們使用自定義 CSS 顯示漢堡包圖標的方式。

CSS 類“mega-menu”用於部署大型菜單功能。 這個 css 類應該只應用於主父菜單項而不是任何子項。

現在是時候添加構成大型菜單的菜單項了。 對於這個例子，我在主菜單項下使用以下父菜單項和子菜單項：

  • 超級菜單漢堡圖標鏈接
    • 關於我們
      • 我們的隊伍
      • 我們的任務
      • 公司歷史
    • 服務
      • 網頁設計
      • Web開發
      • 搜索引擎優化
    • 我們的工作
      • 博客
      • 電子商務
      • 公司的
    • 聯繫我們
      • 支持
      • 路線
      • 工作

現在組織/拖動四個菜單項（每個菜單項都有自己的三個子項）成為主父級超級菜單鏈接的子項。

整理完菜單後，請確保選中“菜單設置”下的“主菜單”。

保存菜單

將 jQuery 添加到單擊而不是懸停時顯示菜單

現在您的超級菜單已創建，我們需要添加一些 jQuery 以使我們的超級菜單在單擊圖標而不是懸停時顯示（這是默認設置）。 為此，請轉到主題選項 → 集成，然後將以下腳本添加到“將代碼添加到博客標題”部分： 

<script>
/*** Open menu itmes with children on click not hover ***/

(function($) {

jQuery(document).ready(function() {
jQuery('#top-menu li.mega-menu > a, #et-secondary-nav li.mega-menu > a').click(function(e) {
e.preventDefault();

jQuery(this).parent().toggleClass('show-submenu');
});
});

jQuery(document).click(function(e) {
if(!$(e.target).closest('.show-submenu').length) {
jQuery('.show-submenu').removeClass('show-submenu');
}
});

})(jQuery);
</script>

添加自定義 CSS

在主題選項中，在常規設置下，添加以下自定義 CSS： 

/*** hides sub-menu on hover ***/
#et-top-navigation #top-menu li.et-hover ul.sub-menu { display: none!important; }

/*** shows submenu on click ***/
#et-top-navigation #top-menu li.show-submenu ul.sub-menu { display: block!important; visibility: visible!important; opacity: 1!important; }

/*** Hide hamburger menu item on mobile ***/
.et_mobile_menu .mega-menu >
 a{display:none;}


#top-menu .mega-menu > a, #et-secondary-nav .mega-menu > a {padding-bottom: 24px !important;}

/**** hide down arrow ****/
#top-menu .mega-menu > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after {display: none;}

/*** show hamburger icon ***/
.hamburger:before {
    font-family: "ETmodules" !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 0.6em;
    text-transform: none;
    speak: none;
    position: relative;
    cursor: pointer;
    top: 0;
    left: 0;
    vertical-align: -11px;
    padding-right: 3px;
    font-size: 32px; /*change size of icon here*/
    content: "\61"; /*change icon here*/
    color: #333; /*change color of icon here*/
}

/*** displays the "x" close icon ***/
.show-submenu .hamburger:before {
    content: "\4d"; /*change x icon here*/
}

就是這樣！

現在去看看你的結果

更多自定義選項

您輸入的 CSS 貫穿始終，以便您可以更改漢堡圖標樣式。 您可以在此處找到 CSS 的兩個主要部分來設置圖標樣式：

更改漢堡包圖標

Divi 帶有各種字體圖標，可用於您的網站。 如果您想將漢堡圖標更改為不同的樣式，您需要做的就是找到並編輯標有註釋“在此處更改圖標”的 CSS 行： 

content: "\61"; /*change icon here*/

以下是不同漢堡包圖標的不同內容值。 只需將“\61”替換為以下內容之一：

方形圖標菜單 - \62

圓形圖標菜單 - \63

ul 圖標 - \64

ol 圖標 - \65

方形菜單圖標深色 - \e056

圓形菜單圖標深色 - \e057

更改“X”圖標

如果您使用不同的漢堡菜單圖標，您應該更改“x”圖標以匹配設計。 只需找到找到以下css： 

/*** displays the "x" close icon ***/
.show-submenu .hamburger:before {
    content: "\4d";
}

將“\4d”替換為以下內容值之一：

圓形關閉菜單圖標 - \51

圓形關閉菜單圖標深色 - \e051

這是超級菜單漢堡包圖標的樣子，帶有免費的黑圈圖標樣式：

更改漢堡包圖標的顏色

如果要更改漢堡包圖標的顏色，請編輯標記為“更改圖標顏色”的這行 CSS： 

Color: #333; /*change icon color here*/

更改漢堡包圖標的大小

如果要更改漢堡包圖標的大小，請編輯標記為“在此處更改圖標大小”的這行 CSS： 

Font-size: 32px; /*change size of icon here*/

為您的漢堡包圖標添加標籤

為您的圖標添加標籤很容易。 只需返回Appearance → Menus並編輯您提供給“mega-menu”類的最頂層菜單項。 在導航標籤文本框中，在 div 內添加標籤文本。 在這個例子中，我添加了標籤“菜單”。

<div class=”hamburger”>menu</div>

現在您的漢堡包旁邊有一個標籤。

有反應嗎？

超級菜單僅適用於大於 980 像素的屏幕尺寸。 對於 980 像素以下的屏幕尺寸（平板電腦和智能手機），菜單將切換到默認的移動菜單。

最後的想法

如果您喜歡大型菜單並希望為您的標題創建乾淨簡約的設計，那麼添加一個漢堡包圖標來顯示您的大型菜單是一個很好的解決方案。 現在，您的用戶只需單擊一下即可立即查看您的所有導航鏈接。

此外，Divi 的內置字體圖標使您可以輕鬆使用 css 自定義漢堡包圖標，而無需從頭開始創建圖標。

您還可以將圖像添加到大型菜單中，以創建更加出色的大型菜單。

就是這樣！

我希望你喜歡這個功能。 期待在評論中收到您的來信。