У меня есть гамбургер-меню, которое открывается слева. Мне мешает скролл заднего фона. Я хочу его отключить при открытии гамбургер-меню.
Для этого я хочу, когда гамбургер-меню открыто, для body применить overflow: hidden, height: 100vh. При закрытом меню этих свойств не должно быть.
Вот мое меню:
* {
margin: 0;
padding: 0;
}
body {
margin: 0 auto;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
max-width: 1400px;
width: 100%;
overflow-x: hidden;
}
li {
list-style-type: none;
}
/*Menu-First block*/
header {
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
font-weight: 600;
font-size: calc(1rem + 0.28vw);
}
a {
text-decoration: none;
color: #000;
}
/*for desktop*/
.menu {
padding: 3.57vw 20px;
display: flex;
align-items: baseline;
}
.list_menu li {
display: inline-block;
margin-right: 2.8vw;
}
.list_menu li a:hover {
text-decoration: underline;
}
.logo {
display: inline-block;
font-weight: 700;
font-size: calc(1rem + 0.6vw);
margin-right: 24vw;
cursor: pointer;
}
.search_logo {
cursor: pointer;
}
/*for mobile*/
.menu_for_mobile {
display: flex;
align-items: center;
position: relative;
width: 100%;
padding: 3vw 20px;
display: none;
}
.menu_block {
padding-top: 100px;
padding-bottom: 30px;
top: 0;
z-index: 10;
text-align: center;
left: -100%;
line-height: 2.5;
text-decoration: underline;
position: absolute;
transition: .5s;
height: 100vh;
box-sizing: border-box;
width: 50%;
background: #00897b;
overflow-y: scroll;
}
.menu_block::-webkit-scrollbar {
width: 5px;
}
.menu_block::-webkit-scrollbar-track {
background: transparent;
}
.menu_block::-webkit-scrollbar-thumb {
background: linear-gradient(0deg, rgba(0,199,179,1) 0%, rgba(255,255,255,1) 100%);
border-radius: 10px;
}
.menu_block li > a {
color: #fff;
text-transform: uppercase;
}
.menu_for_mobile span {
position: absolute;
z-index: 20;
width: 100%;
min-width: 57px;
height: 4px;
background: #000;
display: block;
left: 0;
transition: .2s;
}
input:checked ~ .shadow {
left: 0;
}
.shadow {
transition: .001s;
position: absolute;
z-index: 5;
top: 0;
left: -100%;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, .5);
filter: blur(1px);
}
input#on {
display: none;
}
input:checked ~ .menu_block {
left: 0;
}
.menu_for_mobile span:nth-child(1) {
top: 0px;
}
.menu_for_mobile span:nth-child(2) {
top: 50%;
}
.menu_for_mobile span:nth-child(3) {
top: 100%;
}
.menu_for_mobile > label {
width: 6vw;
min-width: 57px;
height: 35px;
position: relative;
display: block;
}
input#on:checked ~ label > span:nth-child(1) {
top: 50%;
background: #fff;
transform: rotate(45deg);
}
input#on:checked ~ label > span:nth-child(2) {
background: transparent;
}
input#on:checked ~ label > span:nth-child(3) {
transform: rotate(-45deg);
top: 50%;
background: #fff;
}
.content_block {
font-size: 30px;
text-indent: 30px;
}
@media screen and (max-width: 1050px) {
.menu {
display: none;
}
.menu_for_mobile {
display: flex;
}
header {
display: flex;
justify-content: flex-end;
align-items: center;
}
}
<header>
<!--For desktop-->
<div class="menu">
<div class="logo">Your Logo</div>
<ul class="list_menu">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Servicing</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact us</a></li>
</ul>
<div class="search_logo">
<i class="fas fa-search"></i>
</div>
</div>
<!--For mobile-->
<div class="menu_for_mobile">
<input type="checkbox" id="on">
<label for="on">
<span></span>
<span></span>
<span></span>
</label>
<div class="shadow"></div>
<div class="menu_block">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Servicing</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact us</a></li>
</ul>
</div>
</div>
</header>
<div class="content_block">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad vel facilis dolorum, ratione blanditiis error, deserunt placeat officiis, voluptas sequi accusamus nihil quae! Debitis maiores nisi impedit velit odit nam.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad vel facilis dolorum, ratione blanditiis error, deserunt placeat officiis, voluptas sequi accusamus nihil quae! Debitis maiores nisi impedit velit odit nam.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad vel facilis dolorum, ratione blanditiis error, deserunt placeat officiis, voluptas sequi accusamus nihil quae! Debitis maiores nisi impedit velit odit nam.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad vel facilis dolorum, ratione blanditiis error, deserunt placeat officiis, voluptas sequi accusamus nihil quae! Debitis maiores nisi impedit velit odit nam.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad vel facilis dolorum, ratione blanditiis error, deserunt placeat officiis, voluptas sequi accusamus nihil quae! Debitis maiores nisi impedit velit odit nam.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad vel facilis dolorum, ratione blanditiis error, deserunt placeat officiis, voluptas sequi accusamus nihil quae! Debitis maiores nisi impedit velit odit nam.</p>
</div>
С помощью CSS я тоже сделать этого не могу, потому что CSS - это каскадная таблица стилей и мы можем применять стили только "сверху вниз". А т.к. в body вложен input, то... Возникает вопрос: как это сделать с помощью js (не на JQuery, потому что я сейчас учу именно js)? Какие события применять (mousedown/mouseon работают не совсем так, как мне нужно)?