Foundation - Menu SASS 参考

变量

您可以使用表中列出的以下 SASS 变量来更改组件的样式。

Sr.No. 名称 &描述 类型 默认值
1

$menu-margin

设置菜单中的边距。

数字 0
2

$menu-margin-nested

设置嵌套菜单中左侧的边距。

数字 1rem
3

$menu-item-padding

0.7rem 1rem

数字 设置菜单中的填充。
4

$menu-icon-spacing

设置菜单项中文本和图标之间的空间。

数字 0.25rem
5

$menu-expand-max

在 CSS 中包含最大数量的 expand-n 类。

数字 6

混合

您可以使用混合为您的组件构建 CSS 类结构,如表中所列。

menu-base

为菜单创建基本样式。

@include menu-base;

menu-expand

以相同宽度展开菜单项。

@include menu-expand($count);
Sr.No. 名称和说明 类型 默认值
1

$count

菜单内的项目数。

关键字或数字 auto

menu-direction

菜单方向已设置。

@include menu-direction($dir);
序号 姓名 &描述 类型 默认值
1

$dir

设置菜单方向为水平或垂直。

关键字 水平

menu-simple

创建简单菜单时没有填充或悬停状态。

@include menu-simple;

menu-nested

包含嵌套菜单的样式。将 margin-left 添加到菜单中。

@include menu-nested($padding);
Sr.No. 名称 &描述 类型 默认值
1

$padding

设置边距长度。

关键字或数字 auto

menu-icons

图标包含在菜单项中。

@include menu-icons($position, $base);
序号 姓名 &描述 类型 默认值
1

$position

设置图标的位置。

关键字 side
2

$base

若要在同一元素上多次调用 mixin,请将其设置为 false。

boolean true

foundation_navigation.html