如何通过单击图标使菜单栏出现?在 CSS 中?

在现代 UI/UX 设计中，需要提供一些功能才能给用户提供更好的体验。其中，常见的是菜单栏，它允许用户直接访问网站上的不同部分。在此过程中，用户需要单击菜单栏（或位于菜单栏上的图标）才能看到菜单。

在接下来的内容中，我将向您介绍如何使用 CSS 使菜单栏出现。

创建 HTML 结构

假设我们正在开发一个简单的网站，在其顶部拥有一个菜单栏。我们可以像下面这样创建其 HTML 结构：

<header>
   <nav>
      <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">About Us</a></li>
         <li><a href="#">Services</a></li>
         <li><a href="#">Contact Us</a></li>
      </ul>
   </nav>
   <div class="menu-icon"><i class="fa fa-bars"></i></div>
</header>

在此代码中，我们有一个包含菜单项的导航。此外，我们还有一个图标，该图标是位于菜单栏顶部的一行 DIV 中的 Font Awesome 图标。

创建 CSS 样式

在这种情况下，我们将使用 CSS 中的转换和过渡来切换菜单栏的可见性。默认情况下，菜单栏是隐藏的。当用户单击菜单图标时，该菜单栏将通过一个特殊的类名（.menu-toggle）进行可见/隐藏切换。

header nav ul {
   display: none;
}
header .menu-toggle {
   display: none;
}
header .menu-icon {
position: relative;
cursor: pointer;
}
header .menu-icon i {
color: #fff;
font-size: 3rem;
}
header nav ul li {
   text-align: center;
   margin-top: 1rem;
}
header nav ul li a {
   display: block;
   font-size: 2rem;
   color: #fff;
   text-decoration: none;
}
@media screen and (min-width: 768px) {
   header nav ul {
      display: flex;
      justify-content: flex-end;
   }
   header nav ul li {
      margin-top: 0;
      margin-left: 3rem;
   }
   header .menu-icon {
      display: none;
   }
}

让我们分解一下上述 CSS 代码。首先，我们隐藏了菜单栏，因为我们希望它默认情况下不可见。接下来，我们将隐藏我们的菜单图标（.menu-icon）。

但这个图标仍然必须有一些 CSS 样式。为此，我们使其拥有 position: relative 和 cursor: pointer。这将使其成为点击的元素，并使它更有意味。

最后，我们依次定义了导航和菜单项元素的样式。在 media 查询中，我们应用了桌面版样式，这是菜单栏在桌面设置下的样式。

实现切换菜单栏的代码

现在，我们已经定义了 HTML 和 CSS，我们需要编写一个 JavaScript 文件来为菜单图标添加事件，并在其单击时切换菜单栏的可见性。此外，我们还需要在点击屏幕上的其他区域时隐藏菜单栏。以下是我们的 JavaScript 代码：

const menuIcon = document.querySelector('.menu-icon');
const menuItems = document.querySelector('nav ul');
const menuItem = document.querySelectorAll('nav ul li a');

menuIcon.addEventListener('click', () => {
   menuItems.classList.toggle('menu-toggle');
});

menuItem.forEach(item => {
   item.addEventListener('click', () => {
      menuItems.classList.toggle('menu-toggle');
   });
});

document.addEventListener('click', event => {
   if (!menuIcon.contains(event.target) && !menuItems.contains(event.target)) {
      menuItems.classList.remove('menu-toggle');
   }
});

该代码看起来很长，但实际上它只是三个监听器和一些逻辑。

首先，我们获取菜单图标和菜单项的引用，以便我们可以监听它们的单击事件。然后，我们定义了一个事件侦听器使得当单击菜单图标时，菜单栏的显示/隐藏逻辑通过在菜单项上添加或删除类名进行实现。这很容易实现，通过使用 ClassList（列表的一个方法），我们向其添加或删除类名。

我们还添加了另一个事件侦听器，我们使用它来处理当菜单项被单击时，隐藏菜单栏并以单击的菜单项为目标页面进行导航。

最后，我们添加了一个事件侦听器，使得当单击屏幕上的其他主体时，菜单栏也将不可见。

结论

鉴于上述内容，我们已经了解了如何使用 CSS 和 JavaScript 使菜单栏出现。这样的实现方法就是在网站中添加菜单栏的一种功能。过程可能看起来很复杂，但是如果您能理解 CSS 和 JavaScript 中的基础知识，则应该能够轻松地理解并实现上述功能。

该如何让自己了解这个问题？首先需要掌握 HTML、CSS 和 JavaScript 的基础知识。此外，您可以阅读相关的 UI/UX 文献来了解网站上添加菜单栏的一些最佳实践方法。