自定义响应式导航栏

Question

这是我第一次使用 flex，我尝试制作一个响应式导航栏，这在某种程度上是成功的。我想做的事：

1. 使汉堡图标变为 X 并平滑过渡。
2. 通过平滑的向下滑动过渡（而不是即时显示）使菜单打开。
3. 添加[边框底部：1px纯黑色； ] 到 .social-icons 当菜单打开（活动）时。
4. 添加[边框半径：0； ] 到 .social-icons ul li:first-child 当菜单打开（激活）时。

我尝试了很多东西，看了很多教程，但我做不到。代码如下：

我们将不胜感激。

Answer 1

你不能指望人们完成你的代码，尤其是当它是简单的 HTML 和 CSS 时。

首先，我将解释如何解决你遇到的第三和第四个问题。

当您单击汉堡图标显示菜单时，它会将“活动”类名称添加到“导航栏链接”。 因此你需要做这样的事情来完成你想要的。

.navbar-links.active .social-icons{
    ...your style goes here..
}

这是如何工作的，您正在选择同时具有导航栏链接和活动作为其类名的元素。在该选择器之后，您将选择具有社交图标类名称的子元素。

为了在您打开菜单和调整大小时制作流畅的动画，我建议您查看w3schools tutorial，您可以在其中了解动画的工作原理。 只需将动画添加到 hamburgers 类名，一旦获得该类名，它就会制作您设计的动画。

这样看，当你为一个类声明动画时，只要一个元素得到那个类，它就会运行一个动画。 例如，您可以执行以下操作：

CSS：

.toggle-button{
   opacity: 0.5;
   color : white;
}
.active_toggle_button{
   animation : customAnimation 0.5s linear forwards;
}
@keyframes customAnimation {
  to{
      opacity: 1;
      color : green;
    }
  }

在你的 Javascript 中：

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active');
  toggleButton.classList.toggle('active_toggle_button');
})

当您单击它时，这会将“active_toggle_button”类切换到您的汉堡包。一旦它将此类添加到您的汉堡包中，它将执行动画。 正如我所说，请查看我从 w3schools 给您的链接。这只是让您了解其实际工作原理的一般概念。