基于UIKIT的全屏居中带缓动手机导航

一款全屏居中手机导航，带缓动

HTML代码：

<div class="mobile_header uk-hidden@m">
            <a href="{$sys.url}" class="mlogo"><img src="{$config.logo}" width="120" alt=""></a>
            <a href="tel:{$config.copyright.tel}" class="tel_btn"><i uk-icon="icon:receiver; ratio:1.2"></i></a>
            <button class="mobile-menu uk-hidden@m">
                <i class="menu-i menu-i-1"></i>
                <i class="menu-i menu-i-2"></i>
                <i class="menu-i menu-i-3"></i>
            </button>
</div>
    <!-- 手机弹出的导航 -->
    <div class="mobile-nav-model m-sub-1">
        <div class="m-body uk-flex uk-flex-center uk-flex-middle">
            <div class="uk-container uk-text-center">
                <ul class="PingFangSC" id="mobile-nav-ul">
                    <!-- php:$list = phpok('mmenu') -->
                    <!-- loop from=$list.rslist key=$key value=$value id=$tmpid -->
                    <li><a href="{$value.url}">{$value.title}</a></li>
                    <!-- /loop -->
                </ul>
            </div>
        </div>
    </div>

JS代码：

<script>
        $(function(){
            // 手机导航缓动
            var s = 0.3;
            $(".m-sub-1 li").each(function(){
                $(this).css({'transition-delay': (s+=0.06)+'s'})
            });
            var ss = 0.3;
            $(".m-sub-2 li").each(function(){
                $(this).css({'transition-delay': (ss+=0.06)+'s'})
            });

            //手机导航
            var i = 1;
            $(".mobile-menu").on('touchstart',function(e){
                e.preventDefault();
                if (i == 1) {
                    $(this).addClass('mobile-menu-on');
                    $(".m-sub-1").stop().fadeIn();
                    $(".m-sub-1 li").addClass("mnav-li-visible");
                    i = 0;
                    //锁定主体滚动
                    $("html,body").addClass('nav-open-noscroll');
                }else{
                    $(this).removeClass('mobile-menu-on');
                    $(".m-sub-1").stop().fadeOut();
                    $(".m-sub-1 li").removeClass("mnav-li-visible");
                    i = 1;
                    //解除主体滚动
                    $("html,body").removeClass('nav-open-noscroll');
                }
            });
        })
    </script>

CSS代码：

/* 手机导航 */
.mobile_header {height: 54px; background-color: #ffc0ab;}
.mlogo{
    position: absolute;
    left: 15px;
    top: 10px;
}
.tel_btn{
    display: block;
    position: absolute;
    right: 55px;
    top: 0;
    background-color: #ff595a;
    color: #fff;
    z-index: 200;
    width: 54px;
    height: 54px;
    text-align: center;
}
.tel_btn i{
    margin-top: 15px;
}
.mobile-menu{position: absolute; right: 0; top: 0; background-color: #ff595a; width: 54px; height: 54px; display: block; border:none;}
.menu-i { height: 3px; right: 13px; position: absolute; border-radius: 1px; font-style: normal; background-color: #fff; display: block; transition: all 0.5s; }
.menu-i-1 { width: 25px; top: 18px; }
.menu-i-2 { width: 15px; top: 26px; }
.menu-i-3 { width: 25px; top: 34px; }
.mobile-menu-on { z-index: 1001; }
.mobile-menu-on .menu-i-1{ transform:translateY(8px) rotate(45deg); background-color: #fff; }
.mobile-menu-on .menu-i-2{ opacity: 0; }
.mobile-menu-on .menu-i-3{ transform:translateY(-8px) rotate(-45deg); background-color: #fff; }
.nav-open-noscroll {
    overflow: hidden!important;
    height: 100%;
}
.mobile-nav-model{ 
    background: #fff; 
    width: 100vw; 
    height: 100vh; 
    position: absolute;
    top: 0;
    left: 0;
    display: none; 
    box-shadow: none!important;
    z-index: 1000;
    overflow-y: auto 
}
.mobile-nav-model .uk-close { color: #fff; }
.m-body{  height: 100vh; overflow-y: auto; background-color: #1f272d; }
.m-body ul{ 
    padding-left: 0;
}
.m-body ul li{ 
    list-style: none; 
    transition: all; 
    opacity: 0;
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-transition: opacity 400ms ease,-webkit-transform 400ms ease;
    transition: opacity 400ms ease,-webkit-transform 400ms ease;
    -o-transition: transform 400ms ease,opacity 400ms ease;
    transition: transform 400ms ease,opacity 400ms ease;
    transition: transform 400ms ease,opacity 400ms ease,-webkit-transform 400ms ease;
}
.m-body ul li a{
    display: block; 
    color: #fff; 
    font-size: 20px;
    line-height: 48px;
    letter-spacing: 0.1em; 
    -webkit-tap-highlight-color: rgba(0,0,0,0);}
.m-body ul li a:hover{ 
    text-decoration: none; 
    color: rgba(0,0,0,.4);
}
.mnav-li-visible{ opacity: 1!important; transform: translateY(0)!important;  }