How to add JS functionality to side menu?-CodePudding

I started to add some JS but the script isn't working and I'm not sure what I can do from here to make it work. So the code is supposed to listen for the click event and in turn either open or close the menu depending on its position. The id is used so that if the hamburger menu is clicked the menu will slide out 100%. The X is then on the menu to close the menu, however, when I press the hamburger icon the menu isn't sliding in, and when it's tested with the menu out the X isn't closing it.

const menuTrigger = document.getElementById('trigger'); //1
menuTrigger.addEventListener("click", open); //5

const closeMenu = document.getElementById("closer"); //2
closeMenu.addEventListener("click", closed); //3

const sideMenu = document.getElementById('side-menu'); //4

function open() {
  sideMenu.classList.add("show");
}

function closed() {
  sideMenu.classList.remove("show");
}

.show {
  opacity: 1;
  transform: translateX(0%);
  background-color: white;
}

#side-menu {
  position: fixed;
  opacity: 1;
  transform: translateX(100%);
  z-index: 20;
  background-color: #edeae5;
  top: 0;
  right: 0;
  height: 100vh;
  width: 20%;
  transition: transform 0.5s ease-in-out;
}

<div >
  <ul>
    <li> <a href="#nav"> Home </a> </li>
    <li> <a href=# services> Services </a> </li>
    <li> <a href="#team"> Meet The Team</a> </li>
    <li> <a href="#philosophy"> Philosophy</a> </li>
    <li id="trigger"> <svg  xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24" style=" fill:#FFFFFF;"><path d="M 2 5 L 2 7 L 22 7 L 22 5 L 2                                        5 z M 2 11 L 2 13 L 22 13 L 22 11 L 2 11 z M 2 17 L 2 19 L 22 19 L 22 17 L 2 17 z"></path></svg>      </li>
  </ul>
</div>

  <aside id="side-menu">
        <div >
            <h1 id="side-img">
                CLIK
            </h1>
            <div >
                <h1 id="closer">
                    X
                </h1>
            </div>
        </div>
        <div >
            <ul>
                <li > <img  src="serv-black.png" alt=""> <a href="#services">Services</a></li>
                <li > <img  src="team-balck.png" alt=""><a href="#team">Meet The Team</a></li>
                <li > <img  src="phil-black.png" alt=""><a href="#philosophy">Philosophy</a></li>
            </ul>
        </div>
        <hr>
        <div >
            <div >
                <ul>
                    <li > <img  src="fb2.png" alt=""> <a href="#">Facebook</a></li>
                    <li > <img  src="instagram2.png" alt=""> <a href="#">Instagram</a></li>
                    <li > <img  src="whatsapp.png" alt=""> <a href="#">Whatspp</a></li>
                </ul>
                <hr>
            </div>
        </div>
    </aside>

CodePudding user response：

Your primary problem is that id selectors in CSS have higher specificity than class selectors, so .show on its own can't override the transform (or anything else) that's declared in #side-menu.

Adding the id to the selector in the CSS, making it #side-menu.show instead of just .show gives it higher specificity so its rules can override the ones in #side-menu.

/* do this */
#side-menu.show {
}

/* instead of this */
.show {
}

const menuTrigger = document.getElementById('trigger'); //1
menuTrigger.addEventListener("click", open); //5

const closeMenu = document.getElementById("closer"); //2
closeMenu?.addEventListener("click", closed); //3

const sideMenu = document.getElementById('side-menu'); //4

function open() {
  sideMenu.classList.toggle("show");
}

function closed() {
  sideMenu.classList.remove("show");
}

#side-menu.show {
  opacity: 1;
  transform: translateX(0%);
  background-color: white;
}

#side-menu {
  position: fixed;
  opacity: 1;
  transform: translateX(100%);
  z-index: 20;
  background-color: #edeae5;
  top: 0;
  right: 0;
  height: 100vh;
  width: 20%;
  transition: transform 0.5s ease-in-out;
}

<div >
  <ul>
    <li> <a href="#nav"> Home </a> </li>
    <li> <a href=# services> Services </a> </li>
    <li> <a href="#team"> Meet The Team</a> </li>
    <li> <a href="#philosophy"> Philosophy</a> </li>
    <li id="trigger"> <svg  xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24" style="fill:red;"><path d="M 2 5 L 2 7 L 22 7 L 22 5 L 2                                        5 z M 2 11 L 2 13 L 22 13 L 22 11 L 2 11 z M 2 17 L 2 19 L 22 19 L 22 17 L 2 17 z"></path></svg>      </li>
  </ul>
</div>

  <aside id="side-menu">
        <div >
            <h1 id="side-img">
                CLIK
            </h1>
            <div >
                <h1 id="closer">
                    X
                </h1>
            </div>
        </div>
        <div >
            <ul>
                <li > <img  src="serv-black.png" alt=""> <a href="#services">Services</a></li>
                <li > <img  src="team-balck.png" alt=""><a href="#team">Meet The Team</a></li>
                <li > <img  src="phil-black.png" alt=""><a href="#philosophy">Philosophy</a></li>
            </ul>
        </div>
        <hr>
        <div >
            <div >
                <ul>
                    <li > <img  src="fb2.png" alt=""> <a href="#">Facebook</a></li>
                    <li > <img  src="instagram2.png" alt=""> <a href="#">Instagram</a></li>
                    <li > <img  src="whatsapp.png" alt=""> <a href="#">Whatspp</a></li>
                </ul>
                <hr>
            </div>
        </div>
    </aside>