超级菜单

在本文中,我们将讨论各种Mega Menu元素及其设置。超级菜单元素可以作为一个快速的起点来输出更复杂的导航样式。

  1. 共享样式
  2. 大菜单下拉菜单
  3. 大型菜单模式
  4. 巨型菜单画布
  5. 视频
  6. 演示

谁喜欢他们的菜单兆吗?令人兴奋的大型菜单元素在我们的建设者中发现的预制,这意味着它们由元素库中已经找到的一个或多个主元素组成。这些通常作为一个快速的起点,让您了解在特定的上下文中可能发生的事情。在本例中,是如何输出样式更复杂的导航位的示例,通常称为超级菜单。在我们的构建器中有三种大型菜单预制件的变体:

  • 大菜单下拉菜单
  • 大型菜单模式
  • 巨型菜单画布

下面我们将简要讨论这些元素之间的一些共享方法,以及它们彼此之间的不同之处。

共享样式

每个Mega Menu变体在其父元素中都具有相同的标记结构(例如下拉菜单,模式,Off Canvas):

超级菜单

每一个Div元素作为其内容的部分分割线,也包含一个统一标题元素两者共享。第一部分有两个特点按钮元素以更突出的方式来吸引你的注意力特色链接。的负的偏移量围绕这些按钮的元素只是一个带负号的Div元素保证金应用到左边和右边,以便其中的图标看起来与标题对齐,但然后允许背景颜色来直观地打破那个盒子在空中盘旋。

最后一节介绍了一个标准导航内联元素,它完全支持WordPress菜单,并根据设计进行相应的样式设置。它的flex-grow设置为1,这就是我们如何确保它是填补任何额外的垂直空间,可能存在(例如画布外的变化)。要做到这一点,我们还必须确保父进程的Flexbox控件已打开并设置为布局,默认情况下是这样。

大菜单下拉菜单

大菜单下拉菜单类中嵌套的标记组成下拉当你把它拖到你的构建中时,看起来会像下面这样:

超级菜单

大型菜单模式

大型菜单模式类中嵌套的标记组成模态当你把它拖到你的构建中时,看起来会像下面这样:

超级菜单

巨型菜单画布

巨型菜单画布控件中嵌套的上述标记组成从画布区域,当你把它拖到你的构建时,它会看起来像下面这样:

超级菜单

视频

如果你想了解更多如何在WordPress中建立大型菜单我们在YouTube上有一个深入的视频,涵盖了这个主题!看看吧:

演示

要查看Mega菜单元素变化的现场演示,请参见下面:

看到不准确的东西了吗?让我们知道

Baidu
map