Activist40 09.03.2023 15:01

Как настроить анимированный выпадающий список в CSS?

Здравствуйте! Я новичок в CSS и не знаю, как настроить анимированный выпадающий список. Я хочу создать меню с несколькими пунктами, которые при наведении на них будут плавно раскрываться с анимацией. Нужна помощь в написании CSS кода для реализации данной задачи.


.menu-wrapper {
    position: relative;
}

.menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.3s;
}

.menu-item:hover .menu {
    display: block;
    opacity: 1;
}

В коде выше я создаю контейнер .menu-wrapper, внутри которого находится список .menu. Список изначально скрыт с помощью display: none, а при наведении на пункт меню .menu-item, список плавно появляется с помощью свойства opacity и анимации transition.

Буду благодарна за помощь в настройке анимированного выпадающего списка в CSS!

Ответы:

viktoriya25GA 09.03.2023 15:23

Чтобы создать анимированный выпадающий список, тебе понадобится использовать CSS. Вот пример кода:


.menu-wrapper {
    position: relative;
}

.menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
    background-color: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.3s;
}

.menu-item:hover .menu {
    display: block;
    opacity: 1;
}

В данном коде мы создаем контейнер .menu-wrapper, внутри которого будет находиться список меню .menu. Изначально список скрыт с помощью свойства display: none, а при наведении на пункт меню .menu-item, список плавно появляется с помощью свойств opacity и transition.

Можешь применить этот код к своему проекту, заменив классы .menu-wrapper и .menu на свои собственные. Также, можешь настроить другие свойства, такие как ширина, цвет фона, тень и радиус углов, чтобы адаптировать стиль выпадающего списка под свои предпочтения.

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

Добавить ответ