CODEWITHSUNDEEP
javascripthtmlcss
Miguel F
Miguel F

Reputation: 65

Changing a class css style with javascript

My problem is that I'm trying to change my "nav-links" style in js because I had it displayed as none on my CSS so I was trying to display it as "block" on my js when I click the class "burger" and having my style back again but when I click the class "burger" the "nav-links" appear so that means that the nav2.style.display = "block"; is working but the rest of the .style isn't working and I don't understand why. If anyone could help me I would really appreciate it.

What im trying to change:

What im trying to change the style off

I'm using the function showhide() so I can use a onclick on the <div class="burger" **onclick= "showhide()"**>

var clicked = 0;
var nav2 = document.querySelector('.nav-links');

const navSlide = () => {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.nav-links');
  const navLinks = document.querySelectorAll('.nav-links li');

  burger.addEventListener('click', () => {

    //Toggle Nav

    nav.classList.toggle('nav-active');

    //Animate Links

    navLinks.forEach((link, index) => {

      if (link.style.animation) {
        link.style.animation = '';
      } else {
        link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s`
      }

    });

    //Burger Animation
    burger.classList.toggle('toggle');

  });
}

if (window.matchMedia("(max-width: 858px)")) {

  function showhide() {
    clicked++;
    console.log(clicked)

    if (clicked == 1) {
      nav2.style.position = "absolute";
      nav2.style.right = "0px";
      nav2.style.height = "92vh";
      nav2.style.top = "8vh";
      nav2.style.backgroundColor = "#000000";
      nav2.style.display = "flex";
      nav2.style.flexDirection = "column";
      nav2.style.transition = "transform 0.5s ease-in";
      nav2.style.display = "block";
    };

    if (clicked == 2) {
      nav2.style.display = "none";
      clicked = 0;
    }
  };
}

navSlide()
.nav-links {
  position: absolute;
  right: 0px;
  height: 92vh;
  top: 8vh;
  background-color: #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
  transform: translateX(100%);
  transition: transform 0.5s ease-in;
  display: none;
}
<nav>
  <img class="cabecalho-logo" src="https://via.placeholder.com/100" alt="Circle Logo">

  <ul class="nav-links">
    <li><a href="carrosview.html">Carros</a></li>
    <li><a href="">Motas</a></li>
    <li><a href="">Barcos</a></li>
    <li><a href="registarentrar.html">Entrar / Registar</a></li>
  </ul>

  <div class="burger" onclick="showhide()">
    <div class="line1">---</div>
    <div class="line2">---</div>
    <div class="line3">---</div>
  </div>
</nav>

Upvotes: 2

Views: 97

Answers (1)

Rmaxx
Rmaxx

Reputation: 1187

well, there's so much going on in your script that makes very little sense, so i just made some changes so maybe you can see whats going on bit better.

Just to name a few: First of all your using a function with an eventlistener on the button, which is perfect, but you also use an onlick event. This makes no sense. You can combine those.

The constants are inside the function, which in this case also makes no sense.. nav and nav2 are even exactly the same element?!

You're toggling a class .nav-active which isnt in the css at all?! whats the idea?'

So you're showing a code that can work perfectly by just adding or removing a class, but are trying to activate all kinds of styles seperatly.. which also makes no sense.

Using the ++ to get clicked to 0 or 1 canbe done by simply making it true or false.

I'm not sure what you want with the JS matchmedia, you can easily do this inside the css also, i left it there, but you might as well delete this whole part.

Anyway, look at the code and try some more... this can be reduced to like 2 or 3 lines eventually, but keep learning and you'll get there!

var clicked = 0;
const nav = document.querySelector('.nav-links');
const burger = document.querySelector('.burger');
const navLinks = document.querySelectorAll('.nav-links li');

const navSlide = () => {

  burger.addEventListener('click', () => {
    burger.classList.toggle('toggle');
    showhide();
  });
}

if (window.matchMedia("(max-width: 858px)")) {

  function showhide() {
    nav.classList.toggle('clicked');
    
    clicked = !clicked;

    if (clicked) {
      // if clicked true
    };

    if (!clicked) {
      // if not
    }
  };
}

navSlide()
.nav-links {
  position: absolute;
  right: 0px;
  height: 92vh;
  top: 8vh;
  background-color: #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
  transform: translateX(100%);
  transition: all 0.5s ease-in;
  display: block;
}

.nav-links.clicked{
      right:0px;
        transform: translateX(-100%);
      display:flex;
      transition: all 0.5s ease-in;
}
<nav>
  <img class="cabecalho-logo" src="https://via.placeholder.com/100" alt="Circle Logo">

  <ul class="nav-links">
    <li><a href="carrosview.html">Carros</a></li>
    <li><a href="">Motas</a></li>
    <li><a href="">Barcos</a></li>
    <li><a href="registarentrar.html">Entrar / Registar</a></li>
  </ul>

  <div class="burger">
    <div class="line1">---</div>
    <div class="line2">---</div>
    <div class="line3">---</div>
  </div>
</nav>

Upvotes: 1

Related Questions