基础 CSS 菜单

介绍

在 Web 开发中，我们经常需要使用菜单来实现网站、应用程序、应用程序和其他用户界面中的导航和操作。菜单可以帮助用户在不同的页面之间切换和执行各种操作。

在本指南中，我们将学习如何使用基础 CSS 创建一个简单的菜单。我们还将涵盖一些常见的菜单设计模式和技巧，以帮助您改进您的菜单的外观和功能。

基本菜单

HTML

首先，我们需要编写 HTML 以创建基本菜单结构。在这个例子中，我们将使用一个简单的无序列表 (<ul>) 来创建我们的菜单，每个菜单项（<li>) 包含一个链接 (<a>)，该链接将指向另一个页面或执行某些操作。

<ul>
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

CSS

接下来，我们需要使用 CSS 样式菜单，以便为其添加一些样式和交互效果。在这个例子中，我们将使用列表项的样式来创建基本菜单样式。

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
}

a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: #333;
}

a:hover {
  background-color: #f5f5f5;
}

效果

运行这段代码，你将看到一个基本的菜单，如下所示：

• [x] 首页 产品 服务 关于我们 联系我们

当您将鼠标悬停在菜单项上时，它们会突出显示。该菜单目前是手动制作的超链接列表，点击链接将不会发生任何事情。

下拉菜单

HTML

下面，我们将学习如何创造一个下拉菜单。下拉菜单是一种常见的设计模式，可使您在单个菜单项下显示多个选项。

在 HTML 中，我们使用嵌套的列表来创建下拉菜单。在下面的代码示例中，我们创建的子列表会显示在“产品”菜单项的下拉菜单中。

<ul>
  <li><a href="#">首页</a></li>
  <li>
    <a href="#">产品</a>
    <ul>
      <li><a href="#">Web 应用</a></li>
      <li><a href="#">移动应用</a></li>
      <li><a href="#">桌面应用</a></li>
    </ul>
  </li>
  <li><a href="#">服务</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

CSS

接下来，我们需要使用 CSS 样式下拉菜单，以便为其添加样式和交互效果。

为了创建下拉菜单，我们需要隐藏子列表，直到用户将鼠标悬停在“产品”菜单项上为止。

下面的 CSS 代码示例 display : none 隐藏下拉列表。当鼠标悬停在父项上时，使用 display:block 显示下拉列表。

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  position: relative;
}

a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: #333;
}

a:hover {
  background-color: #f5f5f5;
}

ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid #ddd;
}

li:hover > ul {
  display: block;
}

效果

运行这段代码，您将看到我们的下拉菜单。当您将鼠标悬停在“产品”菜单项上时，将显示子列表。

• [x] 首页 产品 服务 关于我们 联系我们
  • [x] Web 应用
  • [x] 移动应用
  • [x] 桌面应用

点击菜单

最后，我们将介绍如何创建一个点击菜单，这意味着单击菜单项会将用户带到新页面或执行某种操作。

HTML

为了创建一个点击菜单，我们需要使用 JavaScript 来实现单击菜单项时应发生什么。我们的 HTML 和 CSS 与基本菜单相同，并添加了 data-target 属性来标识应执行什么操作。

<ul>
  <li><a href="#">首页</a></li>
  <li data-target="#products"><a href="#">产品</a></li>
  <li><a href="#">服务</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

<div id="products" style="display: none;">
  <h2>产品列表</h2>
  <ul>
    <li><a href="#">Web 应用</a></li>
    <li><a href="#">移动应用</a></li>
    <li><a href="#">桌面应用</a></li>
  </ul>
</div>

CSS

为了为这个菜单添加样式，我们只需要将先前的 CSS 代码稍作更改，以便正确处理如下情况：菜单项是一个链接（而不是一个按钮），并且我们需要在打开目标元素时禁用链接的默认行为。

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  position: relative;
}

a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: #333;
}

a:hover {
  background-color: #f5f5f5;
}

ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid #ddd;
}

li:hover > ul {
  display: block;
}

[data-target] {
  cursor: pointer;
}

[data-target]:not(a) {
  pointer-events: none;
}

#products {
  display: none;
}

#products.active {
  display: block;
}

JavaScript

我们的 JavaScript 将负责在单击菜单项时执行正确的操作。

首先，我们需要找到菜单项并监听它们的点击事件。当用户单击菜单项时，我们需要执行以下操作：

• 禁用链接的默认行为；
• 获取 data-target 属性的值；
• 查找具有该 ID 的元素；
• 显示新元素；
• 隐藏所有其他目标元素。

var menuItems = document.querySelectorAll('[data-target]');

for (var i = 0; i < menuItems.length; i++) {
  menuItems[i].addEventListener('click', function (event) {
    event.preventDefault();

    var target = this.getAttribute('data-target'),
        element = document.querySelector(target),
        active = document.querySelector('.active');

    if (target && element) {
      if (active) {
        active.classList.remove('active');
      }

      element.classList.add('active');
    }
  });
}

效果

运行这段代码，单击“产品”菜单项将显示包含其他菜单项的新内容。

• [x] 首页 产品 服务 关于我们 联系我们

点击“产品”会显示：

• [x] Web 应用
• [x] 移动应用
• [x] 桌面应用

总结

在本指南中，我们学习了如何使用基本 CSS 创建菜单。我们还学习了如何添加下拉功能和单击操作，并涵盖了一些常见的菜单设计模式和技巧。

下一步将是探索这些模式和技巧的更多变化，并使用 JavaScript 和其他 Web 技术来改善功能和外观。