Question posted in 
I’ve made hamburger menu with sidebar list for mobile with some js. This is code:
<button class="hamburger">
<span class="hamburger__box">
<span class="hamburger__inner"></span>
</span>
</button>
<div class="navigation">
<ul class="navigation__list">
<a href="zatrudnij-programiste-webowego"><li class="navigation__item">O mnie</li></a>
<a href="zatrudnij-programiste-webowego"><li class="navigation__item">Oferta</li></a>
<a href="html-css-js-php-bootstrap-seo-wordpress"><li class="navigation__item">Technologie</li></a>
<a href="#"><li class="navigation__item 7" >Kontakt</li></a>
</ul>
</div>
There is js:
<script>
const hamburger = document.querySelector('.hamburger');
const nav = document.querySelector('.navigation');
const handleClick = () => {
hamburger.classList.toggle('hamburger--active');
nav.classList.toggle('navigation--active');
}
hamburger.addEventListener('click', handleClick);
</script>
And css (part of):
.hamburger
{
width:100%;
height: 72px;
margin-right: auto;
display: inline-block;
cursor: pointer;
background-color: transparent;
border:0;
}
.hamburger, .navigation
{
transition: transform .3s .1s ease-in-out;
}
.hamburger--active
{
transform: translateX(-120px);
}
.hamburger__box
{
width:100px;
height: 24px;
display: inline-block;
position:relative;
}
.hamburger__inner
{
width: 100%;
height: 10px;
background-color: #ff7300;
position:absolute;
left:0;
top:50%;
transform: translateY(-50%);
transition: background-color.1s .2s ease-in-out;
}
.hamburger__inner::before
{
content:'';
width: 100%;
height: 10px;
background-color: #000;
position:absolute;
left:0;
top:-20px;
transition: transform.2s .2s ease-in-out;
}
.hamburger__inner::after
{
content:'';
width: 100%;
height: 10px;
background-color: #000;
position:absolute;
left:0;
top:20px;
transition: transform.2s .2s ease-in-out;
}
.navigation
{
height:45vh;
font-size:25px;
width:200px;
background-color: #ff7300;
opacity: 0.9;
position: absolute;
top:0;
right:0;
transform: translateX(200px);
font-family: 'Raleway', sans-serif;
font-weight: 900;
}
.navigation--active
{
transform: translateX(0px);
}
.navigation__item
{
margin-top: 30px;
list-style: none;
}
.navigation__item
{
margin-bottom: 10px;
color:#fff;
a
{
text-decoration: none;
color: #000;
}
}
Idea is simple to move sidebar menu out of screen but then horizontal scroll is showing, I only test this in device mode in Firefox so i don’t know how it will looks like on my phone (but i suppose the scroll doesn’t disapear in magic way). I’ve also tried with display:none; for inactive list but this command doesn’t support animation. It’s possible to fix this idea or it is just wrong by design?
2
Answers
You can Use The overflow Property
This is to remove scroll horizontally at it to the body style sheet.
I recommend to use a sidebar with
position: fixed, especially for mobile views.So the position of the sidebar is not affected by the bodys scroll position:
The animation to show/hide the sidebar can be done with
leftproperty ortransform: translateX. Here is an example. Note that I saved thewidthof the sidebar using arootvariable.