CSS3 - 变换 :translate property when clicking on a link

Question

我在移动设备上使用这段代码向我的网站添加了一个导航栏(只是稍微编辑了一下，以便它从顶部向下滚动):

https://codepen.io/plavookac/pen/qomrMw

有没有办法让菜单在我点击链接时向后滚动(关闭)？我有一个单页网站，带有滚动到每个部分的 anchor 链接，所以如果菜单没有关闭，我的内容会在下面滑动..

谢谢!

Answer 1

有很多方法可以做到这一点。你可以使用这种方式。希望这不是最好的解决方案，而是它的工作。

在 ul 标签中使用 sidemenu ID，在每个 li 标签中使用 list 类。然后在 script 标记内使用以下 JavaScript 代码。

const elements = document.getElementById('sidemenu');
elements.addEventListener('click', function(e) {
  if (e.target.classList.contains('list')) {
    document.getElementById('sidebarMenu').style.transform =
      'translateX(-250px)';
  }
});