jquery實現左側選單淡入淡出
阿新 • • 發佈：2021-02-06
技術標籤：JavaScript前端
實現效果如圖
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的寫法，前端模板引擎，可以去掉使用相對路徑的方式引入靜態檔案