Переходы флажков не работают должным образом
У меня проблема с переходами с моим флажком. Все, что я хочу сделать, это открыть выпадающее меню медленно при низком разрешении ширины.
Вот мой код:
HTML:
<nav class = "header-nav">
<input type = "checkbox" id = "header-nav-button">
<label for = "header-nav-button">☰</label>
</input>
<ul>
<li><a class = "header-nav-links" id = "active">Home</a></li>
<li><a class = "header-nav-links about-us">About Us</a></li>
<li><a class = "header-nav-links">Our Services</a></li>
<li><a class = "header-nav-links">Prices</a></li>
<li><a class = "header-nav-links">Contact</a></li>
</ul>
</nav>
Введите CSS:
input[type = "checkbox"] + label{
font-size: 40px;
cursor: pointer;
color: #ed145b;
font-family: Lato;
font-weight: 700;
line-height: 38px;
padding: 0 20px;}
input, label{
display: none;}
И мой код CSS, помещенный в @media (max-width: 600px):
label{
display: inline-block;
}
#header-nav-button{
}
#header-nav-button:not(:checked) ~ul{
display:none;
height: 0;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all 5s ease;
}
}
#header-nav-button:checked ~ ul{
display: block;
height: 200px;
}
#header-nav-button:checked ~ ul li{
display: block;
padding: 0 20px;
}
Я попробовал трюк с высотой, видимостью и непрозрачностью - к сожалению, у меня ничего не сработало. Кажется, что переход просто не работает должным образом.
Ответы 1
Вы не можете анимировать height.
Но вы МОЖЕТЕ оживить max-height.
<nav class = "header-nav">
<label for = "header-nav-button">☰</label>
<input type = "checkbox" id = "header-nav-button">
<ul>
<li><a class = "header-nav-links" id = "active">Home</a></li>
<li><a class = "header-nav-links about-us">About Us</a></li>
<li><a class = "header-nav-links">Our Services</a></li>
<li><a class = "header-nav-links">Prices</a></li>
<li><a class = "header-nav-links">Contact</a></li>
</ul>
</nav>
Я разместил метку над вводом, чтобы использовать более точный селектор + в CSS (#header-nav-button + ul)
label {
font-size: 40px;
cursor: pointer;
color: #ed145b;
font-family: Lato;
font-weight: 700;
line-height: 38px;
padding: 0 20px;
}
input,
label {
display: none;
}
@media ( max-width: 600px) {
label {
display: inline-block;
}
ul {
max-height: 0;
overflow: hidden;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
ul li {
padding: 0 20px;
}
#header-nav-button:checked+ul {
max-height: 999px;
}
}
Я удалил атрибуты display, потому что вы не можете анимировать отображение. Вместо этого я использовал overflow: hidden, чтобы скрыть меню.
И я заменил height на max-height. Хорошая вещь в этом заключается в том, что вам не нужно знать точную высоту меню, вы можете установить ее значение, которое, как вы знаете, никогда не достигнет. Таким образом, ваше меню может «расти» без необходимости каждый раз выяснять его высоту.
https://jsfiddle.net/w4fwbw3s/8/
Я также изменил селекторы внутри медиа-запроса. Не используйте #header-nav-button:not(:checked) ~ul, а просто используйте ul
Вы можете анимировать высоту - это сложнее сделать, так как вам нужно знать точную высоту
Извините моя ошибка. Получилось! Все, что мне нужно было добавить в ваш код, - это «width: 100%» для li, чтобы он отображался в виде блоков. Большое спасибо :)
Вы пробовали поиграть с продолжительностью перехода?