点击动画汉堡包按钮打开和关闭导航

我试图创建一个菜单，从右侧点击汉堡菜单时滑入。我想让菜单在用户点击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（）函数（使菜单物品进入视野）。

来源

2017-08-13 J.Daniels

请分享您的CSS代码或创建一个'jsfiddle'，以便我们帮您解决。 – Shiladitya

你的问题到底是什么？ – Justin

看起来你已经拥有了一切，但没有你的密切方法被调用。

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

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

对于单击页面上收，我会尝试引入一个“覆盖”是菜单后面和网页内容上。使其覆盖整个页面视图。

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

来源

2017-08-13 03:52:35 lscmaro

谢谢！这工作完美 –

点击动画汉堡包按钮打开和关闭导航

回答

相关问题