导航菜单按钮

菜单按钮是控件中的一个元素导航条当水平空间有限时，就像移动设备一样，它会组织导航链接。它有时被称为“汉堡包菜单”。

菜单按钮及其功能内置在Navbar元素中，可以通过多种方式访问和配置。我们将介绍菜单按钮的四个方面:

1. 触发菜单
2. 设备的可见性
3. 菜单动画
4. 样式化菜单按钮

触发菜单

默认情况下，导航菜单按钮出现在平板电脑断点和以下位置。当你切换到这些设备时，你可以进入预览模式，看到导航栏上出现的菜单。单击该菜单按钮将展开导航菜单，再次单击该按钮将折叠导航菜单。

在桌面断点上，可以看到nav链接嵌套在nav菜单元素中。这个导航菜单与单击菜单按钮时显示的元素相同——它只是在垂直列表中显示导航链接。

触发设计器中的菜单

您可以在设计器中按以下步骤打开导航菜单:

1. 选择导航条或者里面的任何元素
2. 开放设置面板>导航设置
3. 选择显示菜单

设备的可见性

默认情况下，导航栏菜单按钮出现在平板电脑的断点中，但这是可以更改的。该按钮可以在所有断点上显示，也可以不显示。按照以下步骤来改变可见性:

1. 选择导航条或者里面的任何元素
2. 开放设置面板>导航设置
3. 使用设备选项滑块选择菜单按钮第一次出现的位置

菜单动画

有三种类型的显示动画可以用于菜单:

1. 下拉
2. 在正确的
3. 在左

你可以在设置面板中选择显示动画。

下拉

这是默认的菜单类型。当点击菜单按钮时，导航菜单将从导航栏下拉。默认情况下，导航菜单将占据浏览器窗口的全部宽度。

在正确的

当选择此菜单类型时，当单击菜单按钮时，导航菜单将从屏幕的右侧移动。注意，此菜单类型将占据浏览器窗口的全部高度。

在左

此菜单类型与右上方相同，只是导航菜单将从左侧移动。这种菜单类型也将占据浏览器窗口的全部高度。

菜单简化和切换

对于所有这些菜单类型，您可以控制用于动画打开和关闭过渡的缓动曲线的类型。您还可以调整转换的持续时间。

样式化菜单按钮

你可以样式导航栏或导航菜单的任何方面。由于样式从较大的断点层次化，请选择启用了导航栏菜单按钮的最高断点，然后添加样式。

样式的按钮

例如，在平板电脑视图中，你可以选择菜单按钮并设置按钮的背景颜色。

1. 选择菜单按钮
2. 开放风格的面板>背景
3. 单击打开颜色选择器并选择一种颜色

样式的图标

还可以使用排版设置设置菜单图标的样式。图标将从其父元素菜单按钮继承这些排版样式。

更改菜单图标的大小。

1. 选择菜单按钮
2. 开放风格的面板>排版
3. 改变大小使菜单图标变大或变小

您还可以通过调整字体颜色来更改菜单图标的颜色。

更改菜单图标的颜色。

1. 选择菜单按钮
2. 开放风格的面板>排版
3. 单击打开颜色选择器并选择一种颜色

注意:按钮的内容是可定制的。菜单图标可以被删除并替换为自定义图像或文本元素。

样式化打开状态

菜单按钮的外观可以根据菜单的状态(显示或隐藏)进行定制。当您启用了Show菜单，并对菜单按钮进行样式更改或向其添加一个类时，一个特殊的“Open”类将自动添加到选择器字段中。

与默认状态下的样式工作方式类似，您可以在菜单按钮上应用背景和排版样式来更改背景颜色和图标颜色。