Semantic-UI 二级菜单类型

简介

Semantic-UI 是一个现代化的前端 UI 框架，它的二级菜单类型非常方便且易于使用。二级菜单通常用于显示下拉菜单选项和子菜单。

代码实现

使用 Semantic-UI 实现二级菜单非常简单，只需要使用下拉菜单（dropdown）和子菜单（menu）两个组件即可。

基本用法

HTML

<div class="ui dropdown">
  <div class="text">菜单</div>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item">选项 1</div>
    <div class="item">选项 2</div>
    <div class="item">选项 3</div>
    <div class="ui divider"></div>
    <div class="header">子菜单</div>
    <div class="item">子项 1</div>
    <div class="item">子项 2</div>
  </div>
</div>

效果预览

推荐用法

推荐使用下拉菜单中的子菜单，以更好的组织和展示菜单项。下面是一个推荐的用法样例。

HTML

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

效果预览

总结

Semantic-UI 的二级菜单类型非常方便，使用简单的 HTML 代码即可实现。推荐使用下拉菜单中的子菜单以更好的组织和展示菜单项。这些功能拓展了菜单样式的多样性，使程序员有更多选择。