@Snowfall_Zh

SlideToggle шалит. Поможете?

Видео с проблемой. https://youtu.be/zjjBlISqxuA

SlideToggle открывается затем отскакивает назад и только затем встает на свое место. А при закрытии закрывается очень быстро закрыается. А затем, после закрытия, если не убирать мышку с области экрана, то, там образуются странные полоски. Причем каждый раз разные.

@media (max-width: 930px){
	.container{
		width: 748px;
	}

	.header{
		height: 50px;
		background-color: #fff;
		&__logo-img svg{
			height: 45px;
		}
		&__logo-text{
			font-size: 38px;
			color: #000;
		}

		&__logo-img svg{
			fill: #000;
		}
		&__menu{
			display: none;
			position: absolute;
			background-color: #fff;
			top: 	49px;
			right: 0;
			width: 100%;
			height: 350px;
			z-index: 11;
		}

		&__menu-li{
			margin-top: 18px;
			text-align: center;
		}
	
		&__menu-li:first-of-type{
			margin-left: 18px;
		}
		&__menu-a{
			color: #000;
		}

		&__menu-close{
			width: 100%;
			height: 100vh;
			z-index: 1;
			background-color: transparent;
			position: absolute;
		}

		&__burger-wrapper{
			height: 30px;
			width: 35px;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 20;
		}
	
		&__burger{
			display: block;
			width: 35px;
			height: 5px;
			background-color: #000;
			position: relative;
			transition: background-color 0.2s ease-in 0.2s;
		}
	
		&__burger::before{
			position: absolute;
			content: "";
			display: block;
			width: 35px;
			height: 5px;
			background-color: #000;
			left: 0;
			top: -10px;
			transition:  transform 0.2s ease-in, top 0.2s  linear 0.2s;
		}
		&__burger::after{
			position: absolute;
			content: "";
			display: block;
			width: 35px;
			height: 5px;
			background-color: #000;
			left: 0;
			bottom: -10px;
			transition:  transform 0.2s ease-in, top 0.2s  linear 0.2s;
		}
	
		&__burger.active{
			background-color: transparent;
			transition: background-color 0.2s ease-in 0.2s
		}
		&__burger.active::before{
			transform: rotate(-45deg);
			top: 0;
			transition: top 0.2s  linear, transform 0.2s ease-in 0.2s;
		}
		&__burger.active::after{
			transform: rotate(45deg);
			top: 0;
			transition: top 0.2s  linear, transform 0.2s ease-in 0.2s;
		}
	}
}


if (window.screen.width < 778) {

		$('.header__burger-wrapper').click(function () {
			$(".header__burger").toggleClass('active'),
				$(".header__menu").slideToggle(),
				$(".header__menu-close").slideToggle()
		})

		$('.header__menu-close').click(function () {
			$(".header__burger").toggleClass('active'),
				$(".header__menu").slideUp(),
				$(".header__menu-close").slideUp()
		})

		$('.header__menu-a').click(function () {
			$(".header__menu").slideUp(),
				$(".header__menu-close").slideUp(),
				$(".header__burger").toggleClass('active')
		})
	}
  • Вопрос задан
  • 110 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

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