Responsive jquery mobile menu

by vi161

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<div class="main">
    <div class="header">
            <div class="slicknav-menu">
                <div class="slicknav-menu__but ">menu</div>
            </div>
            <div id="nav-menu" class="header-right__wrap">
                <div class="header-right">
                    <a href="app/" class="header__lnk header__lnk2 nav-item">app</a>
                    <a href="about/" class="header__lnk header__lnk1 nav-item">about</a>
                </div>
            </div>
    </div>
</div>

CSS

.slicknav-menu {
  display: none;
}

@media screen and (max-width: 768px) {
  #mob-menu {
    display: block;
  }
  #mob-menu {
    position: fixed;
    top: 0px;
  }
  .header {
    height: 58px;
    z-index: 100;
  }
  .header-wrap {
    height: 58px;
  }
  .header-left__txt {
    display: inline-block;
  }
  .slicknav-menu {
    display: flex;
  }
  .slicknav-menu__but {
    width: 30px;
    height: 20px;
  }
  .close {
  }

  .header__left {
    box-shadow: none;
    justify-content: flex-start;
  }
  .header__logo {
    padding-left: 25px;

  }
  .header-right__wrap {
    display: none;
  }
  .header-right {
    flex-direction: column;
    margin: 0;
    display: flex;
  }


}

JavaScript

$(document).ready(function(){
    var mibile_width = 768;

    $(window).resize(function(){
        $('.slicknav-menu__but').removeClass('close');
        if($(window).width() > mibile_width) {
            $('#nav-menu').removeClass('active');
            $('#nav-menu').css("display","flex")
        }else{
            $('#nav-menu').addClass('active');
            $('#nav-menu').css("display","none")
        };
    });
    $('.slicknav-menu__but').click(function(){
        $("#nav-menu").slideToggle("slow");
        $('.slicknav-menu__but').toggleClass('close');
    });
    $(document).mouseup(function (e){ // событие клика по веб-документу
        if($(window).width() < mibile_width) {
            var div = $("#nav-menu"); // тут указываем ID элемента
            var but = $(".slicknav-menu__but");

            if (!but.is(e.target) // если клик был не по нашему блоку
                && div.has(e.target).length === 0) { // и не по его дочерним элементам
                div.hide(); // скрываем его
                $('.slicknav-menu__but').removeClass('close');
            }
        }
    });
});/**
 * Created by V on 10.04.2018.
 */