Задать вопрос
@YarikLtv4k

Плавное появление сверху ul списка (width, height = 100%)?

https://codepen.io/mymddboeyws-knowledgemd-com/pen...

При нажатии на гамбургер появляется резко ul список. Нужно сделать чтобы он появлялся плавно (transition: 1s) и главное, чтобы он появлялся сверху

Вот пример, как должно быть:
https://codepen.io/CodingPencil/pen/abEWzXp
Только не понимаю, как это применить к моей "верстке", помогите пожалуйста
  • Вопрос задан
  • 605 просмотров
Подписаться 1 Простой Комментировать
Решения вопроса 1
@rifat2125
Здравствуйте!
Вы можете посмотреть Рабочий пример

Дело в том, что если вы используете display: none/flex, плавной анимации не будет.
В примере выше, мы используем значение высоты (как и у вас), только добавляем самому меню overflow: hidden, чтобы скрыть содержимое.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
MaminProgrammist
@MaminProgrammist
Я слава беброу
Смотрите:
Лично я делаю так - для "гамбургера" и списка делаю див, объединяющий их двоих, потом, будем считать, что этот див будет назван .dropdown, создаем ему ширину с высотой и ставим в том месте где и гамбургер, пишем:
.mob-links {
    transform: scaleY(0);
    transform-origin: 0, 0;
    transform-duration: 1s;
}

.dropdown:hover .mob-links {
    transform: scaleY(1);
    transform-origin: 0, 0;
    transform-duration: 1s
}
(а потом прописываете анимацию для самого "гамбургера" через .dropdown:hover, чтобы он активировался только вместе со списком)
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы