@havanaanavah

Как добавить overflow: hidden для body когда input:cheked?

Вот такой 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, и прокрутка была соответственно только в меню?
  • Вопрос задан
  • 62 просмотра
Решения вопроса 1
sniggering_deus
@sniggering_deus Куратор тега CSS
I will live forever in the flame of your eyes.
Такие задачи решаются с помощью JS ибо на одном только CSS такие задачи реализуются костылями.

Если в сети есть куча статей что с помощью CSS можно лепить вкладки, слайдеры, и прочее - это не значит что CSS является панацеей для каждой задачи. Не нужно путать инструменты для решения задач.

На JS это делается несколькими строками.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
sashabeep
@sashabeep
Дней без вопросов про Slick на тостере : 0
Если хочется без скриптов - почему не сделать меню 100% высоты и ширины, а крутить внутри его
Ответ написан
dimovich85
@dimovich85 Куратор тега CSS
Уроки по JS - https://t.me/school_ofpery
Только JS.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
04 июл. 2020, в 18:19
3500 руб./за проект
04 июл. 2020, в 17:51
20000 руб./за проект
04 июл. 2020, в 17:25
2000 руб./за проект