hhyykk/RuoYi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增菜单导航显示风格（default为左侧导航菜单，topnav为顶部导航菜单）

Browse Source
This commit is contained in:
RuoYi
2020-09-03 10:03:49 +08:00
parent 947120d136
commit bf1e52fd9d
14 changed files with 707 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
ruoyi-admin/src/main/resources/static/css/skins.css
View File

@ -4,6 +4,14 @@
* NAME - blue/green/purple/red/yellow
*
*/
.nav-tabs {
border-bottom: 0px;
}
.navbar .navbar-toolbar>li>a {
border: none !important;
}
/** 蓝色主题 skin-blue **/
.navbar, .skin-blue .navbar {
background-color: #3c8dbc
@ -93,7 +101,7 @@
background: #1a2226
}
.skin-blue .nav>li.active {
.skin-blue .nav:not(.navbar-toolbar)>li.active {
color: #fff;
background: #293846;
border-left: 3px solid #3c8dbc;
@ -103,6 +111,13 @@
border-left: none;
}
.skin-blue .dropdown-menu > .active > a, .skin-blue .dropdown-menu > .active > a:hover, .skin-blue .dropdown-menu > .active > a:focus {
color: #fff !important;
text-decoration: none;
outline: 0;
background-color: #3c8dbc;
}
.skin-blue .sidebar a {
color: #b8c7ce
}
@ -268,7 +283,7 @@
background: #1a2226;
}
.skin-green .nav>li.active {
.skin-green .nav:not(.navbar-toolbar)>li.active {
color: #fff;
background: #293846;
border-left: 3px solid #00a65a;
@ -278,6 +293,13 @@
border-left: none;
}
.skin-green .dropdown-menu > .active > a, .skin-green .dropdown-menu > .active > a:hover, .skin-green .dropdown-menu > .active > a:focus {
color: #fff !important;
text-decoration: none;
outline: 0;
background-color: #00a65a;
}
.skin-green .sidebar a {
color: #b8c7ce
}
@ -415,7 +437,7 @@
background: #1a2226
}
.skin-red .nav>li.active {
.skin-red .nav:not(.navbar-toolbar)>li.active {
color: #fff;
border-left: 3px solid #dd4b39;
background: #293846;
@ -425,6 +447,13 @@
border-left: none;
}
.skin-red .dropdown-menu > .active > a, .skin-red .dropdown-menu > .active > a:hover, .skin-red .dropdown-menu > .active > a:focus {
color: #fff !important;
text-decoration: none;
outline: 0;
background-color: #dd4b39;
}
.skin-red .content-tabs {
border-bottom: 1px solid #e5e5e5;
}
@ -566,7 +595,7 @@
background: #1a2226
}
.skin-yellow .nav>li.active {
.skin-yellow .nav:not(.navbar-toolbar)>li.active {
color: #fff;
background: #293846;
border-left: 3px solid #f39c12;
@ -576,6 +605,13 @@
border-left: none;
}
.skin-yellow .dropdown-menu > .active > a, .skin-yellow .dropdown-menu > .active > a:hover, .skin-yellow .dropdown-menu > .active > a:focus {
color: #fff !important;
text-decoration: none;
outline: 0;
background-color: #f39c12;
}
.skin-yellow .content-tabs {
border-bottom: 1px solid #e5e5e5;
}
@ -717,7 +753,7 @@
background: #1a2226
}
.skin-purple .nav>li.active {
.skin-purple .nav:not(.navbar-toolbar)>li.active {
color: #fff;
background: #293846;
border-left: 3px solid #605ca8;
@ -727,6 +763,13 @@
border-left: none;
}
.skin-purple .dropdown-menu > .active > a, .skin-purple .dropdown-menu > .active > a:hover, .skin-purple .dropdown-menu > .active > a:focus {
color: #fff !important;
text-decoration: none;
outline: 0;
background-color: #605ca8;
}
.skin-purple .content-tabs {
border-bottom: 1px solid #e5e5e5;
}
@ -790,7 +833,7 @@
color: #fff
}
.theme-dark .nav>li.active {
.theme-dark .nav:not(.navbar-toolbar)>li.active {
background: #293846;
}
@ -812,7 +855,7 @@
color: #555
}
.theme-light .nav>li.active{
.theme-light .nav:not(.navbar-toolbar)>li.active{
background: #f9fafc;
}
@ -903,7 +946,7 @@
color: #a3b1cc
}
.theme-blue .nav>li.active{
.theme-blue .nav:not(.navbar-toolbar)>li.active{
background-color: rgba(15,41,80,1);
}

8
ruoyi-admin/src/main/resources/static/css/style.css
View File

@ -46,7 +46,7 @@ a:focus {
/*white-space: nowrap;*/
}
.nav.navbar-right>li>a {
.nav.navbar-right>li>a, .nav.navbar-left>li>a {
color: #fff;
font-size: 14px;
height: 50px;
@ -57,7 +57,7 @@ a:focus {
color: #ffffff;
}
.nav.navbar-right>li>a>.label {
.nav.navbar-right>li>a>.label, .nav.navbar-left>li>a>.label {
position: absolute;
top: 9px;
right: 5px;
@ -66,7 +66,7 @@ a:focus {
padding: 2px 4px;
line-height: .9;
}
.nav.navbar-right>li>a:hover {
.nav.navbar-right>li>a:hover, .nav.navbar-left>li>a:hover {
background-color: #367fa9;
color: #fff;
}
@ -6873,7 +6873,7 @@ body.rtls .top-navigation .footer.fixed, body.rtls.top-navigation .footer.fixed
}
.navbar-header {
width: 10%;
/* width: 10%; */
height: 50px;
}

1
ruoyi-admin/src/main/resources/static/js/resize-tabs.js Normal file
View File

@ -0,0 +1 @@
(function(c,a,e){var b,d="resizeTabs",f={navSelector:".nav-tabs",itemSelector:">li",dropdownSelector:">.dropdown",dropdownItemSelector:"li",tabParentSelector:"",tabSelector:".tab-pane",activeClassName:"active",noNavClassName:".no-menu",fnCallback:""};b=function(j,i){var h=this.$tabs=e(j),k=this.options=e.extend(true,{},f,i),g=this.$nav=h.find(k.navSelector),l=this.$dropdown=g.find(k.dropdownSelector);this.$items=g.find(k.itemSelector).filter(function(){return !e(this).is(l)});this.$dropdownItems=l.find(k.dropdownItemSelector);if(k.tabParentSelector!==""){this.$tabPanel=e(k.tabParentSelector).find(k.tabSelector)}else{this.$tabPanel=h.find(k.tabSelector)}this.init()};b.prototype={init:function(){var j=this.itemsLenth=this.$items.length,h;if(j===0){throw"There should be some tags here "}if(this.$dropdown.length===0){this.flag=true;this.$nav.append('<li class="dropdown" role="presentation">'+'<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">'+'<i class="glyphicon glyphicon-align-justify"></i> <b class="caret"></b></a><ul class="dropdown-menu" role="menu"></ul></li>');this.$dropdown=this.$nav.find(this.options.dropdownSelector);this.$dropdown.css("opacity",0);h=this.$dropdown.width();h=h===0?90:h;this.$dropdown.addClass("hidden").css("opacity",1)}else{h=this.$dropdown.width()}this.breakpoints=[];for(var g=0;g<j+1;g++){var k=this.$items.eq(g).width(),l=0;switch(g){case 0:l=k+h;break;case j-1:l=this.breakpoints[g-1]+k-h;break;case j:l=this.breakpoints[g-1]+h;break;default:l=this.breakpoints[g-1]+k}this.breakpoints.push(l)}if(typeof this.options.fnCallback==="function"){this.options.fnCallback(this.$tabs)}this.bind();this.layout()},layout:function(){if(this.breakpoints.length<=0){return}var l=this.$tabs.width()-500,j=0,h=this,g=this.options.activeClassName,m=this.$tabPanel.filter("."+g).index(),k=function(p){var o=p;if(p===h.itemsLenth){o=p-1}for(;o<h.itemsLenth;o++){if(h.flag){h.$dropdown.find("ul").append(h.$items.eq(o).prop("outerHTML"))}else{h.$dropdown.find("ul>li"+h.options.noNavClassName+":first").before(h.$items.eq(o).prop("outerHTML"))}h.$items.eq(o).hide()}},n=function(p){for(var o=0;o<h.itemsLenth+1;o++){if(o<p){h.$items.eq(o).show()}else{k(p);h.$dropdown.find("ul>li").show();break}}h.$dropdownItems=h.$dropdown.find(h.options.dropdownItemSelector)};for(;j<this.breakpoints.length;j++){if(this.breakpoints[j]>l){break}}this.$items.removeClass(g);this.$dropdownItems.removeClass(g);this.$dropdown.removeClass(g);if(j===this.breakpoints.length){if(this.flag){this.$dropdown.addClass("hidden")}else{this.$dropdown.find("ul>li:not(li"+this.options.noNavClassName+")").remove()}this.$items.show();this.$items.eq(m).addClass(g)}else{this.$dropdown.removeClass("hidden");if(this.flag){this.$dropdown.find("ul>li").remove()}else{this.$dropdown.find("ul>li:not(li"+this.options.noNavClassName+")").remove()}n(j);if(m<j){this.$items.eq(m-1).addClass(g)}else{this.$dropdown.addClass(g);this.$dropdownItems.eq(m-j).addClass(g)}}},throttle:function(h,g){var k=h,j,i=true;return function(){var m=arguments,l=this;if(i){k.apply(l,m);i=false}if(j){return false}j=setInterval(function(){clearInterval(j);j=null;k.apply(l,m)},g||500)}},bind:function(){var g=this;e(c).resize(function(){g.throttle(function(){g.layout()},1000)()})}};e.fn[d]=function(g){if(typeof g==="string"){var i=g,h=Array.prototype.slice.call(arguments,1);if(/^_/.test(i)){console.error("No such method : "+g)}else{return this.each(function(){var j=e.data(this,d);if(j&&typeof j[i]==="function"){j[i].apply(j,h)}})}}else{return this.each(function(){if(!e.data(this,d)){e.data(this,d,new b(this,g))}else{e.data(this,d).init()}})}}})(window,document,jQuery);$("#navMenu").resizeTabs({tabParentSelector:"#side-menu"});

17
ruoyi-admin/src/main/resources/static/ruoyi/css/ry-ui.css
View File

@ -1056,6 +1056,23 @@ label {
visibility: visible;
}
/* 设置菜单样式 */
.menu-content {
padding: 10px 10px 10px 25px !important;
}
.tab-content > .tab-pane {
display: none;
}
.tab-content > .active {
display: block;
}
.height-full {
height: 100% !important;
}
/* 设置滚动条样式 */
::-webkit-scrollbar {
width:10px!important;

8
ruoyi-admin/src/main/resources/static/ruoyi/index.js
View File

@ -81,6 +81,13 @@ function syncMenuTab(dataId) {
$dataObj.parents("li").addClass("active").siblings().removeClass("active").find('li').removeClass("active");
$dataObj.parents("ul").css('height', 'auto').height();
$dataObj.click();
// 顶部菜单同步处理
var tabStr = $dataObj.parents(".tab-pane").attr("id");
if ($.common.isNotEmpty(tabStr)) {
var sepIndex = tabStr.lastIndexOf('_');
var menuId = tabStr.substring(sepIndex + 1, tabStr.length);
$("#tab_" + menuId + " a").click();
}
}
}
}
@ -256,6 +263,7 @@ $(function() {
var $dataObj = $('a[href$="' + decodeURI(dataUrl) + '"]');
if (!$dataObj.hasClass("noactive")) {
$('.tab-pane li').removeClass("active");
$('.nav ul').removeClass("in");
$dataObj.parents("ul").addClass("in")
$dataObj.parents("li").addClass("active").siblings().removeClass("active").find('li').removeClass("active");