Currently, I am working on a responsive website that includes a menu button for mobile devices. Upon clicking this button, users are able to scroll through the menu content. To address the scrolling issue, I have utilized overflow: hidden; and position: fixed;
However, a problem arises as the site unexpectedly shifts to the right and prevents scrolling back. Here is the excerpt of the source code:
<body>
<div id="header">
<div id="logo">
<a href=""><img src="images/logo.png" alt="logo"/></a>
</div>
<div class="menuToggle">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="nav">
<div class="aanmelden">
<a href="">Aanmelden</a>
</div>
<ul>
<li><a href="">Download app</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Over GYM2Go</a></li>
</ul>
</div>
</div>
</body>
Additionally, here is the JavaScript snippet:
$(window).ready(function() {
menuToggle();
});
var down = false;
function menuToggle() {
var i = 0;
$('.menuToggle').on('click', function(){
$('.menuToggle').toggleClass('active');
$('#nav').toggleClass('active');
$('body').toggleClass('active');
if (down) {
$('.lastItem').remove();
down = false;
} else {
$("ul").append('<li class="lastItem"><a href="">Aanmelden</a></li>');
down = true;
}
});
$('#nav > ul > li').on('click', function(e) {
$('#nav > ul > li.active').removeClass('active');
$(this).addClass('active');
var childUl = $(this).find('ul');
$('#nav > ul > li > ul').each(function() {
if (!childUl.is($(this))) {
$(this).hide();
}
});
if (childUl.length > 0 && childUl.css('display') == 'none') {
e.preventDefault();
childUl.toggle();
}
});
};
Lastly, the CSS styling used in the project:
body.active {
overflow: hidden;
position: fixed;
}
/* Menu */
@media screen and (max-width: 792px) {
.aanmelden {
display: none;
}
ul {
display: none;
}
.menuToggle {
display: block;
}
#nav {
margin: 0;
position: absolute;
top: 110px;
background: #e74a2b;
height: 100%;
width: 100%;
max-height: 0;
overflow: hidden;
-webkit-transition: width 0.3s; /* Safari */
transition:max-height 0.3s;
}
#nav.active {
max-height: calc(100% - 110px);
}
ul {
display: block;
z-index: 5;
position: relative;
width: 100%;
padding: 0;
margin: 0;
}
ul li {
float: left;
width: 100%;
border-bottom: 1px solid rgba(255,255,255,0.4);
}
ul li a:hover {
color: #2c2c2c;
}
ul li a {
float: left;
width: 100%;
color: white;
padding: 15px 20px;
}
}