Problem with a CSS property when using a JS script

user_17407020 0
Viewed 59

Noob question. I am practicing with a Web-Site; and I have a toggleable menu that appears when it gets to a certain width (250-750px) and disappears when it reaches 751px. When I insert a js script it remains hidden.

CSS

@media (min-width: 250px) and (max-width: 750px){

    .headernav ul li {
        width: 100%;
        display: block;
        background-color: hsl(3, 43%, 56%);
        opacity: 0;
        transition: .5s;
    }

@media (min-width: 751px){
    .headernav ul li{
        opacity: 1;
    }
}

Here is the js code

let toggledNavMenu = false;

function toggleMenu(){

    let getMenu = document.querySelector(".menu");
    let getLi = document.querySelectorAll(".headernav ul li");
    let liSize = getLi.length;  

    if(toggledNavMenu == false){
        for (let i = 0; i < liSize; i++) {
            getLi[i].style.opacity ="0";
        }
    toggledNavMenu = true;
    }

    else{
        for (let i = 0; i < liSize; i++) {
            getLi[i].style.opacity ="1"; 
        }
    toggledNavMenu = false;
    }
}

The problem is that if I click on the menu; and the opacity is set to 0 in the js script, the menu remains hidden when I expand the screen. So basically I end up with an invisible menu. I'll let a sequence of images to explain it better. The only way to fix this is by going to a width<=750 so the buttom shows and then click on it, bringing the opacity back to 1 and it's really annoying.

Starting Nav

When Width is <= 750 the toggleable menu appears

The menu displays when clicked

Width is now > 750 and the menu disappears

responsive css javascript
2 Answers

I felt like you wrote many unnecessary codes like for loop functions for a simple Nav-Bar.

CSS code

@media (min-width: 250px) and (max-width: 750px){
    .menu{
    display: none;
    }
}

JS code

function toggleNav() {
  var toggledNavMenu  = document.getElementById(".menu");
  if (toggledNavMenu.style.display === "none") {
    toggledNavMenu.style.display = "block";
  } else {
    toggledNavMenu.style.display = "none";
  }
}
// just piece of cake ;)
user_173689590

You're getting the job wrong.

First - install jQuery, it's simple enough for a newbiew. Second - Explore and learn. Third - Implement.

In most cases css elements are bound to jQuery/Javascript events. So when you hover, then you add 'active' class to the element that was clicked. You add other class to the parent as well.

So you get

<ul class="dropdown-is-active"><li class="selected"> ... </ul>

Basically you react to events, add/remove classes and compose css properly. Remember that it's hard to make uniform dropdown menu. It's always somehow limited.

user_171505160
Related