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

【问题标题】：Clicking an animated hamburger button to open and close navigation单击动画汉堡按钮以打开和关闭导航
【发布时间】：2017-08-13 00:58:15
【问题描述】：

我正在尝试创建一个在单击汉堡菜单时从右侧滑入的菜单。我希望菜单在用户单击 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() 函数（使菜单项进入视图）。

【问题讨论】：

请分享您的CSS 代码或创建jsfiddle，以便我们为您提供帮助。
你的问题到底是什么？

标签： javascript jquery html css

【解决方案1】：

看起来你已经准备好了一切，但没有调用你的 close 方法。

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

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

为了点击页面关闭，我会尝试在菜单后面和页面内容上加入一个“覆盖”。使其覆盖整个页面视图。

然后您可以添加一个点击处理程序，就像按钮触发汉堡按钮点击一样。

【讨论】：