點擊動畫漢堡包按鈕打開和關閉導航

我試圖創建一個菜單，從右側點擊漢堡菜單時滑入。我想讓菜單在用戶點擊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

謝謝！這工作完美 –

點擊動畫漢堡包按鈕打開和關閉導航

回答

相關問題