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

Question

[carbanak01]

Здравствуйте !
Хочу реализовать такую анимацию появления блока меню, как на этом сайте shd.moscow при наведении на "Шашлыки".
Необходимо сделать это на чистом JS.
Буду сильно благодарен, если поможете решить!)

Comments

[Тарас Шульга]

Я конечно извиняюсь, а кому необходимо - заказчику?)

[carbanak01]

Тарас Шульга, мне интересно, как это можно сделать на чистом. Я не хочу использовать готовые решения на библиотеках

Answer 1

[Данил Шитов]

Есть много способов как это сделать, но такое не делают обычно на чистом 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>

Comments

[carbanak01]

Но тогда анимация, будет выглядеть по другому - меню будет изменять высоту, а мне надо чтобы при наведении изменялся opacity. Вы скажете наверно добавить opacity:0; при ховере 1, но там будет такой баг - меню скрыто, а ссылки всё равно работают. Поэтому я думаю, сделать так чтобы при завершении анимации добавлялся display:none, а при ховере display: block, но тогда анимация не работает

[Данил Шитов]

carbanak01, ну да, при display: none не будет анимация работать, скройте по другому, допустим тем же height: 0px; только не анимируйте его при наведении, анимируйте opacity

[carbanak01]

Данил Шитов, да, уже дошло до меня =) Спасибо за наводку, помогли)