I'm trying to create a responsive navbar.
When screen size is reduced I'm using media query to style visibility of #nav-items to hidden and display a menu icon.
I have written a javascript code to handle on click on menu icon style #nav-itmes to visible and hidden (trying to toggle by if condition to check style value)
Problem: on first click result is ok. #nav-items are visible but again when i click #nav-items style does not change to hidden (while i can console click event is there on every click)
Can anyone guide me ?
There are several approach to have this result to toggle an element but I want to only know what is issue in below code. (only javascript please).
let nav_icon = document.getElementById("nav-icon");
nav_icon.addEventListener("click", () => {
console.log('clicked');
let nav_items = document.getElementById("nav-items");
nav_items.style.visibility = nav_items.style.visibility = "hidden" ? "visible" : "hidden";
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
a,
ul,
h3 {
text-decoration: none;
color: white;
list-style-type: none;
font-weight: bold;
}
body {
background-image: url("/img/bg.jpg");
}
img {
display: none;
height: 30px;
width: 30px;
margin-right: 10px;
position: fixed;
top: .4em;
right: .2em;
}
.navbar {
display: flex;
height: 40px;
width: 100%;
align-items: center;
justify-content: space-between;
background-color: #ABA9A966;
gap: 10px;
}
nav a,
header h3 {
margin: 0px 10px 0px 10px;
}
nav a:hover {
background-color: grey;
}
@media screen and (max-width: 800px) {
nav a,
header h3 {
margin: 0px 5px 0px 5px;
font-size: 15px;
}
}
@media screen and (max-width: 600px) {
.navbar {
flex-flow: column;
}
header {
display: none;
}
nav {
width: auto;
text-align: center;
background-color: #ABA9A966;
position: fixed;
visibility: hidden;
top: 2.5em;
right: 0;
}
nav a {
margin: 0;
height: 22px;
padding-top: 3px;
display: block;
width: 8rem;
font-size: 14px;
}
img {
display: block;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<div >
<header>
<h3>Hello Guest</h3>
</header>
<nav id="nav-items">
<a href="#" >Home</a>
<a href="#">Dispatch</a>
<a href="#">Account</a>
<a href="#">Report</a>
<a href="#">Control</a>
</nav>
</div>
<img src="/img/menu.png" id="nav-icon">
CodePudding user response:
Think this line is incorrect: nav_items.style.visibility = nav_items.style.visibility = "hidden" ? "visible" : "hidden";
The equality check should be: nav_items.style.visibility === "hidden"
so this may work: nav_items.style.visibility = (nav_items.style.visibility === "hidden" ? "visible" : "hidden");
CodePudding user response:
Try the css property for media-query: display:none !important;
CodePudding user response:
Often you cannot see the style of an element in JS if the style was applied in a stylesheet
You can toggle a class instead
For example
nav { visibility: hidden; }
nav.show { visibility: visible; }
and js
const nav_icon = document.getElementById("nav-icon");
const nav_items = document.getElementById("nav-items");
nav_icon.addEventListener("click", () => {
console.log('clicked');
nav_items.classList.toggle("show")
});
const nav_icon = document.getElementById("nav-icon");
const nav_items = document.getElementById("nav-items");
nav_icon.addEventListener("click", () => {
console.log('clicked');
nav_items.classList.toggle("show")
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
a,
ul,
h3 {
text-decoration: none;
color: white;
list-style-type: none;
font-weight: bold;
}
body {
background-image: url("/img/bg.jpg");
}
img {
height: 30px;
width: 30px;
margin-right: 10px;
position: fixed;
top: .4em;
right: .2em;
}
.navbar {
display: flex;
height: 40px;
width: 100%;
align-items: center;
justify-content: space-between;
background-color: #ABA9A966;
gap: 10px;
}
nav { visibility: hidden; }
nav a,
header h3 {
margin: 0px 10px 0px 10px;
}
nav a:hover {
background-color: grey;
}
@media screen and (max-width: 800px) {
nav a,
header h3 {
margin: 0px 5px 0px 5px;
font-size: 15px;
}
}
@media screen and (max-width: 600px) {
.navbar {
flex-flow: column;
}
header {
display: none;
}
nav {
width: auto;
text-align: center;
background-color: #ABA9A966;
position: fixed;
visibility: hidden;
top: 2.5em;
right: 0;
}
nav a {
margin: 0;
height: 22px;
padding-top: 3px;
display: block;
width: 8rem;
font-size: 14px;
}
img {
display: block;
}
}
nav.show {
visibility: visible;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<div >
<header>
<h3>Hello Guest</h3>
</header>
<nav id="nav-items">
<a href="#" >Home</a>
<a href="#">Dispatch</a>
<a href="#">Account</a>
<a href="#">Report</a>
<a href="#">Control</a>
</nav>
</div>
<img src="/img/menu.png" id="nav-icon" title="ICON" alt="ICON">