My website's navigation bar is experiencing a logical error that I've identified. Despite no syntax errors being detected by the browser (I'm using Chrome) and partial functionality, there appears to be an issue.
The main problem with my navigation bar lies in its inability to determine whether it is open or closed. This results in scenarios where the menu button incorrectly displays as either close when the menu is already closed, or vice versa.
The current functioning of my navigation bar involves changing its shape every time it is clicked, causing the menu icon to change on each click rather than specifically when the menu opens.
This issue becomes noticeable when resizing the window/screen and opening the menu without closing it.
I embarked on making my navigation bar 'responsive' by adjusting its design based on screen size - side navigation for large screens and top navigation for small screens - which led to the emergence of this problem.
Unfortunately, due to my limited expertise in JavaScript and jQuery, I haven't been successful in resolving this. Are there alternative approaches that are more efficient and yield better results?
Thanks
Edit: To observe the effect mentioned, you need to copy my code, save it, and open it in an external browser (@media queries won't work in the snippet).
Here is the provided code:
function menuTransform(x) {
var y = document.getElementById("navbar");
var z = $(window).width();
x.classList.toggle("change");
if (z > 500) {
$('nav li:not(.menu)').show();
$('nav hr').show();
if (y.style.width === "300px") {
y.style.transition = "ease 0.5s";
$('nav li a span').addClass('link');
$('nav li a span').removeClass('opened');
y.style.width = "80px";
}
else {
y.style.transition = "ease 0.5s";
$('nav li a span').removeClass('link');
$('nav li a span').addClass('opened');
y.style.width = "300px";
}
}
if (z <= 500) {
$('nav li:not(.menu)').hide();
$('nav hr').hide();
if (y.style.height === "100%") {
y.style.height = "80px";
y.style.width = "100%";
y.style.transition = "ease 0.5s";
$('nav li a span').addClass('link');
$('nav li:not(.menu)').hide();
$('nav hr').hide();
}
else {
y.style.height = "100%";
y.style.width = "100%";
y.style.transition = "ease 0.5s";
$('nav li a span').removeClass('link');
$('nav li:not(.menu)').show();
$('nav hr').show();
}
}
}#navbar {
min-height: 100%;
height: 100%;
}
nav {
z-index: 10;
position: fixed;
top: 0px;
background: linear-gradient(to right, rgb(0,0,0), rgb(13,13,13));
width: 80px;
list-style-type: none;
color: white;
box-shadow: 5px 0px 8px rgba(0,0,0,0.3);
overflow: auto;
}
nav li {
display: flex;
justify-content: center;
align-items: center;
}
nav li a {
display: flex;
width: 100%;
height: 80px;
color: white;
text-decoration: none;
justify-content: center;
align-items: center;
transition: 0.3s;
}
.link {
display: none;
}
.opened {
padding: 10px;
padding-top: 11px;
white-space: nowrap;
}
nav li a:hover:not(.active) {
background: rgb(42,42,42);
box-shadow: 0 1px 8px rgba(0,0,0,0.3);
transform: translateY(-1px);
}
.menu {
padding-top: 16px;
padding-bottom: 16px;
}
.hamMenu {
padding-top: -6px;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
background: white;
width: 36px;
height: 5px;
margin: 6px 0;
transition: 0.5s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-8px, 7px);
transform: rotate(-45deg) translate(-8px, 7px);
}
.change .bar2 {
background: rgba(0,0,0,0);
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<nav id="navbar">
<li class="menu">
<div class="hamMenu" onclick="menuTransform(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</li>
<li><a class="active" href="home.html"><i class="material-icons">home</i><span class="link">Home</span></a></li>
<li><a href="Videos.html"><i class="material-icons">play_circle_filled</i><span class="link">Videos</span></a></li>
<li><a href="#seminars"><i class="material-icons">tv</i><span class="link">Seminars</span></a></li>
<li><a href="#seminars"><i class="material-icons">school</i><span class="link">Personal Tuition</span></a></li>
</nav>