0

I am making a hamburger menu which should display the a tags once it's clicked and hide them again, once it's clicked again. Currently for some reason the a's show when you click twice on the hamburger menu, why and how can I make them display the first time the menu is clicked and hide them again, when the menu get's clicked again?

Here is the html:

<div class="a-container">
    <a href="/index.html">Home</a>
    <a href="/pages/about.html">About</a>
    <a href="/pages/solutions.html">Solutions</a>
    <a href="/pages/team.html">Team</a>
    <a href="/pages/contact.html">Contact</a>
</div>

the javascript:

let hamburger = document.querySelector('.hamburger');
let menu = document.querySelector('.a-container');
let bod = document.querySelector('.container');
let navLinks = document.querySelector('.a-container');

hamburger.addEventListener('click', function () {

    var x = document.querySelector(".a-container");
    if (x.style.display === "none") {
        x.style.display = "flex";
    } else {
        x.style.display = "none";
    }

    hamburger.classList.toggle('isactive');
    menu.classList.toggle('active');
});

and the css:

.hamburger {
    margin: 0;
    margin-left: 15px;
    padding: 0;
    float: left;
    transition: opacity .3s;
}

.hamburger:hover {
    cursor: pointer;
    opacity: .5;
}

.hamburger .line{
    width: 50px;
    height: 5px;
    background: #01568a;
    margin: 8px auto;
    transition: all 0.3s ease-in-out;
    border-radius: 5px;
}

.hamburger.isactive .line:nth-child(2) {
    opacity: 0;
}

.hamburger.isactive .line:nth-child(1) {
    transform: translateY(13px) rotate(45deg);
}

.hamburger.isactive .line:nth-child(3) {
    transform: translateY(-13px) rotate(-45deg);
}

.a-container {
    display: none;
} 

.a-contaier.active {
    display: block;
    animation: fade .5s;
}
Shahnawaz Hossan
  • 2,695
  • 2
  • 13
  • 24
user13900804
  • 31
  • 7
  • 1
    It's happens because your condition checks if the hamburger has `display: none` as an inline style, which it has not, so the inline style is set. The second time you click the inline style is present and thus sets the display to `'flex'`. – Emiel Zuurbier Jul 19 '20 at 15:52
  • 'Second time around' problem. What is the initial state of the icon and do you test for that? – Rene van der Lende Jul 19 '20 at 15:52
  • The problem is that `x.style.display` refers only to *inline* styles, which your element doesn't have until your code adds it on the first click. Either add an explicit `style="display: none;"` attribute, or use `getComputedStyle` in your check. (I am sure this same question has been asked many times before, which is why I'm not giving this as an answer. I will try to find a good duplicate link.) – Robin Zigmond Jul 19 '20 at 15:52
  • I have set the display property to display none: .a-container { display: none; } – user13900804 Jul 19 '20 at 15:54
  • Does this answer your question? [Button does not function on the first click](https://stackoverflow.com/questions/28100979/button-does-not-function-on-the-first-click) – Robin Zigmond Jul 19 '20 at 15:56
  • There's no .container nor .hamburger to eat. + menu and navLinks for the same element, hm strange... – VXp Jul 19 '20 at 16:22
  • Inline style means `style="display: none"` as an attribute on an element. The `style` property of an element controls the values of the attribute. So without the attribute and the correct value your condition will always be false. – Emiel Zuurbier Jul 19 '20 at 16:43

0 Answers0