Semantic UI 中的菜单集合提供了一个灵活的导航组件，用于组织内容并引导用户浏览应用程序。本文档描述了 Semantic UI 框架内菜单组件的结构、类型、状态和变体。有关表单样式，请参阅 表单集合，有关布局网格，请参阅 网格系统。
菜单集合由一个带有类 .ui.menu 的容器组成，其中包含带有类 .item 的单个菜单项。菜单支持各种嵌入式元素，包括图标、标签、输入框和下拉菜单。
来源： src/definitions/collections/menu.less30-46 src/definitions/collections/menu.less74-94
菜单容器 (.ui.menu) 是一个 flex 容器，具有预定义的边距、背景、字体和边框样式。默认情况下，它水平显示菜单项。
.ui.menu {
display: flex;
margin: @margin;
font-family: @fontFamily;
background: @background;
font-weight: @fontWeight;
border: @border;
box-shadow: @boxShadow;
border-radius: @borderRadius;
min-height: @minHeight;
}
来源： src/definitions/collections/menu.less30-40
菜单项 (.ui.menu .item) 是菜单内的交互式元素。它们在定位、内边距和过渡方面具有一致的样式。
.ui.menu .item {
position: relative;
vertical-align: middle;
line-height: 1;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
flex: 0 0 auto;
user-select: none;
background: @itemBackground;
padding: @itemVerticalPadding @itemHorizontalPadding;
text-transform: @itemTextTransform;
color: @itemTextColor;
font-weight: @itemFontWeight;
transition: @itemTransition;
}
来源： src/definitions/collections/menu.less79-94
菜单可以包含各种组件来增强功能和外观。
来源： src/definitions/collections/menu.less112-346
可以使用 .icon 类将图标添加到菜单项中。它们具有预定义的透明度和外边距设置。
.ui.menu .item > i.icon {
opacity: @iconOpacity;
float: @iconFloat;
margin: @iconMargin;
}
来源： src/definitions/collections/menu.less133-137
可以使用特定定位和外边距调整将按钮嵌入菜单项中。
.ui.menu:not(.vertical) .item > .button {
position: relative;
top: @buttonOffset;
margin: @buttonMargin;
padding-bottom: @buttonVerticalPadding;
padding-top: @buttonVerticalPadding;
font-size: @buttonSize;
}
来源： src/definitions/collections/menu.less143-150
菜单项可以作为下拉菜单发挥作用，并为触发器和下拉菜单提供额外的样式。
.ui.menu .dropdown.item .menu {
min-width: calc(100% - 1px);
border-radius: 0em 0em @dropdownMenuBorderRadius @dropdownMenuBorderRadius;
background: @dropdownBackground;
margin: @dropdownMenuDistance 0px 0px;
box-shadow: @dropdownMenuBoxShadow;
flex-direction: column !important;
}
来源： src/definitions/collections/menu.less213-220 src/definitions/collections/menu.less224-258
标签可以添加到菜单项中，以显示计数或状态指示器。
.ui.menu .item > .label {
background: @labelBackground;
color: @labelTextColor;
margin-left: @labelTextMargin;
padding: @labelVerticalPadding @labelHorizontalPadding;
}
来源： src/definitions/collections/menu.less315-320
菜单和菜单项可以具有不同的状态，为用户提供视觉反馈。
来源： src/definitions/collections/menu.less396-458
菜单项在悬停时会显示视觉反馈，背景和文本颜色会发生变化。
.ui.link.menu .item:hover,
.ui.menu .dropdown.item:hover,
.ui.menu .link.item:hover,
.ui.menu a.item:hover {
cursor: pointer;
background: @hoverItemBackground;
color: @hoverItemTextColor;
}
来源： src/definitions/collections/menu.less402-409
活动状态指示当前选中的项目。
.ui.menu .active.item {
background: @activeItemBackground;
color: @activeItemTextColor;
font-weight: @activeItemFontWeight;
box-shadow: @activeItemBoxShadow;
}
来源： src/definitions/collections/menu.less428-433
禁用状态的菜单项视觉上会变暗，并且不可交互。
.ui.menu .item.disabled,
.ui.menu .item.disabled:hover {
cursor: default !important;
background-color: transparent !important;
color: @disabledTextColor !important;
}
来源： src/definitions/collections/menu.less453-458
Semantic UI 提供各种菜单类型以满足不同的 UI 需求。
来源： src/definitions/collections/menu.less464-1212
垂直菜单将菜单项垂直堆叠，而不是水平堆叠。
.ui.vertical.menu {
display: block;
flex-direction: column;
background: @verticalBackground;
box-shadow: @verticalBoxShadow;
}
来源： src/definitions/collections/menu.less494-499
二级菜单外观更柔和，默认没有边框或背景。
.ui.secondary.menu {
background: @secondaryBackground;
margin-left: -@secondaryItemSpacing;
margin-right: -@secondaryItemSpacing;
border-radius: 0em;
border: none;
box-shadow: none;
}
来源： src/definitions/collections/menu.less774-781
指示菜单使用指针来指示活动项。
.ui.pointing.menu .active.item:after {
background: @arrowActiveColor !important;
margin: 0em !important;
box-shadow: none !important;
border: none !important;
}
来源： src/definitions/collections/menu.less901-947
选项卡菜单模仿选项卡的外观，通常与选项卡式内容一起使用。
.ui.tabular.menu {
border-radius: 0em;
box-shadow: none !important;
border: none;
background: @tabularBackground;
border-bottom: @tabularBorderWidth solid @tabularBorderColor;
}
来源： src/definitions/collections/menu.less596-602
文本菜单没有背景、边框或其他装饰元素，仅显示文本。
.ui.text.menu {
background: none transparent;
border-radius: 0px;
box-shadow: none;
border: none;
margin: @textMenuMargin;
}
来源： src/definitions/collections/menu.less1020-1027
Semantic UI 提供各种变体来定制菜单的外观和行为。
来源： src/definitions/collections/menu.less1215-1458
可以使用 Semantic UI 的颜色系统为菜单和菜单项着色。
.ui.menu .red.active.item,
.ui.red.menu .active.item {
border-color: @red !important;
color: @red !important;
}
来源： src/definitions/collections/menu.less1259-1320
反转菜单具有深色背景和浅色文本，反转了默认的配色方案。
.ui.inverted.menu {
border: @invertedBorder;
background: @invertedBackground;
box-shadow: @invertedBoxShadow;
}
来源： src/definitions/collections/menu.less1327-1331
堆叠式菜单会在移动设备上自动转换为垂直布局。
@media only screen and (max-width: @largestMobileScreen) {
.ui.stackable.menu {
flex-direction: column;
}
.ui.stackable.menu .item {
width: 100% !important;
}
}
来源： src/definitions/collections/menu.less1223-1254
Semantic UI 中的菜单设计用于跨不同设备尺寸工作，并具有针对移动设备的特定行为。
对于小屏幕，菜单可以
@media only screen and (max-width: @largestMobileScreen) {
.ui.menu > .ui.container {
width: 100% !important;
margin-left: 0em !important;
margin-right: 0em !important;
}
}
来源: src/definitions/collections/menu.less379-385
可以通过修改主题文件中的变量来定制Semantic UI的菜单集合。
| 可变 | 描述 | 默认值 |
|---|---|---|
@background | 菜单背景颜色 | #FFFFFF |
@itemVerticalPadding | 菜单项的垂直内边距 | @relativeSmall |
@itemHorizontalPadding | 菜单项的水平内边距 | @relativeLarge |
@activeItemBackground | 活动项目的背景颜色 | @transparentBlack |
@activeItemTextColor | 活动项目的文本颜色 | @selectedTextColor |
@hoverItemBackground | 悬停项目的背景颜色 | @subtleTransparentBlack |
@secondaryItemMargin | 次级菜单项的边距 | 0em @secondaryItemSpacing |
来源: src/themes/default/collections/menu.variables10-22 src/themes/default/collections/menu.variables162-178
菜单样式遵循Semantic UI的主题继承模式，其中默认值可以通过以下方式覆盖：