优化侧栏导航菜单

This commit is contained in:
taoser 2021-05-16 15:39:22 +08:00
parent a877409c57
commit b53ad8ce08
4 changed files with 48 additions and 36 deletions

View File

@ -28,7 +28,7 @@ i{font-style: normal;}
.site-menu{position: fixed; top: 50px; bottom: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; z-index: 1000; left: -300px; background-color: #fff; transition: all .3s;}
.site-tree-mobile{display: block!important; position: fixed; z-index: 16666669; bottom: 15px; left: 15px; width: 50px; height: 50px; line-height: 50px; border-radius: 2px; text-align: center; background-color: #009688; color: #fff;}
.site-tree-mobile{display: block!important; position: fixed; z-index: 16666669; bottom: 15px; left: 15px; width: 30px; height: 30px; line-height: 30px; border-radius: 2px; text-align: center; background-color: #009688; color: #fff;}
.site-home .site-tree-mobile{display: none!important;}
.site-mobile .site-tree-mobile{display: none !important;}
.site-mobile .site-menu{left: 0;}
@ -720,10 +720,10 @@ body .fly-user-main{position: relative; min-height: 600px;}
body .fly-user-main{width: auto;}
.fly-user-main>.layui-nav{left: -300px; transition: all .3s; -webkit-transition: all .3s;}
.fly-user-main>.fly-panel-user{width: auto; margin-left: 0; transition: all .3s; -webkit-transition: all .3s;}
.site-tree-mobile{display: block!important; position: fixed; z-index: 100000; bottom: 20px; left: 10px; width: 50px; height: 50px; line-height: 50px; border-radius: 2px; text-align: center; background-color: rgba(0,0,0,.7); color: #fff;}
.site-mobile .site-tree-mobile{display: none !important;}
.site-tree-mobile-user{display: block!important; position: fixed; z-index: 100000; bottom: 20px; left: 10px; width: 50px; height: 50px; line-height: 50px; border-radius: 2px; text-align: center; background-color: rgba(0,0,0,.7); color: #fff;}
.site-mobile .site-tree-mobile-user{display: none !important;}
.site-mobile .fly-user-main>.layui-nav{left: 0;}
/*.site-mobile .site-mobile-shade{content: ''; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,.9); z-index: 999;}*/
.site-mobile .site-mobile-shade-user{content: ''; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,.9); z-index: 999;}
}
/*前台公用样式*/

View File

@ -805,6 +805,33 @@ layui.define(['layer', 'laytpl', 'form', 'element', 'upload', 'util'], function(
$('body').removeClass('site-mobile');
});
//导航窗口scroll
;!function(){
var main = $('.site-menu'), scroll = function(){
var stop = $(window).scrollTop();
if($(window).width() <= 992) return;
var bottom = $('.fly-footer').offset().top - $(window).height();
if(stop > 60){ //211
if(!main.hasClass('site-fix')){
main.addClass('site-fix').css({
width: main.parent().width()
});
}
}else {
if(main.hasClass('site-fix')){
main.removeClass('site-fix').css({
width: 'auto'
});
}
}
stop = null;
};
scroll();
$(window).on('scroll', scroll);
}();
//获取统计数据
$('.fly-handles').each(function(){
var othis = $(this);
@ -851,7 +878,7 @@ layui.define(['layer', 'laytpl', 'form', 'element', 'upload', 'util'], function(
});
});
//监听语音选择提交
//监听多语言切换
$('#language').on('change',function(){
var data = $(this).val();
$.post(langUrl,{language:data},function(res){
@ -875,33 +902,6 @@ layui.define(['layer', 'laytpl', 'form', 'element', 'upload', 'util'], function(
}
});
//窗口scroll
;!function(){
var main = $('.site-menu'), scroll = function(){
var stop = $(window).scrollTop();
if($(window).width() <= 992) return;
var bottom = $('.fly-footer').offset().top - $(window).height();
if(stop > 60){ //211
if(!main.hasClass('site-fix')){
main.addClass('site-fix').css({
width: main.parent().width()
});
}
}else {
if(main.hasClass('site-fix')){
main.removeClass('site-fix').css({
width: 'auto'
});
}
}
stop = null;
};
scroll();
$(window).on('scroll', scroll);
}();
exports('fly', fly);
});

View File

@ -296,6 +296,18 @@ layui.define(['laypage', 'fly', 'element', 'flow'], function(exports){
});
//手机设备的简单适配
var treeMobile = $('.site-tree-mobile-user')
,shadeMobile = $('.site-mobile-shade-user')
treeMobile.on('click', function(){
$('body').addClass('site-mobile');
});
shadeMobile.on('click', function(){
$('body').removeClass('site-mobile');
});
//我的消息
gather.minemsg = function(){
var delAll = $('#LAY_delallmsg')

View File

@ -31,12 +31,12 @@
</li>
</ul>
<div class="site-tree-mobile layui-hide">
<div class="site-tree-mobile-user layui-hide">
<i class="layui-icon">&#xe602;</i>
</div>
<div class="site-mobile-shade"></div>
<div class="site-mobile-shade-user"></div>
<div class="site-tree-mobile layui-hide">
<div class="site-tree-mobile-user layui-hide">
<i class="layui-icon">&#xe602;</i>
</div>
<div class="site-mobile-shade"></div>
<div class="site-mobile-shade-user"></div>