@carbanak01

Как сделать плавное появление блока при наведении на другой блок?

Здравствуйте !
Хочу реализовать такую анимацию появления блока меню, как на этом сайте shd.moscow при наведении на "Шашлыки".
Необходимо сделать это на чистом JS.
Буду сильно благодарен, если поможете решить!)
  • Вопрос задан
  • 719 просмотров
Решения вопроса 1
@daniilshitov
Node js разработчик
Есть много способов как это сделать, но такое не делают обычно на чистом js, это пишут на css.
Можно в пункт меню добавить блок который вы хотите показывать, назовем его ".block" сделать ему допустим высоту 0, и при наведение делать ему его нормальную высоту через ховер - li:hover .block{height: 100px;}(так например). Чтобы было с анимацией добавим свойство .block transition: height 1s; и тем самым высота будет анимироваться. Держи код для примера))
ul{
			display: flex;
		}
		li{
			cursor: pointer;
		}
		li:hover .block{
			height: 100px;
		}
		.block{
			background: black;
			width:100px;
			height: 0px;
			transition: height 1s;
		}
	</style>
	<ul>
		<li>
			<p href="">шашлыки</>
			<div class="block">	</div>
		</li>
		<li><p href="">шашлыки</></li>
	</ul>
</body>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы