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

Question

[YarikLtv4k]

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

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

Вот пример, как должно быть:
https://codepen.io/CodingPencil/pen/abEWzXp
Только не понимаю, как это применить к моей "верстке", помогите пожалуйста

Answer 1

[rifat2125]

Здравствуйте!
Вы можете посмотреть Рабочий пример

Дело в том, что если вы используете display: none/flex, плавной анимации не будет.
В примере выше, мы используем значение высоты (как и у вас), только добавляем самому меню overflow: hidden, чтобы скрыть содержимое.

Comments

[viva cristo64]

Да, так более понятно в отличие от моего примера)

[YarikLtv4k]

Спасибо!)

Answer 2

[viva cristo64]

Смотрите:
Лично я делаю так - для "гамбургера" и списка делаю див, объединяющий их двоих, потом, будем считать, что этот див будет назван .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, чтобы он активировался только вместе со списком)