Как бы я стал плавно анимировать (только в CSS) элементы в раскрывающемся списке с подходом с скольжением?Html

Программисты Html
Ответить Пред. темаСлед. тема
Anonymous
 Как бы я стал плавно анимировать (только в CSS) элементы в раскрывающемся списке с подходом с скольжением?

Сообщение Anonymous »

(я все еще довольно новичок в HTML и CSS, так что со мной), я пытался настроить этот сайт, чтобы сделать его более приятным для глаз. Одна из вещей, которые я хотел бы сделать,-это настроить выпадающие меню под «просмотром» и «подчинить», чтобы, когда вы нажимаете над ними, они простираются вниз плавно, например, эффект скольжения. Я хочу анимировать как само раскрывающееся меню, так и текст внутри него вместе..dropdown-toggle {
min-height: fit-content;
min-width: fit-content;
max-height: fit-content;
max-width: fit-content;
}

.dropdown-menu {
block-size: fit-content;
width: 100px;
height: 200px;
transition: height 1s;
overflow: hidden;
}

.dropdown-menu:hover {
height: 300px;
block-size: fit-content;
overflow: hidden;
}

.nav-item dropdown {
width: 100px;
height: 100px;
transition: height 2s;
block-size: fit-content;
overflow: hidden;
}

.nav-item dropdown:hover {
height: 300px;
block-size: fit-content;
overflow: hidden;
}

.nav-link dropdown-toggle {
width: 100px;
height: 100px;
transition: height 1s;
overflow: hidden;
}

.nav-link dropdown-toggle:hover {
height: 300px;
}

.dropdown-item {
width: 30px;
height: 30px;
transition: height 1s;
position: sticky;
}

.dropdown-item:hover {
height: 50px;
}

.dropdown-menu show {
min-height: 0px;
min-width: 0px;
max-height: 300px;
max-width: 300px;
}

.dropdown-menu show:hover {
height: 50px;
}< /code>
< /code>
< /div>
< /div>
< /p>
Я пробовал пару вещей уже самостоятельно и применил это к моему CSS до сих пор: < /p>
Честно говоря, это просто куча попыток сделать его в первую очередь. Проблемы, которые я вижу, включают в себя раскрывающийся список, расширяющийся только при парке с самой коробкой, а не кнопкой «Отправить», блок позади текста, показывающий немедленно на паря, вместо того, чтобы выскользнуть из ничего, и неспособность сделать блок позади текста самостоятельно; Это выскакивает, независимо от того, что я делаю.>

Подробнее здесь: https://stackoverflow.com/questions/794 ... a-drop-dow
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «Html»