常见问题常见问题

当前位置:

高端网站设计制作分享-layui 响应式菜单

浏览量:198次

高端网站设计制作分享-layui 响应式菜单

引用layui插件


HTML区域

     
  
             
               
                 
               
             
       
                                                                产品                  动态                   案例                   关于                   模板                                
        
    

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文件

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;}
}


[声明]原创不易,请转发者备注下文章来源(hbsjsd.cn)【速建时代】。

速建时代高端网站定制开发回到顶部
站内SEO关键词搜索