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

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

* Create FUNDING.yml

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

支持手风琴效果

* 优化 nav 手风琴相关代码

* 更新 nav 用例

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

---------

Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>
pull/1391/head
wefly2 1 year ago 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
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      .github/FUNDING.yml
  2. 6
      examples/element.nav.html
  3. 14
      src/css/layui.css
  4. 62
      src/modules/element.js

1
.github/FUNDING.yml
Unescape View File

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

6
examples/element.nav.html
Unescape 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
Unescape 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
Unescape 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;');

Write Preview
Loading…
Cancel
Save