Пытаюсь сделать многоуровневое меню, но не получается сделать плавное появления из-за display none:
Дело не в том как оформить меню, а в том как сделать плавную анимацию по клику:
<ul class="nav__menu">
<li class="nav__item">
<a href="" class="nav__link">Главная</a>
<span class="fa fa-caret-down></span>
<ul class="nav__submenu">
<li class="nav__item">
<a href="#" class="nav__link">Пункт 1</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">Пункт 2</a>
</li>
<li class="nav__item">
<a href="#" class="nav__link">Пункт 3</a>
</li>
</ul>
</li>
</ul>
css:
.parent .nav__submenu
{
display: none;
-webkit-transition: all 0.4s linear 0.4s;
transition: all 0.4s linear 0.4s;
}
.parent .nav__submenu.open
{
display: block;
/*visibility: visible;
opacity: 1;*/
}
js:
$(document).ready(function(){
let navItem = $('.nav__item');
addParentClass(navItem,'.nav__submenu');
$('.parent .fa-caret-down').click(function(){
$(this).next().toggleClass('open');
/*if($(this).next('open'))
{
$(this).next().slideDown('slow');
}
else
{
$(this).next().slidUp('fast');
}*/
});
});
function addParentClass(element,subClass)
{
/* Проверка есть ли элемент в документе */
if(element.length > 0)
{
/* Если да, запускаем цикл по элементам*/
let i;
for(i = 0; i < element.length; i++)
{
/* Ищем дочерей одного элемента */
if($(element[i]).children(subClass).length > 0)
{
let elementLink = $(element[i]).children('a');
$(element[i]).addClass('parent');
$(elementLink).after('<span class="fa fa-caret-down"></span>');
}
}
}
}
Пытался сделать через JQuery по клику на span.fa-caret-down
Может кто-нибудь подскажет или ссылку на пример скинет?
