高端網(wǎng)站設(shè)計制作分享-layui 響應(yīng)式菜單
高端網(wǎng)站設(shè)計制作分享-layui 響應(yīng)式菜單
引用layui插件
<link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script>
HTML區(qū)域
<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="網(wǎng)絡(luò)公司"> </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">產(chǎn)品</a></li> <li class="layui-nav-item"><a href="news.html">動態(tài)</a></li> <li class="layui-nav-item"><a href="case.html">案例</a></li> <li class="layui-nav-item"><a href="about.html">關(guān)于</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; //導(dǎo)航切換 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;} }
[聲明]原創(chuàng)不易,請轉(zhuǎn)發(fā)者備注下文章來源(hbsjsd.cn)【速建時代】。