新增 nav 垂直导航菜单展开和收缩时的过渡动画 (#1384)
* Create FUNDING.yml * 增加垂直导航菜单折叠动画 支持手风琴效果 * 优化 nav 手风琴相关代码 * 更新 nav 用例 * 新增 nav 菜单展开和收缩时的过渡动画 --------- Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>
This commit is contained in:
wefly2
GitHub
parent
81d1a06bb2
commit
5b7ddef2e2
1
.github/FUNDING.yml
vendored
Normal file
1
.github/FUNDING.yml
vendored
Normal file
@ -0,0 +1 @@
|
||||
open_collective: layui
|
||||
@ -6,12 +6,10 @@
|
||||
<title>导航 - 常用元素 - layui</title>
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
<style>
|
||||
body{padding: 16px;}
|
||||
.demo-nav-tree>.layui-inline{vertical-align: top;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<body class="layui-padding-3">
|
||||
|
||||
<ul class="layui-nav">
|
||||
<li class="layui-nav-item"><a href="">最新活动</a></li>
|
||||
@ -130,7 +128,7 @@
|
||||
<div class="demo-nav-tree">
|
||||
<div class="layui-inline">
|
||||
|
||||
<ul class="layui-nav layui-nav-tree" lay-filter="test">
|
||||
<ul class="layui-nav layui-nav-tree" lay-accordion lay-filter="test">
|
||||
<li class="layui-nav-item">
|
||||
<a class="" href="javascript:;">产品</a>
|
||||
<dl class="layui-nav-child">
|
||||
|
||||
@ -1274,6 +1274,7 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
|
||||
|
||||
.layui-nav .layui-nav-more{position: absolute; top: 0; right: 3px; left: auto !important; margin-top: 0; font-size: 12px; cursor: pointer; transition: all .2s; -webkit-transition: all .2s;}
|
||||
.layui-nav .layui-nav-mored,
|
||||
.layui-nav-expand > a .layui-nav-more,
|
||||
.layui-nav-itemed > a .layui-nav-more{transform: rotate(180deg);}
|
||||
|
||||
|
||||
@ -1306,16 +1307,17 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
|
||||
.layui-nav-itemed>a{color: #fff !important;}
|
||||
.layui-nav-tree .layui-nav-bar{background-color: #16baaa;}
|
||||
|
||||
.layui-nav-tree .layui-nav-child{position: relative; z-index: 0; top: 0; border: none; box-shadow: none;}
|
||||
.layui-nav-tree .layui-nav-child{position: relative; z-index: 0; top: 0; border: none; background-color: rgba(0,0,0,.3); box-shadow: none;}
|
||||
.layui-nav-tree .layui-nav-child dd{margin: 0;}
|
||||
.layui-nav-tree .layui-nav-child a{color: #fff; color: rgba(255,255,255,.7);}
|
||||
.layui-nav-tree .layui-nav-child a:hover,
|
||||
.layui-nav-tree .layui-nav-child{background: none; color: #fff;}
|
||||
.layui-nav-tree .layui-nav-child a:hover{background: none; color: #fff;}
|
||||
|
||||
.layui-nav-itemed>.layui-nav-child{display: block; background-color: rgba(0,0,0,.3) !important;}
|
||||
/* 垂直导航 - 展开状态 */
|
||||
.layui-nav-itemed>.layui-nav-child,
|
||||
.layui-nav-itemed>.layui-nav-child>.layui-this>.layui-nav-child{display: block;}
|
||||
|
||||
/* 侧边 */.layui-nav-side{position: fixed; top: 0; bottom: 0; left: 0; overflow-x: hidden; z-index: 999;}
|
||||
/* 垂直导航 - 侧边 */
|
||||
.layui-nav-side{position: fixed; top: 0; bottom: 0; left: 0; overflow-x: hidden; z-index: 999;}
|
||||
|
||||
/* 导航浅色背景 */
|
||||
.layui-nav.layui-bg-gray .layui-nav-item a,
|
||||
@ -1323,7 +1325,7 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
|
||||
.layui-nav-tree.layui-bg-gray{padding: 6px 0;}
|
||||
.layui-nav-tree.layui-bg-gray .layui-nav-itemed>a{color: #000 !important;}
|
||||
.layui-nav.layui-bg-gray .layui-this a{color: #16b777;}
|
||||
.layui-nav-tree.layui-bg-gray .layui-nav-itemed>.layui-nav-child{padding-left: 11px; background: none!important;}
|
||||
.layui-nav-tree.layui-bg-gray .layui-nav-child{padding-left: 11px; background: none;}
|
||||
.layui-nav-tree.layui-bg-gray .layui-nav-item>a{padding-top: 0; padding-bottom: 0;}
|
||||
.layui-nav-tree.layui-bg-gray .layui-nav-item>a .layui-nav-more{padding: 0;}
|
||||
.layui-nav-tree.layui-bg-gray .layui-this,
|
||||
|
||||
@ -272,14 +272,14 @@ layui.define('jquery', function(exports){
|
||||
)
|
||||
*/
|
||||
|
||||
//点击菜单 - a标签触发
|
||||
// 点击菜单 - a 标签触发
|
||||
,clickThis: function(){
|
||||
var othis = $(this)
|
||||
,parents = othis.parents(NAV_ELEM)
|
||||
,filter = parents.attr('lay-filter')
|
||||
,parent = othis.parent()
|
||||
,child = othis.siblings('.'+NAV_CHILD)
|
||||
,unselect = typeof parent.attr('lay-unselect') === 'string'; //是否禁用选中
|
||||
var othis = $(this);
|
||||
var parents = othis.parents(NAV_ELEM);
|
||||
var filter = parents.attr('lay-filter');
|
||||
var parent = othis.parent() ;
|
||||
var child = othis.siblings('.'+NAV_CHILD);
|
||||
var unselect = typeof parent.attr('lay-unselect') === 'string'; // 是否禁用选中
|
||||
|
||||
if(!(othis.attr('href') !== 'javascript:;' && othis.attr('target') === '_blank') && !unselect){
|
||||
if(!child[0]){
|
||||
@ -288,15 +288,27 @@ layui.define('jquery', function(exports){
|
||||
}
|
||||
}
|
||||
|
||||
//如果是垂直菜单
|
||||
// 若为垂直菜单
|
||||
if(parents.hasClass(NAV_TREE)){
|
||||
var NAV_ITEMED = NAV_ITEM + 'ed';
|
||||
var NAV_EXPAND = 'layui-nav-expand';
|
||||
var isNone = child.css('display') === 'none';
|
||||
|
||||
child.removeClass(NAV_ANIM);
|
||||
|
||||
//如果有子菜单，则展开
|
||||
// 若有子菜单，则展开
|
||||
if(child[0]){
|
||||
parent[child.css('display') === 'none' ? 'addClass': 'removeClass'](NAV_ITEM+'ed');
|
||||
if(parents.attr('lay-shrink') === 'all'){
|
||||
parent.siblings().removeClass(NAV_ITEM + 'ed');
|
||||
child.slideToggle(200, function() {
|
||||
isNone || parent.removeClass(NAV_ITEMED);
|
||||
});
|
||||
parent[isNone ? 'addClass': 'removeClass'](NAV_EXPAND);
|
||||
// 手风琴
|
||||
if(typeof parents.attr('lay-accordion') === 'string' || parents.attr('lay-shrink') === 'all'){
|
||||
// 收缩兄弟项
|
||||
parent.siblings().removeClass([
|
||||
NAV_ITEMED,
|
||||
NAV_EXPAND
|
||||
].join(' ')).children('.'+NAV_CHILD).slideUp(200);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -304,26 +316,16 @@ layui.define('jquery', function(exports){
|
||||
layui.event.call(this, MOD_NAME, 'nav('+ filter +')', othis);
|
||||
}
|
||||
|
||||
//点击子菜单选中
|
||||
/*
|
||||
,clickChild: function(){
|
||||
var othis = $(this), parents = othis.parents(NAV_ELEM)
|
||||
,filter = parents.attr('lay-filter');
|
||||
parents.find('.'+THIS).removeClass(THIS);
|
||||
othis.addClass(THIS);
|
||||
layui.event.call(this, MOD_NAME, 'nav('+ filter +')', othis);
|
||||
}
|
||||
*/
|
||||
|
||||
//折叠面板
|
||||
// 折叠面板
|
||||
,collapse: function(){
|
||||
var othis = $(this), icon = othis.find('.layui-colla-icon')
|
||||
,elemCont = othis.siblings('.layui-colla-content')
|
||||
,parents = othis.parents('.layui-collapse').eq(0)
|
||||
,filter = parents.attr('lay-filter')
|
||||
,isNone = elemCont.css('display') === 'none';
|
||||
var othis = $(this);
|
||||
var icon = othis.find('.layui-colla-icon');
|
||||
var elemCont = othis.siblings('.layui-colla-content');
|
||||
var parents = othis.parents('.layui-collapse').eq(0);
|
||||
var filter = parents.attr('lay-filter');
|
||||
var isNone = elemCont.css('display') === 'none';
|
||||
|
||||
//是否手风琴
|
||||
// 是否手风琴
|
||||
if(typeof parents.attr('lay-accordion') === 'string'){
|
||||
var show = parents.children('.layui-colla-item').children('.'+SHOW);
|
||||
show.siblings('.layui-colla-title').children('.layui-colla-icon').html('');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user