Current setup (plain HTML/CSS):

I've currently got this plain HTML/CSS setup, which is basically using a checkbox with no opacity, with labels acting as buttons (which they in fact are not).

Codepen: https://codepen.io/MikaTheDesigner/pen/MWVYGoz
Video of my current HTML/CSS-demo (and the result goal): https://i.imgur.com/ha3NL0V.mp4

<div >
<input  type="checkbox">
<label >Menu</label>
<label >Close</label>

<div ></div>

<div >
    <nav>
        <ul>
            <li><a>Option 1</a></li>
            <li><a>Option 2</a></li>
            <li><a>Option 3</a></li>
        </ul>
    </nav>
</div>

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.nav {
    pointer-events: none;
    position: fixed;
    z-index: 100;
    width: 100vw;
    height: 100vh;
}

.nav > .menuBtn {
    cursor: pointer;
    width: 122.43px;
    height: 122.43px;
    margin: 0 0 0 3rem;
    pointer-events: initial;
    position: absolute;
    z-index: 99;
    opacity: 0;
}

.nav > .menuBtn:checked ~ .menuLabel.open {opacity: 0;}
.nav > .menuBtn:checked ~ .menuLabel.close {opacity: 100%;}
.nav > .menuBtn:checked ~ .menuBox.transitionBox {left: 100%;}
.nav > .menuBtn:checked ~ .menuBox.BG {left: 0;}

.nav > .menuLabel {
    color: black;
    font-size: 1.5rem;
    position: absolute;
    z-index: 98;
    margin: 3rem 0 0 3rem;
    text-align: center;
    transition: all 0.2s ease-in-out;
}

.nav > .menuLabel.open {
    text-shadow: 0 0 2rem rgba(0,0,0,.5);
    width: 122.43px;
}

.nav > .menuLabel.close {
    opacity: 0;
}

.nav > .menuBox.transitionBox {
    background-color: black;
    width: 200%;
    height: 100%;
    position: absolute;
    z-index: 100;
    left: -200%;
    transition: all 2000ms;
}

.nav > .menuBox.BG {
    background: linear-gradient(to bottom, white, black);
    background-size: cover;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    position: absolute;
    z-index: 96;
    left: -100%;
    transition-delay: 500ms !important;
    transition: all 200ms;
}

.nav > .menuBox.BG > nav {
    position: absolute;
    z-index: 97;
    width: 100%;
    height: 100%;
}

.nav > .menuBox.BG > nav > ul {
    list-style: none;
    padding: 122.43px 3rem 3rem calc(6rem   122.43px);
}

.nav > .menuBox.BG > nav > ul li {
    color: white;
    font-size: 2rem;
    line-height: 2rem;
    margin-bottom: 1.5rem;
}

.nav > .menuBox.BG > nav > ul li > a {
    color: inherit;
    display: block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    width: max-content;
}

.nav > .menuBox.BG > nav > ul li > a:hover {cursor: pointer;}

Goal:

My goal is for the menu to act in the exact same way, when clicking the labels .menulabel.open and .menuLabel.close, but using javascript instead of plain HTML/CSS.

I would change these current labels to a-tags or p-tags and using onClick-functions, when I get the javascript working.

Like linked at the top of the thread, this is my goal, but using javascript to make it react, and not using a plain checkbox: https://i.imgur.com/ha3NL0V.mp4

What have I tried so far?

Besides the plain HTML/CSS-solution I have tried setting up, which I wouldn't argue is the right way to make the menu, I have also tried setting this script up in my HTML-document, inwhich does not seem to work as I want it to:

function openNav() {
                document.getElementsByClassName("menuTransition").style.left = "100%";
                document.getElementsByClassName("menuBox").style.left = "0";
            }

            function closeNav() {
                document.getElementsByClassName("menuTransition").style.left = "-200%";
                document.getElementsByClassName("menuBox").style.left = "-100%";
            }

(the javascript was supposed to just style the two elements when clicking on one of the a-tags the exact same way the CSS reacts, when checking the checkbox and "activating" the menu)

<div >
    <a  onClick="openNav()">Menu</a>

    <div ></div>
    
    <div >
        <a  onClick="closeNav()">Close</a>
        <nav>
            <ul>
                <li><a>Option 1</a></li>
                <li><a>Option 2</a></li>
                <li><a>Option 3</a></li>
            </ul>
        </nav>
    </div>
</div>

(basically the same HTML as above, just removing the labels and replacing them with a-tags)

CodePudding user response：

You can use a single class and toggle that class on the click of a button, something like this:

function myFunction() {
   var element = document.getElementById("myDIV");
   element.classList.toggle("mystyle");
}

.mystyle {
  width: 100%;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
  box-sizing: border-box;
}

<button onclick="myFunction()">Try it</button>

<div id="myDIV">
   This is a DIV element.
</div>

CodePudding user response：

document.getElementsByClassName("menuBox") return an array object .

you need to add the index , such as document.getElementsByClassName("menuBox")[0]