Semantic-UI 垂直菜单类型

Semantic-UI 是一款流行的前端框架，它提供了多种风格美观，易于使用的 UI 组件。其中，垂直菜单是其中一个比较常用的组件。

垂直菜单的特点

垂直菜单是一种非常直观的 UI，它具有以下特点：

• 在页面左侧或右侧垂直排列；
• 可以通过点击菜单项来触发某些操作；
• 可以嵌套子菜单。

垂直菜单的用法

使用 Semantic-UI 的垂直菜单非常简单。我们只需要在 HTML 中添加一个 vertical menu 类型的 div，然后在其中嵌套各个菜单项即可。

下面是一个例子：

<div class="ui vertical menu">
  <a class="item">Home</a>
  <a class="item">Products</a>
  <a class="item">About Us</a>
  <a class="item">Contact Us</a>
</div>

在这个例子中，我们创建了一个简单的垂直菜单，其中包含了四个菜单项。

我们还可以在菜单项中添加图标或者标签等其他内容，使得菜单更加丰富和美观。

垂直菜单的样式

Semantic-UI 提供了多种风格的垂直菜单类型，我们可以通过添加相应的类名来调整菜单的样式。下面是其中一些常用的垂直菜单类型：

• text menu：无背景色的文本菜单；
• secondary pointing menu：带有指向性的主题颜色菜单；
• tabular menu：带有标签页样式的菜单；
• vertical fluid menu：占据整个父容器的垂直菜单；
• large vertical menu：更大的垂直菜单。

<!-- Text menu -->
<div class="ui vertical text menu">
  <a class="item">Home</a>
  <a class="item">Products</a>
  <a class="item">About Us</a>
  <a class="item">Contact Us</a>
</div>

<!-- Secondary pointing menu -->
<div class="ui vertical secondary pointing menu">
  <a class="item">Home</a>
  <a class="item">Products</a>
  <a class="item">About Us</a>
  <a class="item">Contact Us</a>
</div>

<!-- Tabular menu -->
<div class="ui vertical tabular menu">
  <a class="item active">Home</a>
  <a class="item">Products</a>
  <a class="item">About Us</a>
  <a class="item">Contact Us</a>
</div>

<!-- Vertical fluid menu -->
<div class="ui vertical fluid menu">
  <a class="item">Home</a>
  <a class="item">Products</a>
  <a class="item">About Us</a>
  <a class="item">Contact Us</a>
</div>

<!-- Large vertical menu -->
<div class="ui vertical large menu">
  <a class="item">Home</a>
  <a class="item">Products</a>
  <a class="item">About Us</a>
  <a class="item">Contact Us</a>
</div>

可以通过以下链接进一步了解有关 Semantic-UI 垂直菜单的用法和样式：

• 官方文档
• Semantic-UI 中文网