@nemovalex

Как сделать выпадающее многоуровневое меню jQuery?

Пытаюсь сделать многоуровневое меню, но не получается сделать плавное появления из-за display none:

5f479684212b5164713167.png

Дело не в том как оформить меню, а в том как сделать плавную анимацию по клику:

<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
Может кто-нибудь подскажет или ссылку на пример скинет?
  • Вопрос задан
  • 99 просмотров
Решения вопроса 1
daemonhk
@daemonhk
ПсиХоПат
Если что, спрашивайте - https://codepen.io/daemonhk/pen/RwaVZLg
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
SpiderPigAndCat
@SpiderPigAndCat
занимаюсь салообразованием
beetroot.dolgoter.site/#%F0%9F%8C%95%F0%9F%8C%95%F... вот тут видно как делается все. в основном css
/* работа с меню*/
    $(".main-menu-call").on("click", function (){ //в моб версии просто обработка по клику на кнопку чтоб показать меню

        $(this).toggleClass("main-menu-call_opened");
        $(".main-menu").toggleClass("main-menu_opened");
    });

    $(".has_submenu").on("click", function () {//клик на li у которого есть  подменю
        $(this).toggleClass("open-submenu");

    });
Ответ написан
@Keliorw
Ты можешь вместо display: none; использовать position: absolute; и задать значение top: -300; а когда наводишь на кнопку из которой должно выпадать меня меняешь top на 0
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
24 сент. 2020, в 09:09
2000 руб./за проект
24 сент. 2020, в 08:35
50000 руб./за проект
24 сент. 2020, в 08:23
10000 руб./за проект