Question

0

229

Vistas

Why my JS code isnt enabling the Nav list toggle

https://codepen.io/brunhild_912/pen/MWQPErp

Here is my code. I am trying to enable the nav list toggle, but its not happening. Why? Any guidance or tips over this issue ae welcomed. I have tried many options but its being stubborn unfortunately.

HTML

<button type="button" class="nav-toggler">
                        <span></span>
                    </button>

                    <!--Navbar-->
                    <nav class="nav">
                        <ul>
                            <li class="nav=item"><a href="#home">Home</a></li>
                            <li class="nav=item"><a href="#about">About</a></li>
                            <li class="nav=item"><a href="#our-menu">Menu</a></li>
                            <li class="nav=item"><a href="#testimonials">Testimonials</a></li>
                            <li class="nav=item"><a href="#team">Team</a></li>
                            <li class="nav=item"><a href="#contact">Contact</a></li>
                        </ul>
                    </nav>

CSS

.header .nav-toggler{
    height: 40px;
    width: 44px;
    margin-right: 15px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header .nav-toggler.active{
    position: absolute;
    right: 0;
    z-index: 1;
}

.header .nav{
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    width: 280px;
    background-color: var(--main-color);
    box-shadow: var(--shadow);
    overflow-y: auto;
    padding: 80px 0 40px;
    transform: transform 0.5s ease;
    transform: translateX(100%);
}

.header .nav .open{
    transform: translateX(0%);
}

JavaScript

const navToggler = document.querySelector(".nav-toggler");
navToggler.addEventListener("click", toggleNav);

function toggleNav(){
    navToggler.classList.toggle(".active");
    document.querySelector(".nav").classList.toggle(".open");
}

about 4 years ago · Juan Pablo Isaza

3 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-06-25T05:02:08.177Z

The first issue you have is that you need to remove the . (period) from your class references (toggle(".active")). Making your toggleNav method like:

function toggleNav(){
    navToggler.classList.toggle("active");
    document.querySelector(".nav").classList.toggle("open");
}

Also, in your css you reference an object with a .header class that does not exist. So you would need to wrap your entire html with:

<div class='header'>
... [YOUR HTML CODE]
</div>

Also, in your css your declaration: .header .nav .open Should be: .header .nav.open

You need a bit of css work for it to function smoothly but this should point you in the right direction.

Answer 2 · 2022-06-25T05:02:08.185Z

There are some JS and css issues in your code. check following code.

const navToggler = document.querySelector(".nav-toggler");
navToggler.addEventListener("click", toggleNav);

function toggleNav(){
    navToggler.classList.toggle("active");
    document.querySelector(".nav").classList.toggle("open");
}

.header .nav-toggler{
    height: 40px;
    width: 44px;
    margin-right: 15px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
  background: red;
}


.header .nav{
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    width: 280px;
    background-color: var(--main-color);
    box-shadow: var(--shadow);
    overflow-y: auto;
    padding: 80px 0 40px;
    transition: transform 0.5s ease;
    transform: translateX(100%);
}

.header .nav.open{
    transform: translateX(0%);
}

<div class="header">
<button type="button" class="nav-toggler">
                        <span></span>
                    </button>

                    <!--Navbar-->
                    <nav class="nav">
                        <ul>
                            <li class="nav=item"><a href="#home">Home</a></li>
                            <li class="nav=item"><a href="#about">About</a></li>
                            <li class="nav=item"><a href="#our-menu">Menu</a></li>
                            <li class="nav=item"><a href="#testimonials">Testimonials</a></li>
                            <li class="nav=item"><a href="#team">Team</a></li>
                            <li class="nav=item"><a href="#contact">Contact</a></li>
                        </ul>
                    </nav>
</div>

Answer 3 · 2022-06-25T05:02:08.194Z

const navToggler = document.querySelector(".nav-toggler");
navToggler.addEventListener("click", toggleNav);

function toggleNav(){
    navToggler.classList.toggle("active");
    document.querySelector("nav").classList.toggle("open");
}

.header .nav-toggler{
    height: 40px;
    width: 44px;
    margin-right: 15px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header .nav-toggler.active{
    position: absolute;
    right: 0;
    z-index: 1;
}

.header .nav{
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    width: 280px;
    background-color: var(--main-color);
    box-shadow: var(--shadow);
    overflow-y: auto;
    padding: 80px 0 40px;
    transform: transform 0.5s ease;
    transform: translateX(100%);
}

.header .nav.open{
    transform: translateX(0%);
}

<div class="header">
  <button type="button" class="nav-toggler active">
       <span>button</span>
  </button>

  <!--Navbar-->
  <nav class="nav open">
    <ul>
        <li class="nav=item"><a href="#home">Home</a></li>
        <li class="nav=item"><a href="#about">About</a></li>
        <li class="nav=item"><a href="#our-menu">Menu</a></li>
        <li class="nav=item"><a href="#testimonials">Testimonials</a></li>
        <li class="nav=item"><a href="#team">Team</a></li>
        <li class="nav=item"><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</div>

Problems in code

classList.toggle(".active"); remove . in string like classList.toggle("active");
add <div> main div in side code class is .header
remove space in between .header .nav .open like- .header .nav.open in css

0

229

Why my JS code isnt enabling the Nav list toggle

3 Respuestas

0

0

0

Encuentra empleos remotos

Andres GPT