1.页面
<div class="folder-box" [hidden]="isHidden" *ngIf="isAuthenticated()" id="mainfolder"> <!--如果不需要折叠菜单 直接给该处添加[hidden]="true"-->
<div class="folder-menu" [hidden]="hiddenMemu">
<div *ngFor="let secM of secMenuList,let firstIndex= index;">
<div class="first-class"
[ngClass]="{'this': firstIndex==firstClass}" (click)="showOrOpen(secM,firstIndex)">
<i>
<img src="../../../content/images/icon01.png"/>
</i>
<span>{{secM.label}}</span>
<i class="folder unfolder">
<img src="../../../content/images/icon03.png" *ngIf="secM.children.length"/>
</i>
</div>
<div class="submenu" *ngIf="secM.children.length" [hidden]="secM.showFlag" >
<div *ngFor="let thrM of secM.children,let secondIndex = index;">
<div class="second-class"
[ngClass]="{'this': secondIndex == secondClass}" (click)="openWin(thrM,secondIndex)">
<span>{{thrM.label}}</span>
</div>
</div>
</div>
</div>
</div>
<!--有三级级菜单-->
<!--只有二级菜单-->
<div class="show" [ngClass]="divStyle" (click)="hiddenMemuDiv()">
<img src="../../../content/images/icon06.png"/>
</div>
</div>
2.ts组件
import { Component, OnInit ,OnDestroy} from '@angular/core';
import { Router, ActivatedRouteSnapshot, NavigationEnd, RoutesRecognized } from '@angular/router';
import { EventManager, AlertService } from 'ng-jhipster';
import { Subscription } from 'rxjs/Rx';
import { Title } from '@angular/platform-browser';
import { Principal, StateStorageService } from '../../shared';
@Component({
selector: 'jhi-main',
templateUrl: './main.component.html',
styleUrls: [
'main.css'
]
})
export class JhiMainComponent implements OnInit, OnDestroy {
isHidden: boolean;
isSidebarCollapsed: boolean;
hiddenMemu: boolean = false;
divStyle:any;
eventSubscriber: Subscription;
secMenuList: any;
firstClass:number = 0;
secondClass:number = -1;
constructor(
private titleService: Title,
private router: Router,
private principal: Principal,
private $storageService: StateStorageService,
private eventManager: EventManager // 事件管理
) {
this.isHidden = true;
this.secMenuList = [];
}
private getPageTitle(routeSnapshot: ActivatedRouteSnapshot) {
let title: string = (routeSnapshot.data && routeSnapshot.data['pageTitle']) ? routeSnapshot.data['pageTitle'] : 'schintacloudApp';
if (routeSnapshot.firstChild) {
title = this.getPageTitle(routeSnapshot.firstChild) || title;
}
return title;
}
hiddenMemuDiv(){
if( this.hiddenMemu ==false){
this.hiddenMemu = true;
this.divStyle = "hide";
} else {
this.hiddenMemu = false;
this.divStyle = "show";
}
}
ngOnInit() {
this.eventSubscriber = this.eventManager.subscribe('menuChange', (response) => this.changeMenu(response));
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
this.titleService.setTitle(this.getPageTitle(this.router.routerState.snapshot.root));
}
if (event instanceof RoutesRecognized) {
let params = {};
let destinationData = {};
let destinationName = '';
let destinationEvent = event.state.root.firstChild.children[0];
if (destinationEvent !== undefined) {
params = destinationEvent.params;
destinationData = destinationEvent.data;
destinationName = destinationEvent.url[0] ? destinationEvent.url[0].path : '';
}
let from = {name: this.router.url.slice(1)};
let destination = {name: destinationName, data: destinationData};
this.$storageService.storeDestinationState(destination, params, from);
}
});
}
changeDetroy(event){
if(event && event !=null && event =='navbarNgOnDestroy') {
this.isHidden = true;
}
}
ngOnDestroy() {
this.eventManager.destroy(this.eventSubscriber);
}
isAuthenticated() {
return this.principal.isAuthenticated();
}
toggleSidebar() {
this.isSidebarCollapsed = !this.isSidebarCollapsed;
}
changeMenu(data) {
if (data.content) {
if (data.content.sign == '1') {
this.secMenuList = data.content.res;
this.showOrOpen(this.secMenuList[0]);
this.isHidden = false;
} else if (data.content.sign == '2') {
this.showOrOpen(data.content.res);
this.isHidden = true;
} else if (data.content.sign == '3') {
this.secMenuList = data.content.res;
this.isHidden = false;
} else if (data.content.sign == '4') {
this.isHidden = true;
}
} else {
this.router.navigate(['/']);
this.isHidden = true;
}
}
showOrOpen(secM,firstIndex?:any) {
if(firstIndex || firstIndex == 0) {
this.firstClass = firstIndex;
} else {
this.firstClass = 0;
}
if (secM && secM.children.length > 0) {
secM.showFlag = !secM.showFlag;
} else {
this.openWin(secM);
}
}
openWin(obj,secondIndex?:any) {
if(secondIndex || secondIndex == 0) {
this.firstClass = -1;
this.secondClass = secondIndex;
} else {
this.secondClass = -1;
}
if (obj.data) {
this.router.navigate(['/'+obj.data.menuIdPath]);
}
}
}
3.css文件
/* ==========================================================================
Main
========================================================================== */
.layout-sidebar{
width: 260px;
height: 100%;
position: fixed;
z-index: 102;
overflow-y: auto;
transition: margin-left .3s;
background: #4e5159;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#4e5159),color-stop(100%,#1f2023));
background: -webkit-linear-gradient(top,#4e5159,#1f2023);
background: linear-gradient(180deg,#4e5159 0,#1f2023);
}
.main-content{
/*margin-left: 260px;*/
/*padding-top: 50px;*/
transition: margin-left .3s;
/*padding-bottom: 40px;*/
padding: 0;
padding-right: 0rem;
}
.folder-box{
display: flex;
background: #4c545f;
flex-direction: column;
position: relative;
box-shadow: 0 0 10px #6d6d6d;
-webkit-box-shadow: 0 0 10px #6d6d6d;
-moz-box-shadow: 0 0 10px #6d6d6d;
-ms-box-shadow: 0 0 10px #6d6d6d;
-o-box-shadow: 0 0 10px #6d6d6d;
margin-right: 1rem;
}
.folder-menu{
display: flex;
flex-direction: column;
overflow-y: scroll;
width: 13rem;
}
.folder-menu::-webkit-scrollbar{
width: 6px;
height: 6px;
background-color: transparent;
}
/*定义滚动条的轨道，内阴影及圆角*/
.folder-menu::-webkit-scrollbar-track{
border-radius: 5px;
background-color: transparent;
}
/*定义滑块，内阴影及圆角*/
.folder-menu::-webkit-scrollbar-thumb{
/*width: 10px;*/
height: 10px;
border-radius: 5px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #4c545f;
}
.folder-menu .first-class{
display: flex;
width: 100%;
height: 3rem;
line-height: 3rem;
border-bottom: 1px solid #5F5D5D;
cursor: pointer;
}
.folder-menu .first-class:hover{
background: #6c737d;
}
.folder-menu .first-class.this{
background-image: url(../../../content/images/icon05.png);
background-position: right center;
background-repeat: no-repeat;
background-color: #6c737d;
}
.folder-menu .first-class i{
display: -webkit-box;
width: 3rem;
height: 3rem;
-webkit-box-pack: center;
justify-content: center;
}
.folder-menu .first-class i img{
height: 18px;
width: auto;
}
.folder-menu .first-class span{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -o-box;
display: box;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
-o-box-flex: 1;
box-flex: 1;
color: #fff;
/*font-weight: bold;*/
-webkit-box-align: center;
width: 7rem;
/*padding-left: 1rem;*/
}
.folder-menu .first-class i{
display: -webkit-box;
width: 3rem;
height: 3rem;
-webkit-box-pack: center;
justify-content: center;
}
.folder-menu .first-class i.folder{
width: 2rem;
}
.folder-menu .first-class i.folder img{
height: 10px;
width: auto;
}
.folder-menu .first-class i.unfolder img{
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
}
.folder-menu .submenu{
display: -webkit-box;
display: box;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
-moz-box-flex: 1;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
}
.folder-menu .submenu .second-class{
display: flex;
width: 100%;
height: 3rem;
line-height: 3rem;
margin-bottom: 1px;
/**/
cursor: pointer;
}
.folder-menu .submenu .second-class:hover{
background-color: #05C9D9;
}
.folder-menu .submenu .second-class.this{
background-image: url(../../../content/images/icon05.png);
background-position: right center;
background-repeat: no-repeat;
background-color: #6c737d;
}
.folder-menu .submenu .second-class span{
display: -webkit-box;
display: box;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
-moz-box-flex: 1;
color: #fff;
-webkit-box-align: center;
width: 100%;
padding-left: 4.5rem;
background: url(../../../content/images/icon04.png) 3rem center no-repeat;
}
.show{
display: -webkit-box;
position: absolute;
top: 50%;
left: 13rem;
width: 20px;
height: 40px;
background: #3F4752;
-webkit-box-align: center;
-ms-box-align: center;
-moz-box-align: center;
-o-box-align: center;
-webkit-box-pack: center;
-ms-box-pack: center;
-moz-box-pack: center;
-o-box-pack: center;
margin-top: -10px;
z-index: 99;
cursor: pointer;
-webkit-transform:rotate(180deg);
transform:rotate(180deg);
-moz-transform:rotate(180deg);
-o-transform:rotate(180deg);
-ms-transform:rotate(180deg);
}
.hide{
display: -webkit-box;
position: fixed;
top: 50%;
left: 0rem;
width: 20px;
height: 40px;
background: #3F4752;
-webkit-box-align: center;
-ms-box-align: center;
-moz-box-align: center;
-o-box-align: center;
-webkit-box-pack: center;
-ms-box-pack: center;
-moz-box-pack: center;
-o-box-pack: center;
margin-top: -10px;
z-index: 99;
cursor: pointer;
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
-ms-transform:rotate(0deg);
}
/*
.navbar{
position: fixed;
// left: 260px;
right: 0;
top: 0;
z-index: 102;
padding: 0;
height: 50px;
background: #0388e5;
transition: left .3s;
color: #fff;
padding: 9px 20px;
line-height: 1.15;
}*/
.navbar{
padding: 0;
display: initial !important;
}
:host >>> .footer {
border-top: 1px solid rgba(0,0,0,.125);
/*margin-left: 260px;*/
transition: margin-left .3s;
}
.sidebar-collapsed .layout-sidebar{
margin-left: -260px;
}
.sidebar-collapsed .main-content{
margin-left: 0;
}
.sidebar-collapsed .navbar{
left: 0;
}
:host >>> .sidebar-collapsed .footer{
margin-left: 0;
}