如何为您的 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 自定义汉堡包图标，而无需从头开始创建图标。

您还可以将图像添加到大型菜单中，以创建更加出色的大型菜单。

就是这样！

我希望你喜欢这个功能。 期待在评论中收到您的来信。