layui 响应式菜单

引用layui插件
```javascript
<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.js"></script>
```
HTML区域
```html
 <div class="nav index">
    <div class="layui-container">
      
      <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写入代码
```javascript
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文件
```javascript
<script>
    layui.config({
        base: '{$temp_css}/static/js/'
    }).use('layuicommon');
</script>
```
css 部分
```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;}

}
```

速建时代TPCMS管理系统

layui 响应式菜单