Вот такой CSS
input, ul.hamburger {
display: none;
}
label {
position: relative;
display: block;
cursor: pointer;
}
input:checked ~ ul.hamburger {
display: block;
}
.burger {
position: fixed;
top:0;
left:0;
}
.fullscreen {
position: fixed;
background: #fff;
width: 100vw;
height: 100vh;
}
Вот такой HTML
<input id="menu" type="checkbox" name="menu" />
<label class="burger" for="menu">иконка</label>
<ul class="fullscreen">
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
<li>Ссылка</li>
</ul>
Так реализована полноэкранная навигация. Нажимаешь на иконку - появляется меню.
Ссылок много, есть прокрутка. Как сделать, чтобы при клике на иконку добавилось overflow: hшdden для body, и прокрутка была соответственно только в меню?