实现效果如图
html
<div class="left-nav">
<!-- 左部导航栏 -->
<div class="left-nav-title">
台区能源互联网
</div>
<div class="left-nav-line">
<img th:src="@{/assets/images/left-menu-line.png}">
</div>
<div class="menu-list">
<ul class="first-ul">
<li class="first-menu">
<a class="menu-a" href="javascript:;">
<img th:src="@{/assets/images/szgz.png}">
<span >数字感知</span>
<span class="menu-close" data-id="1"></span>
</a>
<ul>
<li class="second-menu" >
<a th:href="@{/home/dashboard}">
<img th:src="@{/assets/images/li-round.png}">
<span>电网感知</span>
</a>
</li>
<li class="second-menu">
<a th:href="@{/home/load}">
<img th:src="@{/assets/images/li-round.png}">
<span>负荷辨识</span>
</a>
</li>
<li class="second-menu">
<a th:href="@{/home/lineloss}">
<img th:src="@{/assets/images/li-round.png}">
<span>线损诊断</span>
</a>
</li>
</ul>
</li>
<li class="first-menu">
<a class="menu-a" href="javascript:;">
<img th:src="@{/assets/images/nyxt.png}">
<span>能源协同</span>
<span class="menu-close" data-id="2"></span>
</a>
<ul>
<li class="second-menu" >
<a th:href="@{/energy/monitor}">
<img th:src="@{/assets/images/li-round.png}">
<span>光伏发电监测</span>
</a>
</li>
<li class="second-menu">
<a th:href="@{/energy/adjust}">
<img th:src="@{/assets/images/li-round.png}">
<span>居民负荷调节</span>
</a>
</li>
<li class="second-menu">
<a th:href="@{/energy/index}">
<img th:src="@{/assets/images/li-round.png}">
<span>台区综合能源</span>
</a>
</li>
</ul>
</li>
<li class="first-menu">
<a class="menu-a" href="javascript:;">
<img th:src="@{/assets/images/sjfw.png}">
<span >数据服务</span>
<span class="menu-close" data-id="3"></span>
</a>
<ul>
<li class="second-menu">
<a th:href="@{/service/energy}">
<img th:src="@{/assets/images/li-round.png}">
<span>能效服务</span>
</a>
</li>
<li class="second-menu">
<a th:href="@{/service/safe}">
<img th:src="@{/assets/images/li-round.png}">
<span>安全服务</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
css
.left-nav{
width: 11.5%;
height: 94%;
padding-top: 40px;
/*opacity: 0.6;*/
position: relative;
background: url( /assets/images/left-img-1.png ) no-repeat; background-size: 100% 100%;
float: left;
}
.left-nav .one,.left-nav .two,.left-nav .three,.left-nav .four {
position: absolute;
width: 27px;
height: 27px;
}
.left-nav .one {
left: 0px;
top: 0;
border-top: 3px solid #02a5ff;
border-left: 3px solid #02a5ff;
margin: -1px 0 0 -1px;
border-radius: 7px;
}
.left-nav .two {
right: 0;
top: 0;
border-top: 3px solid #02a5ff;
border-right: 3px solid #02a5ff;
margin: -1px -1px 0 0;
border-radius: 7px;
}
.left-nav .three {
left: 0;
bottom: 0;
border-left: 3px solid #02a5ff;
border-bottom: 3px solid #02a5ff;
margin: 0 0 -1px -1px;
border-radius: 7px;
}
.left-nav .four {
right: 0;
bottom: 0;
border-right: 3px solid #02a5ff;
border-bottom: 3px solid #02a5ff;
margin: 0 -1px -1px 0;
border-radius: 7px;
}
.left-nav-title{
height: 60px;
font-family: SourceHanSansCN-Normal;
font-size: 30px;
font-weight: normal;
font-stretch: normal;
line-height: 36px;
letter-spacing: 0px;
color: #02a5ff;
text-align: center;
}
.left-nav-line{
text-align: center;
}
/**/
.menu-list{
height: 100%;
padding-top:20px;
font-size:18px;
}
.menu-list .first-ul{
list-style: none;
/*padding: 0px 80px;*/
font-size: 32px;
padding-left: 0px;
}
.first-menu li{
border-bottom: 1px solid;
}
.menu-list ul li{
color: rgb(28,157,255);
/*text-align: center;*/
list-style: none;
}
.menu-list ul li.first-menu{
overflow: hidden;
}
.menu-list ul li:hover>a{
color: rgb(28,157,255);
}
.menu-list ul li a{
display:block;
padding:16px 0;
color: rgb(28,157,255);
text-decoration:none;
}
.menu-list ul li.first-menu.active>a{
color: rgb(28,157,255);
vertical-align: middle;
}
.menu-list ul li.first-menu.active ul li.second-menu.current a{
/*background-color: rgb(10,165,207);*/
font-size: 18px;
color: #ffffff !important;
}
.menu-list ul li.first-menu ul{
display:none;
}
.menu-list ul li.first-menu ul li.second-menu a{
padding: 12px 0 12px 31px;
font-size:16px;
color: rgb(28,157,255);
}
.first-menu ul{
padding: 0;
}
.first-menu{
line-height: 100px;
}
.second-menu{
height: 80px;
line-height: 52px;
padding-left: 70px;
}
.menu-a{
text-align: center;
}
.menu-a img{
margin-right: 15px;
}
.menu-a-active{
background: rgb(8,33,102);
}
.menu-close:before{
margin-top: 1px;
margin-right: 5px;
display: inline;
font-size: 25px;
font-family: FontAwesome;
height: auto;
content: "\f0d9";
font-weight: 300;
margin-left: 15px;
text-shadow: none;
}
.menu-close.open:before{
margin-top: 1px;
margin-right: 5px;
display: inline;
font-size: 25px;
font-family: FontAwesome;
height: auto;
content: "\f0d7";
font-weight: 300;
margin-left: 15px;
text-shadow: none;
}
.second-menu a{
font-size: 30px !important;
}
.second-menu img{
margin-right: 20px;
width: 4%;
}
.current{
background: url(/assets/images/li-active.png) no-repeat; background-size: 100% 100%;
}
js
/*左侧菜单*/
$(".menu-list .first-menu").click(function(){
// $(this).addClass("active").siblings().removeClass("active");
$(this).find("ul").slideToggle(500);
// 打开关闭图标
var currentId = $(this).find(".menu-close").data("id");
$(".menu-close").each(function () {
var id = $(this).data("id");
if($(this).hasClass("open") && currentId != id){
$(this).removeClass("open");
$(this).parent().removeClass("menu-a-active");
}
})
if($(this).find(".menu-close").hasClass("open")){
$(this).find(".menu-close").removeClass("open");
$(this).find(".menu-a").removeClass("menu-a-active");
}else{
$(this).find(".menu-close").addClass("open");
$(this).find(".menu-a").addClass("menu-a-active");
}
$(this).siblings().find("ul").hide();
})
$(".menu-list .second-menu").click(function(){
selectMenu(this);
})
function selectMenu(that){
var $this = $(that);
$(".second-menu").each(function () {
if($(this).hasClass("current")){
$(this).removeClass("current");
}
})
$this.addClass("current").siblings().removeClass("current");
}
$(".menu-list .first-menu ul").bind("click",function(event){
event.stopPropagation();
});
$(function () {
$("#date-week").text(getWeekday());
$("#date-nl").text("农历" + getNongli());
var path = window.location.pathname;
$(".first-ul li a").each(function() {
console.log($(this).attr("href"))
if ($(this).attr("href") == path) {
$(this).parent().addClass('current');;
$(this).closest('ul').show();
$(this).closest('ul').prev().find('.menu-close').addClass('open');
}
});
})
注意 : th:href="@{/ 、 th:src="@{/ 属于thymeleaf的写法,前端模板引擎,可以去掉使用相对路径的方式引入静态文件