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.
When Width is <= 750 the toggleable menu appears
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 ;)
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.