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="" title="" class="mobile_logo"><img src="" width="90" alt=""></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> <li class="uk-parent"> <a href="#">解决方案</a> <ul class="uk-nav-sub"> <li><a href="">场馆</a></li> <li><a href="">学校</a></li> <li><a href="">会议</a></li> <li><a href="">商业</a></li> <li><a href="">影院</a></li> <li><a href="">文旅</a></li> </ul> </li> <li class="uk-parent"> <a href="#">解决方案</a> <ul class="uk-nav-sub"> <li><a href="">场馆</a></li> <li><a href="">学校</a></li> <li><a href="">会议</a></li> <li><a href="">商业</a></li> <li><a href="">影院</a></li> <li><a href="">文旅</a></li> </ul> </li> </ul> </div> </div> </div>
Javascript:
<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>