菜单

菜单
菜单显示分组导航行为

下载

种类

菜单 (Menu)

一个标准的菜单

2.0 开始,菜单使用 flexbox。这允许每个菜单项自动拉伸到最大项的大小。

许多下面的例子使用耦合下拉菜单显示的下拉菜单里面的UI menu。请参考下拉菜单文档,来正确的初始化javascript。

二级菜单 (Secondary Menu)

菜单可以调整外观以取消内容

指示菜单 (Pointing)

菜单能指示内容表示对应关系

表格菜单 (Tabular)

菜单可以被格式化显示信息选项卡

访问 tab 文档 来查看如何设置动态tab。
This is an stretched grid column. This segment will always match the tab height
This is an stretched grid column. This segment will always match the tab height

文字菜单 (Text)

菜单可以被格式化为文字内容

垂直菜单 (Vertical Menu)

菜单可以垂直的使用

垂直菜单的宽度默认为任意大小。为了使它更适合你的内容请使用 ui grid.

分页 (Pagination)

分页菜单是专门设置的网页内容的链接。

内容

标题 (Header)

菜单可以包含标题,或者它自己本身作为标题。

输入框 (Input)

菜单可以包含 输入框

按钮 (Button)

菜单可以包含 按钮

链接项 (Link Item)

菜单可以包含一个链接项,或者被设置成链接的样式。

下拉选项 (Dropdown Item)

下拉框 可以包含菜单

不用 Javascript 来打开下拉框,可以使用 simple 变量

搜索框 (Search)

菜单可以包含 搜索 输入框

菜单 (Menu)

一个菜单可以包含另一个菜单组,可它的菜单项具有同样的级别。

子菜单 (Sub Menu)

在一个菜单项的菜单内,可以包含子菜单。

状态

悬停 (Hover)

菜单可以有鼠标悬停效果

只有菜单是 a 链接的情况下,或者是有 link 类名的时候,才有接收悬停鼠标的效果。

按下 (Down)

按钮可以有按下的效果。

激活 (Active)

按钮可以有激活的效果。

变形

固定 (Fixed)

菜单可以固定在它内容的一边

这些例子使用了 iframe,以防止粘到浏览器窗口的内容。
更高级的使用可以用 sticky menu or visibility APIs.

堆叠 (Stackable)

菜单可以在手机上显示堆叠效果

堆叠式菜单只和简单菜单内容使用。堆叠式菜单无法复制垂直菜单的所有样式,比如调整下拉框的位置。

反色 (Inverted)

菜单可以有反色颜色。

颜色 (Colored)

菜单可以有不同颜色

图标 (Icons)

菜单项可以仅仅是图标



标签图标 (Labeled Icon)

菜单可以有标签式图标



流式 (Fluid)

垂直按钮将沾满内容。(水平菜单默认不占满)

紧凑 (Compact)

菜单可以仅占其必要的空间来紧凑显示

均分 (Evenly Divided)

菜单可以均匀地划分项目

垂直菜单可以指向相邻的内容以显示归其所属

附加 (Attached)

菜单可以附着到内容片段

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.

尺寸 (Size)

菜单可以有尺寸的变化

垂直菜单也可以有尺寸上的变化

项目

适应 (Fitted)

菜单可移除水平间距或者垂直间距

无边框 (Borderless)

菜单项或者菜单可以没有边框