高端網站設計制作分享-layui 響應式菜單

引用layui插件

<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>

HTML區域

 <div class="nav index">    
  <div class="layui-container">
       <!-- 公司logo -->      
       <div class="nav-logo">        
       <a href="index.html">          
       <img src="../res/static/img/logo.png" alt="網絡公司">        
       </a>      
       </div>      
       <div class="nav-list">        
       <button>          
       <span></span><span></span><span></span>        
       </button>        
       <ul class="layui-nav" lay-filter="">          
       <li class="layui-nav-item"><a href="product.html">產品</a></li>         
        <li class="layui-nav-item"><a href="news.html">動態</a></li>          
        <li class="layui-nav-item"><a href="case.html">案例</a></li>          
        <li class="layui-nav-item"><a href="about.html">關于</a></li>          
        <li class="layui-nav-item"><a href="https://www.17sucai.com/" target="_blank">模板</a></li>        
        </ul>      
        </div>    
   </div>  
 </div>

JS部分 新建 layuicommon.js寫入代碼

layui.define(['jquery', 'element', 'carousel', 'laypage'], function(exports){    
var $ = layui.jquery        
,element = layui.element        
,carousel = layui.carousel        
,laypage = layui.laypage;    //導航切換    
var btn = $('.nav').find('.nav-list').children('button')        
,spa = btn.children('span')        
,ul = $('.nav').find('.nav-list').children('.layui-nav');    
btn.on('click', function(){       
if(!$(spa[0]).hasClass('spa1')){            
spa[0].className = 'spa1';            
spa[1].style.display = 'none';            
spa[2].className = 'spa3';            
$('.nav')[0].style.height = 90 + ul[0].offsetHeight + 'px';        
}else{            
spa[0].className = '';            
spa[1].style.display = 'block';            
spa[2].className = '';            
$('.nav')[0].style.height = 80 + 'px';        
}    
});    
exports('layuicommon', {});});

html引用layuicommon.js文件

<script>    
layui.config({        
base: '{$temp_css}/static/js/'    
}).use('layuicommon');
</script>

css 部分

.nav{width: 100%; height: 80px; box-shadow: 0 3px 3px 0 #CCC; background: #FFF; position: fixed; left: 0; top: 0; z-index: 999; overflow: hidden; transition: 0.3s}
.nav.index{background: rgba(255, 255, 255 ,0.8); box-shadow: 0 0 0 0 rgba(0,0,0,0.05);}
.nav.scroll{ background: #FFF; box-shadow: 0 3px 3px 0 rgba(0,0,0,0.05); transition: 0.3s}
.nav .layui-container{position: relative; transition: all 400ms ease-out;}
.nav .nav-logo{height: 100%; position: absolute; top: 0; left: 15px; line-height: 80px;}
.nav .nav-list{display: inline-block; height: 80px;}
.nav .nav-list button{width: 25px; height: 30px; position: absolute; top: 30px; right: 15px; background-color: transparent; border: none; outline: none; cursor: pointer;}
.nav .nav-list button span{display: block; width: 25px; height: 2px; background: #2db5a3; margin-bottom: 6px; transition: 0.5s;}
.nav .nav-list button span.spa1{transform: rotate(45deg);}
.nav .nav-list button span.spa3{transform: rotate(-45deg) translate(5px,-5px);}
.nav .layui-nav{width: 100%; position: absolute; top: 80px; right: 0; color: #000; background: transparent;}
.nav .layui-nav .layui-nav-item{display: block; line-height: 60px;}.nav .layui-nav *{font-size: 18px;}
.nav .layui-nav .layui-nav-item a{padding: 0 0; color: #000;}
.nav .layui-nav-bar,.nav .layui-nav .layui-this:after{height: 2px; background-color: #2db5a3;}
.nav .layui-nav .layui-this a,.nav .layui-nav .layui-nav-item a:hover{color: #2db5a3;}
/*小屏幕*/
@media screen and (min-width: 768px){    
.nav{max-height: 80px;}    
.nav.index{background: rgba(255, 255, 255 ,0.3);}    
.nav .nav-list button{display: none;}    
.nav .layui-nav{width: auto; position: absolute; top: 0; padding: 0 5px; border-radius: 0; margin: 0;}    
.nav .layui-nav .layui-nav-item{display: inline-block; margin:0 25px; line-height: 80px;}
}