📌  相关文章
📜  Semantic-UI 菜单链接项内容(1)

📅  最后修改于: 2023-12-03 15:20:05.514000             🧑  作者: Mango

Semantic-UI 菜单链接项内容

简介

Semantic-UI 菜单链接项是用于创建网站菜单的一种组件，它可以添加多个链接项，每个链接项可以包含文本、图标、下拉子菜单等内容。

基本使用

要使用菜单链接项，需要先引入 Semantic-UI 的样式文件和 JavaScript 文件。以下是一个简单的例子：

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>
<body>
  <div class="ui menu">
    <a class="active item">Home</a>
    <a class="item">About Us</a>
    <a class="item">Contact Us</a>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
</body>
</html>

在上面的例子中，我们创建了一个简单的菜单，包含三个链接项，分别指向网站的主页、关于我们和联系我们页面。class="ui menu" 定义了一个 Semantic-UI 的菜单组件，a 元素则是菜单链接项。通过添加 active class，我们标记了当前活动的链接项。

加入下拉子菜单

菜单链接项还可以包含下拉子菜单。以下是一个包含子菜单的例子：

<div class="ui menu">
  <a class="active item">Home</a>
  <a class="item">About Us</a>
  <div class="ui dropdown item">
    Products <i class="dropdown icon"></i>
    <div class="menu">
      <a class="item">Product 1</a>
      <a class="item">Product 2</a>
      <div class="divider"></div>
      <a class="item">All Products</a>
    </div>
  </div>
  <a class="item">Contact Us</a>
</div>

在上面的例子中，我们添加了一个下拉子菜单，它包含了三个链接项，最后还有一个分割线。我们使用了 class="ui dropdown item" 来定义一个下拉子菜单链接项，i 元素用来显示下拉箭头图标，div class="menu" 内包含了子菜单的链接项。

添加图标

菜单链接项还可以添加图标，以下是一个添加图标的例子：

<div class="ui menu">
  <a class="active item"><i class="home icon"></i>Home</a>
  <a class="item"><i class="user icon"></i>About Us</a>
  <div class="ui dropdown item">
    <i class="grid layout icon"></i>
    Products <i class="dropdown icon"></i>
    <div class="menu">
      <a class="item"><i class="database icon"></i>Product 1</a>
      <a class="item"><i class="cloud upload icon"></i>Product 2</a>
      <div class="divider"></div>
      <a class="item"><i class="list icon"></i>All Products</a>
    </div>
  </div>
  <a class="item"><i class="envelope outline icon"></i>Contact Us</a>
</div>

在这个例子中，我们使用了语法 i class="xxx icon" 来添加图标，并使用了不同的图标来表示菜单项的不同内容。

总结

Semantic-UI 菜单链接项是一个非常有用的组件，可以用来创建网站的主菜单和下拉子菜单，也可以添加文本、图标和样式来表示不同的内容。在实际开发中，我们可以根据需要灵活使用。