Question

我对编码和javascript很陌生，我一直在尝试创建一个导航块，当我点击左上角的徽标时，该导航块从左侧滑入。

我好像导航的滑入和导出元素工作正常但是，如果我向下滚动页面并尝试再次打开导航，浏览器窗口会跳回到页面顶部而不是住在原地。奇怪的是，当我关闭导航时它不会这样做，只需打开它。

这是我在HTML顶部用来控制导航打开和关闭的脚本：

 <script>
      function openNav() {
        document.getElementById("expanded-menu").style.display = "block";
      }

      function closeNav() {
        document.getElementById("expanded-menu").style.display = "none";
      }
    </script>

这是CSS样式扩展导航：

.expanded-menu {
  background-color: #f3f3f3;
  height: 100vh;
  position: fixed;
  display: none;
  width: 230px;
  text-align: center;
  z-index: 100;
  overflow-x: hidden;
  animation: animateleft 0.4s;
  top: 0;
  left: 0;
}

我在那里的动画效果似乎也没有起作用。它只是跳出而不是滑动。但我想我需要为此开另一个问题。

提前致谢！

编辑：这也是关联的HTML。

<div class="expanded-menu" id="expanded-menu">
        <!-- MENU -->
          <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">
            <img src="images/Backarrow.png">
          </a>

和...

<div class="contracted-menu">
        <a href="#" onclick="openNav()">
          <img src="images/nav icons/Cuttsy.png"  class="cuttsy-small" alt="Cuttsy logo">
        </a>

Answer 1

您的代码有效。确保正确触发功能。

例如，链接a，其href属性链接到javascript函数。

<a href="javascript:openNav()">Open</a><br>
<a href="javascript:closeNav()">Close</a><br>

<div id="expanded-menu" class="expanded-menu">
  My menu.
</div>
Some Content.

有关正常工作的版本，请参阅此codepen。

动画

考虑使用css3过渡作为显示动画的方式。

transition: left 1s;

现在，display:none和display:block之间的转换无法实现任何目标，因为没有中间状态。相反，我建议使用左偏移来滑动菜单。

您可以隐藏宽度为200像素且左偏移 -200px 的菜单。（左，上，右，下可能为负。）将left偏移转换为 0px 看起来像是一个过渡。

请参阅此codepen中的工作示例。

CSS

width: 230px;
left: -230px;
transition: left 1s;

JS

function openNav() {
     document.getElementById("expanded-menu").style.left = "0px";
}

function closeNav() { 
    document.getElementById("expanded-menu").style.left = "-230px";
}

Answer 2

您需要禁用默认操作，您可以使用下面演示的preventDefault方法或使用javascript：void（0），就像您在示例中使用的那样。

您刚刚使用了＃34;＃＆＃34;的工作链接。通常，如果与某些现有ID一起使用，它将滚动到它，但如果为空则它将滚动到顶部。

＆＃13;

function foo(e) {
  e.preventDefault()
  console.log('foo');
}

＆＃13;

<a href="#" onclick="foo(event)">xxx</a>

＆＃13;

在打开

2 个答案:

动画

CSS

JS