Question

我正在尝试在点击汉堡包菜单时创建一个从右侧滑入的菜单。我希望当用户点击X（汉堡包菜单在点击时动画为X）或用户点击屏幕上的任何其他位置时关闭菜单。

<button class="hamburger hamburger--spin" type="button">
    <span class="hamburger-box" onclick="openNav()">
    <span class="hamburger-inner"></span>
    </span>
</button> 

<div id="sideMenu-animated" class="sideMenu">
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
    <a href="#">Item 3</a>
    <a href="#">Item 4</a>
    <a href="#">Item 5</a>
    <a href="#">Item 6</a>
</div>   

<script>
    function openNav() {
        document.getElementById("sideMenu-animated").style.width = "400px";
    }
    function closeNav() {
        document.getElementById("sideMenu-animated").style.width = "0";
    }
</script>
<script>
    var hamburger = document.querySelector(".hamburger");
        hamburger.addEventListener("click", function() {
             hamburger.classList.toggle("is-active");
        }
    );
</script>

基本上现在，我设置了它，所以当用户点击菜单图标时，它会变为活动状态并将菜单图标设置为X.这样做也会触发我的openNav（）函数（使菜单项进入视图）。

Answer 1

看来你已经掌握了一切，但没有调用你的close方法。

我首先要删除HTML中的onclick。您可以检查点击处理程序中的is-active类，看看菜单是通过按钮点击打开还是关闭。

 hamburger.addEventListener("click", function() {
    this.classList.toggle("is-active");
    if (this.classList.contains('is-active')){
      openNav();
    } else {
      closeNav();
    }
 }

要点击要关闭的页面，我会尝试在菜单后面和页面内容中加入“叠加层”。使其覆盖整个页面视图。

然后，您可以按照与按钮相同的方式添加点击处理程序，以触发汉堡包按钮单击。

单击动画汉堡按钮以打开和关闭导航

1 个答案: