My website is designed to be responsive and includes a navigation slider that is hidden off-screen by default. The slider features a vertical push/pull bar that remains visible for users to access the menu. The entire navigation slider is fixed on the page with a scrollbar within the menu.
On smaller devices, when the menu is open, it spans 100% of the viewport width. To accommodate this, I have added a top margin to the body content of 100vh to push it off the bottom of the screen. My goal is to have the menu automatically close when a user clicks on a menu item that directs them to a specific link. I have implemented an event listener on the menu items to remove the 'active' class that controls the display of the menu when it is open. However, currently, clicking on a menu item does not close the menu.
I have tested the event listener and confirmed that it works to some extent. When I change the body to 'display: none' instead of using 'margin-top: vh', clicking on the menu item successfully closes the menu. However, this approach fails to navigate the user to the specified link. I understand that this is due to the content of the body being hidden before the link is clicked, which is why I am seeking a solution using 'margin-top' instead of 'display'.
I have researched this issue but have not found a suitable solution that addresses my specific problem. As I am new to JavaScript, I would greatly appreciate any assistance and advice on how to resolve this issue.
$(document).ready(function() {
var mquery = window.matchMedia("(max-width:767.98)");
$('#toggle-bar').on('click', function() {
$('#sidebar').toggleClass('active');
});
if (mquery.matches) {
$('.menu-item').on('click', function() {
$('#sidebar').removeClass('active');
});
}
});.sidebar {
display: flex;
width: 100%;
position: fixed;
max-height: 100vh;
margin-left: calc(-100% + 25px);
/*to keep .sidebar-toggle in the view*/
}
.sidebar.active {
margin-left: 0;
}
.sidenav {
overflow-y: scroll;
}
.sidebar-toggle {
width: 25px;
}
.sidebar #navpush {
display: none;
}
.sidebar.active #navpush {
display: inline;
}
.sidebar.active #navpull {
display: none;
}
.body-content {
padding: 15px;
}
.sidebar.active~.body-content {
margin-top: 100vh;
}<div class="container body-wrapper">
<aside class="sidebar" id="sidebar">
<nav class="sidenav">
<ul id="main-nav">
<li><a href="#section1" class="menu-item">Section 1</a></li>
<li><a href="#sect1nav" class="dropdown-toggle" data-toggle="collapse">Section 1</a>
<ul id="sect1nav" class="collapse submenu">
<li><a href="#section2a" class="menu-item">Section 2A</a></li>
<li><a href="#section2b" class="menu-item">Section 2B</a></li>
</ul>
</li>
<li><a href="#section3" class="menu-item">Section 3</a></li>
</ul>
</nav>
<div class="toggle-bar" id="toggle-bar">
<div id="nav-toggle">
<span id="navpush">«</span>
<span id="navpull">»</span>
</div>
</div>
</aside>
<div class="container body-content">
<div id="section1">
<h2>Section 1 Title</h2>
<div>
<!-- Content -->
</div>
</div>
<div id="section2">
<h2>Section 2 Title</h2>
<div id="section2a">
<h3>Section 2A Title</h3>
<div>
<!-- Content -->
</div>
</div>
<div id="section2b">
<h3>Section 2B Title</h3>
<div>
<!-- Content -->
</div>
</div>
</div>
<div id="section3">
<h2>Section 2 Title</h2>
<div>
<!-- Content -->
</div>
</div>
</div>
</div>