github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

新增 nav 垂直导航菜单展开和收缩时的过渡动画 (#1384) 

* Create FUNDING.yml

* 增加垂直导航菜单折叠动画

支持手风琴效果

* 优化 nav 手风琴相关代码

* 更新 nav 用例

* 新增 nav 菜单展开和收缩时的过渡动画

---------

Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>
pull/1391/head
wefly2 2023-10-07 09:02:35 +08:00 committed by GitHub
parent 81d1a06bb2
commit 5b7ddef2e2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 43 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.github/FUNDING.yml vendored Normal file
View File

@ -0,0 +1 @@
open_collective: layui

6
examples/element.nav.html
View File

@ -6,12 +6,10 @@
<title>导航 - 常用元素 - layui</title> <title>导航 - 常用元素 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css"> <link rel="stylesheet" href="../src/css/layui.css">
<style> <style>
body{padding: 16px;}
.demo-nav-tree>.layui-inline{vertical-align: top;} .demo-nav-tree>.layui-inline{vertical-align: top;}
</style> </style>
</head> </head>
<body> <body class="layui-padding-3">
<ul class="layui-nav"> <ul class="layui-nav">
<li class="layui-nav-item"><a href="">最新活动</a></li> <li class="layui-nav-item"><a href="">最新活动</a></li>
@ -130,7 +128,7 @@
<div class="demo-nav-tree"> <div class="demo-nav-tree">
<div class="layui-inline"> <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"> <li class="layui-nav-item">
<a class="" href="javascript:;">产品</a> <a class="" href="javascript:;">产品</a>
<dl class="layui-nav-child"> <dl class="layui-nav-child">

14
src/css/layui.css
View File

@ -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-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 .layui-nav-mored,
.layui-nav-expand > a .layui-nav-more,
.layui-nav-itemed > a .layui-nav-more{transform: rotate(180deg);} .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-itemed>a{color: #fff !important;}
.layui-nav-tree .layui-nav-bar{background-color: #16baaa;} .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 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{color: #fff; color: rgba(255,255,255,.7);}
.layui-nav-tree .layui-nav-child a:hover, .layui-nav-tree .layui-nav-child a:hover{background: none; color: #fff;}
.layui-nav-tree .layui-nav-child{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-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, .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{padding: 6px 0;}
.layui-nav-tree.layui-bg-gray .layui-nav-itemed>a{color: #000 !important;} .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.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{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-nav-item>a .layui-nav-more{padding: 0;}
.layui-nav-tree.layui-bg-gray .layui-this, .layui-nav-tree.layui-bg-gray .layui-this,

62
src/modules/element.js
View File

@ -272,14 +272,14 @@ layui.define('jquery', function(exports){
) )
*/ */
//点击菜单 - a标签触发 // 点击菜单 - a 标签触发
,clickThis: function(){ ,clickThis: function(){
var othis = $(this) var othis = $(this);
,parents = othis.parents(NAV_ELEM) var parents = othis.parents(NAV_ELEM);
,filter = parents.attr('lay-filter') var filter = parents.attr('lay-filter');
,parent = othis.parent() var parent = othis.parent() ;
,child = othis.siblings('.'+NAV_CHILD) var child = othis.siblings('.'+NAV_CHILD);
,unselect = typeof parent.attr('lay-unselect') === 'string'; //是否禁用选中 var unselect = typeof parent.attr('lay-unselect') === 'string'; // 是否禁用选中
if(!(othis.attr('href') !== 'javascript:;' && othis.attr('target') === '_blank') && !unselect){ if(!(othis.attr('href') !== 'javascript:;' && othis.attr('target') === '_blank') && !unselect){
if(!child[0]){ if(!child[0]){
@ -288,15 +288,27 @@ layui.define('jquery', function(exports){
} }
} }
//如果是垂直菜单 // 若为垂直菜单
if(parents.hasClass(NAV_TREE)){ 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); child.removeClass(NAV_ANIM);
//如果有子菜单，则展开 // 若有子菜单，则展开
if(child[0]){ if(child[0]){
parent[child.css('display') === 'none' ? 'addClass': 'removeClass'](NAV_ITEM+'ed'); child.slideToggle(200, function() {
if(parents.attr('lay-shrink') === 'all'){ isNone || parent.removeClass(NAV_ITEMED);
parent.siblings().removeClass(NAV_ITEM + 'ed'); });
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); 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(){ ,collapse: function(){
var othis = $(this), icon = othis.find('.layui-colla-icon') var othis = $(this);
,elemCont = othis.siblings('.layui-colla-content') var icon = othis.find('.layui-colla-icon');
,parents = othis.parents('.layui-collapse').eq(0) var elemCont = othis.siblings('.layui-colla-content');
,filter = parents.attr('lay-filter') var parents = othis.parents('.layui-collapse').eq(0);
,isNone = elemCont.css('display') === 'none'; var filter = parents.attr('lay-filter');
var isNone = elemCont.css('display') === 'none';
//是否手风琴 // 是否手风琴
if(typeof parents.attr('lay-accordion') === 'string'){ if(typeof parents.attr('lay-accordion') === 'string'){
var show = parents.children('.layui-colla-item').children('.'+SHOW); var show = parents.children('.layui-colla-item').children('.'+SHOW);
show.siblings('.layui-colla-title').children('.layui-colla-icon').html('&#xe602;'); show.siblings('.layui-colla-title').children('.layui-colla-icon').html('&#xe602;');