I recently implemented a menu on my responsive website that appears when the viewport is 714px width or less.
Upon clicking the button, a side-sliding menu emerges across the page. However, I'm facing an issue with setting the menu height to match the current viewport while preventing scrolling down.
For reference, here's what the current menu setup looks like: https://jsfiddle.net/baqcfjt1/1/
<div class="site-container-menu">
<div class="site-pusher">
<header class="header">
<a href="#" class="header__icon" id="header__icon">MENU</a>
<nav class="menu">
<a href="#one" class="scrolly">Link 1</a>
<a href="#three" class="scrolly"><strong>Link 2</strong></a>
<a href="#two" class="scrolly">Link 3</a>
<a href="#four">Link 4</a>
</nav>
</header>
<div class="site-content">
<div class="container-menu">
<section id="header">
<div class="headerlogo"><img src="image" /></div>
<div class="headerlogosmall"><img src="image" /></div>
</section>
<section class="main">
-content-
</section>
</div>
</div>
<div class="site-cache" id="site-cache"></div>
</div>
</div>
CSS
.header {
z-index: -10;
position: absolute;
}
/* RESPONSIVE */
@media only screen and (max-width: 714px) {
.container-menu {
overflow: hidden;
*zoom: 1;
}
/* HEADER */
.header__logo {
font: inherit;
font-weight: 700;
padding: 0 25px;
float: left;
}
/* MENU */
.site-pusher,
.site-container-menu {
height: 100%;
}
.site-container-menu {
overflow: hidden;
}
.site-pusher {
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
.site-content {}
.header {
position: static;
height: 66px;
line-height: 62px;
color: rgba(228, 91, 65, 1.00);
background-color: #fff;
}
.header__icon {
position: relative;
display: block;
float: left;
padding-left: 3em;
font: inherit;
font-weight: 400;
font-size: 20px;
height: 66px;
cursor: pointer;
}
.header__icon:after {
content: '';
position: absolute;
display: block;
width: 1rem;
height: 0;
top: 16px;
left: 15px;
box-shadow: 0 10px 0 1px rgba(228, 91, 65, 1.00), 0 16px 0 1px rgba(228, 91, 65, 1.00), 0 22px 0 1px rgba(228, 91, 65, 1.00);
}
.menu {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background-color: #fff;
/* overflow-y: scroll;
-webkit-overflow-scrolling: touch;*/
width: 250px;
-webkit-transform: translateX(-250px);
transform: translateX(-250px);
overflow: hidden;
}
.menu a {
display: block;
padding-top: 2em;
padding-bottom: 2em;
color: #666666;
height: 25%;
text-align: center;
line-height: 40px;
border-bottom: 1px solid #d9d9d9;
}
.menu a:hover {
color: #e45b41;
}
.with--sidebar .site-pusher {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
.with--sidebar .site-cache {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 9999;
}
}
$(document).ready(function() {
(function($) {
$('#header__icon').click(function(e) {
e.preventDefault();
$('body').toggleClass('with--sidebar');
});
$('#site-cache').click(function(e) {
$('body').removeClass('with--sidebar');
});
})(jQuery);
});