使用纯 CSS 设计垂直和水平菜单

cssweb developmentfront end technology

菜单是任何网站的重要组成部分。它可以帮助访问者找到您的优质内容，并将他们引导至网站的关键部分。当然，CSS 是创建精美导航菜单的最佳语言。它具有极强的适应性，可以用于任何类型的网站。它可以水平或垂直显示在网页或页眉的主要内容之前。

在本文中，我们将要执行的任务是使用纯 CSS 设计垂直和水平菜单。这可以通过使用 <div> 和 <span> 标签来实现。

使用 <div> 标签

分区标签也称为 <div> 标签。在 HTML 中，<div> 标签用于创建内容分区，例如文本、图形、页眉、页脚和导航栏。<div>标签包含开始 (<div>) 和结束 (</div>) 标签，其中结束标签是必需的。此标签在 Web 开发中最有用，因为它允许我们划分网页上的数据，并为不同类型的信息或功能创建特定的部分。

语法

以下是 <div> 标签的语法。

<div>… </div>

使用 <span> 标签

HTML 元素 <span> 用作通用内联容器，用于存放不会自动表示任何内容的材料。它可以用于对具有相似属性值或需要同时设置样式(使用 class 或 id 属性)的元素进行分组。只有在没有其他合适的语义元素时才应使用它。<div> 元素与 <span> 非常相似，但 <div> 是块级元素，而 <span> 是内联元素。

语法

以下是 <span> 标签的语法。

<span class="">Some Text</span>

现在，让我们看一下以下使用 CSS 创建垂直和水平菜单的示例。

示例

在下面的示例中，我们将创建垂直菜单。

<!DOCTYPE html>
<html>
<body style="background-color:#D5F5E3;">
   <div class="pure-menu">
      <span class="pure-menu-heading"> TUTORIALSPOINT </span>
      <ul class="pure-menu-list">
         <li class="pure-menu-item">
            <a href="https://www.cainiaomax.com/index.htm" class="pure-menu-link">Home</a>
         </li>
         <li class="pure-menu-item">
            <a href="https://www.cainiaomax.com/codingground.htm" class="pure-menu-link">CodingGround</a>
         </li>
         <li class="pure-menu-item">
            <a href="https://www.cainiaomax.com/online_dev_tools.htm" class="pure-menu-link">Tools</a>
         </li>
         <li class="pure-menu-item">
            <a href="https://www.cainiaomax.com/about/about_careers.htm" class="pure-menu-link">Contact Us</a>
         </li>
      </ul>
   </div>
</body>
</html>

运行上述代码后，将生成一个包含垂直菜单的输出，该菜单是应用 CSS 后网页上显示的默认菜单。

示例

以下是我们将在网页上创建水平菜单的示例。

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">
   <style>
      .pure-menu-horizontal{
         width: 500px;
         height: 200px;
      }
   </style>
</head>
<body style="background-color:#E8DAEF;">
   <div class="pure-menu pure-menu-horizontal">
      <span class="pure-menu-heading">TUTORIALSPOINT</span>
      <ul class="pure-menu-list">
         <li class="pure-menu-item">
            <a href="https://www.cainiaomax.com/index.htm" class="pure-menu-link">Home</a>
         </li>
         <li class="pure-menu-item">
            <a href="https://www.cainiaomax.com/codingground.htm" class="pure-menu-link">Coding Ground</a>
         </li>
         <li class="pure-menu-item">
            <a href="https://www.cainiaomax.com/online_dev_tools.htm" class="pure-menu-link">Tools</a>
         </li>
         <li class="pure-menu-item">
            <a href="https://www.cainiaomax.com/online_dev_tools.htm" class="pure-menu-link">Contact Us </a>
         </li>
      </ul>
   </div>
</body>
</html>

当执行上述代码时，它将生成一个输出，该输出由应用了 CSS 的水平菜单组成，该菜单显示在网页上。