基于UIKIT3的手机导航，全屏二级折叠

CSS代码：

.mobile_header{ background-color: #fff; }
.mobile_logo{ margin: 10px 0; }
.mobile-menu{ width: 54px; height: 54px; position: relative; display: block; background:none; border:none;}
.menu-i { height: 3px; right: 0px; position: absolute; border-radius: 1px; font-style: normal; 
    background-color: #333; 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: #000; }
.mobile-menu-on .menu-i-2{ opacity: 0; }
.mobile-menu-on .menu-i-3{ transform:translateY(-8px) rotate(-45deg); background-color: #000; }
.nav-open-noscroll {
    overflow: hidden!important;
    height: 100%;
}
.mobile-nav-model{ 
    background: #fff; 
    width: 100vw; 
    height: calc(100vh - 54px); 
    position: absolute;
    top: 54px;
    left: 0;
    display: none; 
    box-shadow: none!important;
    z-index: 1000;
    overflow-y: auto 
}
.mobile-nav-model .uk-close { color: #000; }
.m-body{  height: calc(100vh - 54px); padding-top: 54px; overflow-y: auto; background-color: #fff; }
.m-body .uk-nav-default { 
    padding-left: 0;
    transform: translateY(-30px);
}
.m-body .uk-nav-default > 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;
    border-bottom: #ddd 1px solid;
}
.m-body .uk-nav-default > li > a{
    padding: 15px 20px;
    font-size: 18px;
}
.mnav-li-visible{ opacity: 1!important; transform: translateY(0)!important;  }
.m-body .uk-nav-sub li a{
    padding: 10px 20px;
}
.m-body .uk-nav-sub{
    background-color: #f8f8f8;
}

HTML:

<!-- 手机导航 -->
    <div class="uk-hidden@m mobile_header" uk-sticky>
        <div class="uk-container">
          <div class="uk-flex-middle uk-grid-collapse" uk-grid>
            <div class="uk-width-expand">
                <a href="{$sys.url}" title="{$config.title}" class="mobile_logo"><img src="{$config.logo}" width="90" alt="{$config.title}"></a>
            </div>
            <div class="uk-width-auto">
                <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>
        </div>
    </div>
    <!-- 手机弹出的导航 -->
    <div class="mobile-nav-model m-sub-1">
        <div class="m-body">
            <div class="uk-container">
                <ul class="uk-nav-default uk-nav-parent-icon" uk-nav>
                    <!-- php:$list = menu("top") -->
                    <!-- loop from=$list key=$key value=$value id=$tmpid -->
                    <li {if $value.sublist} class="uk-parent"{/if}>
                        <a href="{$value.url}">{$value.title}</a>
                        <!-- if $value.sublist -->
                        <ul class="uk-nav-sub">
                            <!-- loop from=$value.sublist key=$k value=$v -->
                            <li><a href="{$v.url}">{$v.title}</a></li>
                            <!-- /loop -->
                        </ul>
                        <!-- /if -->
                    </li>
                    <!-- /loop -->
                </ul>
            </div>
        </div>
    </div>

JS:

<script>
        $(function(){
            // 手机导航缓动
            var s = 0.3;
            $(".m-sub-1 .uk-nav-default > li").each(function(){
                $(this).css({'transition-delay': (s+=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 .uk-nav-default > 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 .uk-nav-default > li").removeClass("mnav-li-visible");
                    i = 1;
                    //解除主体滚动
                    $("html,body").removeClass('nav-open-noscroll');
                }
            });
        })
    </script>