语义 UI 菜单类型介绍

语义 UI 是一种前端框架，旨在提高 Web 界面中的可用性和用户体验。语义 UI 菜单是语义 UI 样式中的一个组成部分，可让开发人员轻松创建具有意义的菜单。

1. 菜单类型

• 基本菜单：用于显示简单的菜单选项。
• 垂直菜单：用于在垂直方向上显示菜单项，并经常用于导航栏或侧边栏。
• 右对齐菜单：用于将菜单项右对齐，通常用于用户下拉菜单。
• 下拉菜单：用于显示选择列表或下拉菜单的选项。
• 内部菜单：用于在网页中显示一个菜单选项，当用户单击该菜单选项时会展开其他的子菜单项。

2. 如何添加菜单

语义 UI 的菜单易于使用，只需简单的 HTML 代码和几行 CSS 就可以轻松地创建菜单。

例如，创建一个基本菜单：

<div class="ui menu">
  <a class="item">首页</a>
  <a class="item">关于我们</a>
  <a class="item">联系我们</a>
</div>

对于垂直菜单，只需要在父元素上添加 vertical 类：

<div class="ui vertical menu">
  <a class="item">首页</a>
  <a class="item">关于我们</a>
  <a class="item">联系我们</a>
</div>

右对齐菜单：

<div class="ui right aligned menu">
  <a class="item">首页</a>
  <a class="item">关于我们</a>
  <a class="item">联系我们</a>
</div>

下拉菜单：

<div class="ui dropdown item">
  <span class="text">选择</span>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item">选项 1</div>
    <div class="item">选项 2</div>
    <div class="item">选项 3</div>
  </div>
</div>

内部菜单：

<div class="ui menu">
  <div class="ui simple dropdown item">
    <i class="icon bars"></i>
    <div class="menu">
      <div class="item">选项 1</div>
      <div class="item">选项 2</div>
      <div class="item">选项 3</div>
    </div>
  </div>
</div>

3. 总结

语义 UI 菜单的类型很多，对于不同的需求可以选择不同的类型。创建菜单也非常简单，只需在 HTML 中添加适当的类即可。