javascript Мобильноеменюсанимацией

Posted 2021-05-04

<header class="header">
	<div class="header__wrapper">

  <div class="logo">
		<a href="/"><img src="../img/logo.jpg" alt="Лого"></a>
	</div>

	<nav class="main-nav">
	  <ul>
	    <li><a href="#">Пункт 1</a></li>
	    <li><a href="#">Пункт 2</a></li>
	    <li><a href="#">Пункт 3</a></li>
	    <li><a href="#">Пункт 4</a></li>
	  </ul>
	</nav>

	<div class="header__contact">
		<a href="tel:[phone]" class="header__phone">[phone]</a>
		<a href="mailto:[e-mail]" class="header__email">[e-mail]</a>
	</div>

	<div class="burger-menu">
		<div class="burger-menu__wrapper">
				<div class="burger"></div>
				<span class="burger-menu-text">Меню</span>
		</div>
	</div>

	<nav class="mobile-nav">
	  <ul>
	     <li><a href="#">Пункт 1</a></li>
	     <li><a href="#">Пункт 2</a></li>
	     <li><a href="#">Пункт 3</a></li>
	     <li><a href="#">Пункт 4</a></li>
	  </ul>
	</nav>

	</div>
</header>

/* mobile menu */

.burger-menu
	position: relative
	margin-top: 15px
	z-index: 9999
	&__wrapper
    width: 45px
    height: 45px
    cursor: pointer
    margin-left: auto
    & .burger
      position: absolute
      background: $text-color
      width: 45px
      height: 5px
      top: 50%
      right: 0px
      margin-top: -5px
      opacity: 1
      transition: all 0.3s ease-in-out
      &::before
        position: absolute
        background: $text-color
        width: 45px
        height: 5px
        top: 15px
        content: ""
        display: block
      &::after
        position: absolute
        background: $text-color
        width: 45px
        height: 5px
        bottom: 15px
        content: ""
        display: block
        transition: all 0.3s ease-in-out
      &::before
        transition: all 0.3s ease-in-out
 
.burger-menu.menu-on .burger
  background: rgba(111, 111, 111, 0)
  &::after
    transform: rotate(-45deg)
    bottom: 0px
  &::before
    transform: rotate(45deg)
    top: 0px
 
.burger-menu-text
  display: block
  position: absolute
  left: 0
  font-size: 20px
  color: $text-color
  font-family: $default-title
  text-transform: uppercase
  top: 8px
  cursor: default
  transition: opacity 200ms ease-out, transform 200ms cubic-bezier(0.34, 0.55, 0.25, 0.83)
  &.is-open
    opacity: 0
    transform: translate3d(100px, 0, 0)
    
.main-nav
  display: none
    
.mobile-nav
	position: absolute
	top: 0
	left: 0
	right: 0
	margin: 0 auto
	height: 100%
	opacity: 0
	background-color: rgba(#fff, .9)
	transition: all .15s ease-in
	z-index: 99
	ul
		margin: 0
		padding: 0
		text-align: center
		padding-bottom: 25px
		li
			list-style-type: none
			padding-bottom: 20px
			a
				color: $text-color
				text-decoration: none
				font-family: $default-title
				font-size: 24px
				line-height: 1.2
				transition: all .15s ease-in
				text-transform: uppercase
	&.flex
		opacity: 1
		
// Блокируем срокл при открытом мобильном меню
.scroll-hidden
  overflow: hidden


@media #{$mobile-widths}
	.burger-menu
		flex-basis: 100%

@media #{$tablet-widths}
	.burger-menu
		position: relative
		margin-top: 0
		flex-basis: auto

	.burger-menu-text
		display: none

@media #{$notebook-widths}
	.burger-menu
		display: none
		
	.main-nav
		display: block


/* end mobile menu */

// new
$(".burger-menu").click(function () {
  $(".site-header__menu").toggleClass("site-header__menu--mobile");
  $(".burger-menu").toggleClass("menu-on");
  $("body").toggleClass("scroll-hidden");
  $(".burger-menu-text").toggleClass("is-open");
});


$(window).resize(function(){
var w = $(window).width();
menu  = $('.site-header__menu');
scroll  = $('.scroll-hidden');
burger = $('.burger-menu');
// if(w > 991 && menu.is(':hidden')) {
//   menu.removeAttr('style');
// }
if(w > 991 && menu.is('.site-header__menu--mobile')) {
  menu.removeClass('site-header__menu--mobile');
}
if(w > 991 && burger.is('.burger-menu')) {
  burger.removeClass('menu-on');
}
if(w > 991 && scroll.is('.scroll-hidden')) {
  scroll.removeClass('scroll-hidden');
}
});


// old
$(".burger-menu").click(function () {
    $(".mobile-nav").slideToggle(500, function () {
    });
    $(".mobile-nav").toggleClass("flex");
    $(".burger-menu").toggleClass("menu-on");
    $(".burger-menu-text").toggleClass("is-open");
  });
 
  $(window).resize(function(){
  var w = $(window).width();
  menu    = $('.mobile-nav');
  if(w > 991 && menu.is(':hidden')) {
    menu.removeAttr('style');
  }
});