基础 - 菜单 SASS 参考

变量

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

序号	名称和描述	类型	默认值
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);

序号	名称和描述	类型	默认值
1	$count 菜单内的项目数量。	关键字或数字	auto

序号

名称和描述

类型

默认值

$count

菜单内的项目数量。

关键字或数字

auto

menu-direction

设置菜单方向。

@include menu-direction($dir);

序号	名称和描述	类型	默认值
1	$dir 水平或垂直设置菜单方向。	关键字	horizontal

序号

名称和描述

类型

默认值

$dir

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

关键字

horizontal

menu-simple

创建简单的菜单，不带填充或悬停状态。

@include menu-simple;

menu-nested

包含嵌套菜单的样式。在菜单中包含margin-left。

@include menu-nested($padding);

序号	名称和描述	类型	默认值
1	$padding 设置边距长度。	关键字或数字	auto

序号

名称和描述

类型

默认值

$padding

设置边距长度。

关键字或数字

auto

menu-icons

在菜单项中包含图标。

@include menu-icons($position, $base);

序号	名称和描述	类型	默认值
1	$position 设置图标的位置。	关键字	side
2	$base 如果要在同一元素上多次调用混合宏，则将其设置为 false。	布尔值	true

序号

名称和描述

类型

默认值

$position

设置图标的位置。

关键字

side

$base

如果要在同一元素上多次调用混合宏，则将其设置为 false。

布尔值

true

foundation_navigation.htm

打印页面