So I was trying to make a mobilenav menu, but what happens is when I click on my hamburger, it causes the list items to display as inline-block, but the function is set to display them as block level elements.
HTML
<div class="nav-options">
<i class="fas fa-bars" onclick="mobilenav()"></i>
<ul id="myLinks">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
CSS
#myLinks {
text-align: right;
}
#myLinks li {
list-style: none;
display: inline-block;
padding: 0.5rem 2rem;
font-size: 20px;
}
.nav-options i {
display: none;
}
#myLinks li:hover {
background-color: #ff3f05;
cursor: pointer;
transition: all 0.5s;
}
CSS for mobile view:
.nav-options i {
display: block;
font-size: 25px;
text-align: right;
}
.nav-options #myLinks {
display: none;
padding: 0px;
}
JS
function mobilenav() {
var links = document.getElementById("myLinks");
if (links.style.display === "block") {
links.style.display = "none";
} else {
links.style.display = "block";
}
}
While you are assigning the display property of the <li> elements, you are controlling the display property of the <ul> element. In the solution below I removed the display properties from the CSS file. The load event is fired when the page loads, and both the <ul> element and the <li> element are assigned a display style. Then when the <i> element is clicked, the click event occurs and the display property is toggled.
let icon = document.getElementById("icon");
var linkContainer = document.getElementById("myLinks"); /* <ul> element */
var linkElements = document.querySelectorAll('li'); /* <li> elements */
window.addEventListener('load', (event) => {
linkContainer.style.display = "block";
linkElements.forEach(li => {
li.style.display = "block";
});
});
function log() {
console.clear();
console.log(`<ul> display style: ${linkContainer.style.display}`);
console.log(`<li> display style: ${linkElements[0].style.display}`);
}
icon.addEventListener("click", function(e) {
log();
if(linkContainer.style.display === "block")
linkContainer.style.display = "none";
else
linkContainer.style.display = "block";
});#myLinks {
text-align: right;
}
#myLinks li {
list-style: none;
/* display: inline-block; */
padding: 0.5rem 2rem;
font-size: 20px;
}
.nav-options i {
display: none;
}
#myLinks li:hover {
background-color: #ff3f05;
cursor: pointer;
transition: all 0.5s;
}
.nav-options i {
display: block;
font-size: 25px;
text-align: right;
}
.nav-options #myLinks {
display: none;
padding: 0px;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="nav-options">
<i id="icon" class="fas fa-bars"></i>
<ul id="myLinks">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>