How can I fix the slide navigation

Question

I working on this sliding menu. It can slide fine, but have problem to close it by clicking x.

Answer 1

You are making addEventListener to the whole document instead make to particular element (open and close)..

Changes:

Added a new class openMenu in the open menu element like,

☰ open

Then added a new variable to store the element like,

let open = document.querySelector(".openMenu");

Then modified document.addEventListener with open and closeNav respectively like,

open.addEventListener("click", () => {
    openNav.style.width = "250px";
});
closeNav.addEventListener("click", () => {
    openNav.style.width = "0";
});

And the changed snippet looks like,

    let openNav = document.querySelector(".slideOpen");
    let open = document.querySelector(".openMenu");
    let closeNav =  document.querySelector(".slideClose");
    open.addEventListener("click", () => {
        openNav.style.width = "250px";
    });
    closeNav.addEventListener("click", () => {
        openNav.style.width = "0";
    });

.slideOpen { height: 100%; width: 0; position: fixed; z-index: 1;     top: 0; left: 0; background-color: #111; overflow-x: hidden;   transition: 0.5s; padding-top: 60px; }

.slideOpen a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; }

.slideOpen a:hover { color: #f1f1f1; }

.slideOpen .slideClose { position: absolute; top: 0; right: 25px;  font-size: 36px;  margin-left: 50px; } 

☰ open
 
 

    
 × 
    
 About 
    
 Services 
    
 Clients 
    
 Contact