jquery實現(xiàn)網(wǎng)頁左側(cè)導(dǎo)航菜單欄
更新時間：2022年07月28日 10:49:26 作者：我本良人
這篇文章主要為大家詳細(xì)介紹了jquery實現(xiàn)網(wǎng)頁左側(cè)導(dǎo)航菜單欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了jquery實現(xiàn)網(wǎng)頁左側(cè)導(dǎo)航菜單欄的具體代碼，供大家參考，具體內(nèi)容如下
1.首先在<head></head>之間添加
<script type="text/javascript" src="js/menu.js"></script> <link href="css/menu.css" rel="stylesheet" type="text/css" />
2.然后，在<body></body>之中寫入如下代碼（根據(jù)您的實際情況修改）
<div class="box"> ? ? ?<h2></h2> ? ? ?<ul class="menu"> ? ? ? <li class="level1"><a href="#none">車輛信息管理</a> ? ? ? ? ?<ul class="level2"> ? ? ? ? ? ? ? <li><a href="CarManagement.aspx" target="CarFrame1">車輛管理</a></li> ? ? ? ? ? ? ? <li><a href="VehicleUsingRecord.aspx" target="CarFrame1">使用記錄</a></li> ? ? ? ? ? ? ? <li><a href="MaintenanceRecord.aspx" target="CarFrame1">維護記錄</a></li> ? ? ? ? ? </ul> ? ? ? ? ? ?</li> ? ? ? ? <li class="level1"><a href="CarApply.aspx" target="CarFrame1">用車申請</a></li> ? ? ? ? <li class="level1"><a href="UseApplyManagement.aspx" target="CarFrame1">申請審批</a></li> ? ? ? ? <li class="level1"><a href="#">審批結(jié)果</a> ? ? ? ? ? <ul class="level2"> ? ? ? ? ? ? ? ?<li><a href="HasBeenApproved.aspx" target="CarFrame1">已批準(zhǔn)的申請</a></li> ? ? ? ? ? ? ? ?<li><a href="WaitingForApproval.aspx" target="CarFrame1">待批準(zhǔn)的申請</a></li> ? ? ? ? ? ? ? ?<li><a href="NotBeApproved.aspx" target="CarFrame1">未通過的申請</a></li> ? ? ? ? ? ? ? ?<li><a href="UnderMaintenance.aspx" target="CarFrame1">維護中的車輛</a></li> ? ? ? ? ? ?</ul> ? ? ? ? ? ? ? ?</li> ? ? ? ? ? ? ? ?<li class="level1"><a href="../Homepage.aspx">返回OA主頁</a></li> ? ? ? ? ? ? ? ?<li class="level1"><a href="../Login.aspx">退出OA系統(tǒng)</a></li> ? ? ? ? ? ? </ul> ?</div>
3.最后就是.js和.css文件了
menu.js文件代碼如下：
function getElementsByClassName(searchClass, node,tag){ ?
?? ?if(document.getElementsByClassName){return ?document.getElementsByClassName(searchClass)}
?? ?else{ ? ? ? ?
?? ??? ?node = node || document; ? ? ? ?
?? ??? ?tag = tag || "*"; ? ? ? ?
?? ??? ?var classes = searchClass.split(" "), ? ? ? ?
?? ??? ?elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag), ? ? ? ?
?? ??? ?patterns = [], ? ? ? ??
?? ??? ?returnElements = [], ? ? ? ?
?? ??? ?current, ? ? ? ??
?? ??? ?match; ? ? ? ?
?? ??? ?var i = classes.length; ? ? ??
?? ??? ?while(--i >= 0){patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));} ? ? ? ?
?? ??? ?var j = elements.length; ? ? ??
?? ??? ?while(--j >= 0){ ? ? ? ? ? ?
?? ??? ??? ?current = elements[j]; ? ? ? ? ??
?? ??? ??? ?match = false; ? ? ? ? ? ?
?? ??? ??? ?for(var k=0, kl=patterns.length; k<kl; k++){ ? ? ? ? ? ? ? ?
?? ??? ??? ??? ?match = patterns[k].test(current.className); ? ? ? ? ? ? ? ?
?? ??? ??? ??? ?if (!match) ?break; ? ? ? ? ??
?? ??? ??? ?}?
?? ??? ??? ?if (match) ?returnElements.push(current); ? ? ? ?
?? ??? ?} ? ? ? ?
?? ??? ?return returnElements; ??
?? ?}?
}
?
/*通用加載函數(shù)，頁面中如果要用到onload函數(shù)在窗體一加載時就執(zhí)行的代碼，可以直接添加到這個函數(shù)，否則會引起多個onload函數(shù)的執(zhí)行沖突
? 帶參數(shù)的調(diào)用方法：addLoadEvent(new Function("refurFrame('單詞管理');"));
*/
function addLoadEvent(func){
?? ?var oldοnlοad=window.onload;
?? ?if(typeof window.onload!='function'){
?? ??? ?window.οnlοad=func;?? ?
?? ?}
?? ?else{
?? ??? ?window.οnlοad=function(){
?? ??? ??? ?oldonload();
?? ??? ??? ?func();
?? ??? ?}?? ?
?? ?}
}
?
/*判斷是否有className的函數(shù)，調(diào)用例子為：o.className=o.addClass(o,"normal");*/
function hasClass(element, className) { ?
?? ?var reg = new RegExp('(\\s|^)'+className+'(\\s|$)'); ? ??
?? ?return element.className.match(reg);?
}?
/*動態(tài)添加className的函數(shù)，調(diào)用例子為：addClass(document.getElementById("test"), "test");*/
function addClass(element, className) { ?
?? ?if (!this.hasClass(element, className)){ ??
?? ??? ?element.className += " "+className;/*如果有多個樣式疊加，則用這種方式，如class="style1 style2"*/
?? ??? ?/*element.className = className; */?
?? ?}?
} ?
/*動態(tài)刪除className的函數(shù)，調(diào)用例子為：removeClass(document.getElementById("test"), "test") */
function removeClass(element, className) { ? ??
?? ?if (hasClass(element, className)){?
?? ??? ?var reg = new RegExp('(\\s|^)'+className+'(\\s|$)'); ? ? ? ??
?? ??? ?element.className = element.className.replace(reg,' '); ? ??
?? ?}?
}?
/*獲取第一個子節(jié)點的函數(shù)，兼容FF*/
function getFirstChild(obj){
?? ?var firstDIV;
?? ?for (i=0; i<obj.childNodes.length; i++){
?? ??? ?if (obj.childNodes[i].nodeType==1){
?? ??? ??? ?firstDIV=obj.childNodes[i];
?? ??? ??? ?return firstDIV;
?? ??? ?}
?? ??? ?else?
?? ??? ??? ?continue;
?? ?}
}
?
addLoadEvent(new Function("hovermenu('level1','level2','hove','cur');"));
//menu代表菜單總的ID名稱
//level1代表一級菜單項的父容器，level2代表二級菜單項的父容器，
//后面的三個參數(shù)style1,style2,style3分別代表鼠標(biāo)移入，移出，點擊的三態(tài)樣式名
addLoadEvent(new Function("submenu('level2','hove1','hove1');"));
?
/*滑動顯隱菜單列表*/
var temp;
var temp1;
function hovermenu(cssName1,cssName2,style2,style3){?
? ? var ArrLinks=getElementsByClassName(cssName1);//一級菜單父容器的數(shù)組
?? ?var ArrLevel = new Array();//第一級菜單的數(shù)組
?? ?for(var i=0;i<ArrLinks.length;i++){
?? ??? ?var curobj= getFirstChild(ArrLinks[i]);//獲得第一個子對象?? ??? ? ? ??? ??? ?
?? ??? ?ArrLevel.push(curobj);?? ??? ?
?? ?}
? ? var ArrDivs=getElementsByClassName(cssName2);//二級菜單的父容器數(shù)組，要顯示的二級菜單容器
? ? for(var i=0;i<ArrLinks.length;i++){ ? ? ? ?
? ? ? ? var obj=getFirstChild(ArrLinks[i]);//獲得第一個子對象
? ? ? ? obj.index=i
? ? ? ? obj.οnmοuseοver= function(){overme(this,ArrLevel,style2,temp)}; ? ? ? ? ??
? ? ? ? obj.οnmοuseοut=function(){outme(this,ArrLevel,style2,temp)};
?? ??? ?obj.οnclick=function(){clickme(this,ArrLinks,ArrDivs,style2,style3,temp)};
?? ??? ?obj.οnfοcus=function(){this.blur()};//去掉虛線框
? ? } ? ?
}
//二級菜單綁定事件
function submenu(cssName2,style2,style3){?
? ? var ArrLinks=getElementsByClassName(cssName2);//一級菜單父容器的數(shù)組
?? ?var ArrLevel = new Array();//第一級菜單的數(shù)組
?? ?for(var i=0;i<ArrLinks.length;i++){
?? ??? ?var sublinks= ArrLinks[i].getElementsByTagName('A');//獲得第一個子對象
?? ??? ?for(var m=0;m<sublinks.length;m++){
?? ??? ??? ?ArrLevel.push(sublinks[m]);
?? ??? ?} ? ?? ??? ?
?? ?}?? ?
? ? for(var i=0;i<ArrLevel.length;i++){ ? ? ? ?
? ? ? ? var obj=ArrLevel[i];
? ? ? ? obj.index=i
? ? ? ? obj.οnmοuseοver= function(){overme(this,ArrLevel,style2,temp1)}; ? ? ? ? ??
? ? ? ? obj.οnmοuseοut=function(){outme(this,ArrLevel,style2,temp1)};
?? ??? ?obj.οnclick=function(){subclick(this,ArrLevel,style2,style3,temp1)};
?? ??? ?obj.οnfοcus=function(){this.blur()};//去掉虛線框
? ? } ? ?
}
function overme(o,links,style2,state){
?? ?if (state!=o.index){?? ? ? ?
?? ??? ?addClass(o,style2);?? ??? ??? ??? ??? ??? ?
? ? }
}
function outme(o,links,style2,state){
?? ?if (state!=o.index){
?? ??? ?removeClass(o,style2);?? ? ? ??? ??? ??? ??? ?
?? ?};
}
//一級菜單點擊事件
function clickme(o,links,divs,style2,style3,state){
?? ?//要判斷是否有子菜單項
?? ?var objUl=links[o.index].getElementsByTagName('UL');
?? ?var subNum=objUl.length;//是否有二級菜單，0為無，大于0為有;
?? ?if (state!=o.index){?? ??? ?
?? ? ? ?for(var i=0;i<divs.length;i++){?
?? ??? ? ? ?if(subNum>0){//如果存在二級菜單項，即隱藏它
?? ??? ??? ??? ?divs[i].style.display="none";
?? ??? ??? ??? ?//closeObj(divs[i]);
?? ??? ??? ?}?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?
?? ? ? ?}?? ??? ?
?? ? ? ?if(subNum>0){//如果存在二級菜單項，顯示當(dāng)前點擊的二級菜單
?? ? ? ? ?objUl[0].style.display="block";
?? ??? ? ?showObj(objUl[0]);
?? ??? ?}?? ??? ?
? ? ? ? temp=o.index;
? ? }?? ?
?? ?for(var i=0;i<links.length;i++){
?? ??? ?var curobj= getFirstChild(links[i]);//獲得第一個子對象?? ??? ? ? ??? ??? ?
?? ??? ?removeClass(curobj,style3);
?? ??? ?removeClass(curobj,style2);
?? ?}?? ??? ??? ??? ??? ??? ??? ??? ?
?? ?addClass(o,style3);
}
//二級菜單點擊事件
function subclick(o,links,style2,style3,state){
?? ?if (state!=o.index){
?? ??? ?for(var i=0;i<links.length;i++){
?? ??? ??? ?removeClass(links[i],style2);?? ?
?? ??? ?}
?? ??? ?temp1=o.index;?? ??? ?
?? ? ? ?addClass(o,style2);?? ?
?? ?}
}
?
//緩沖顯示
var flag=0;
function showObj(obj){
?? ?var allhight;
?? ?allhight=obj.getElementsByTagName("li").length*26;//26為每個菜單項的高度，用來計算二級菜單的總高度。
? ?obj.style.height="1px"; ??
? ?var changeW=function(){ ?? ? ?? ??? ?
?? ? ?var obj_h=parseInt(obj.style.height);
?? ? ?if(obj_h<=allhight){?
?? ??? ?obj.style.height=(obj_h+Math.ceil((allhight-obj_h)/10))+"px";
?? ? ?}
?? ? ?else{?
?? ? ?clearInterval(bw1);
?? ? ?}
? ?} ? ? ??
? ?bw1= setInterval(changeW,40);//時間開關(guān)
? ?if(flag>0){
?? ? clearInterval(bw2);
? ?}
}
//緩沖關(guān)閉
function closeObj(obj){?? ?
? ?flag++; ? ? ??
? ?var closeDiv=function(){?? ? ? ?? ??? ??
?? ? ?clearInterval(bw1);
?? ? ?var obj_h=parseInt(obj.style.height);
?? ? ?if(obj_h>1){?
?? ??? ??? ? obj.style.height=(obj_h-Math.ceil(obj_h)/100)+"px";
?? ? ?}
?? ? ?else{
?? ? ?clearInterval(bw2);
?? ? ?obj.style.display="none";
?? ? ?}
? ?} ? ? ? ??
? bw2= setInterval(closeDiv,1);
? //alert(flag)
}而menu.css代碼如下：
/* 全兼容可高亮二級緩沖折疊菜單*/
*{margin:0;padding:0;}
html,body{height:100%;text-align:center;}
a:link,a:visited{ text-decoration:none;}
?
/*菜單個性設(shè)置*/
.box{width:195px;height:100%;margin:0 auto;height:100%;background:url(../images/menuboxbg.gif) repeat-y left top;}
.box ul{list-style:none;text-align:left;}
.box h2{width:195px;margin:0 auto;height:33px;background:#FFF url(../images/menuhead.gif) no-repeat left top;text-indent:-9999px;}
?
/*一級菜單*/
.menu li.level1 a{display:block;line-height:31px;height:31px;padding-left:50px; font-size:15px; font-weight:bold;color:#0066FF;background:url(../images/menubg.gif) no-repeat left top;}
/*一級菜單兩態(tài)樣式,供JS調(diào)用*/
.menu li.level1 a.hove{background-position:left -31px;}
.menu li.level1 a.cur{background-position:left -62px;}
?
/*二級菜單*/
.menu li ul{padding-left:10px;overflow:hidden;}
.menu li ul.level2{width:180px;display:none;}
.menu li ul.level2 li{height:26px;line-height:26px;}
.menu li ul.level2 li a{display:block;height:26px;line-height:26px;background:#E7E3E7 url(../images/t1.gif) no-repeat 30px center;padding-left:50px;color:#0066FF;border-top:1px #B8C2CB solid;overflow:hidden;}
/*二級菜單兩態(tài)樣式,供JS調(diào)用*/
.menu li ul.level2 li a.hove1{background:#F6F6F6 url(../images/t2.gif) no-repeat 30px center;}好了，完成了以上配置，您就可以實現(xiàn)如文章開始處那樣的左側(cè)導(dǎo)航菜單欄了，希望對你有用。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jQuery實現(xiàn)菜單欄導(dǎo)航效果
- 基于jQuery實現(xiàn)左側(cè)菜單欄可折疊功能
- 最常見的左側(cè)分類菜單欄jQuery實現(xiàn)代碼
- jquery仿京東導(dǎo)航/仿淘寶商城左側(cè)分類導(dǎo)航下拉菜單效果
- 基于jquery實現(xiàn)導(dǎo)航菜單高亮顯示（兩種方法）
- jQuery 實現(xiàn)側(cè)邊浮動導(dǎo)航菜單效果
- jquery實現(xiàn)點擊向下展開菜單項(伸縮導(dǎo)航)效果
- jQuery實現(xiàn)的導(dǎo)航下拉菜單效果示例
- JQuery 寫的個性導(dǎo)航菜單
- jQuery仿京東商城樓梯式導(dǎo)航定位菜單
相關(guān)文章
jQuery EasyUI tree 使用拖拽時遇到的錯誤小結(jié)
在我使用tree拖拽時總是失敗，控制臺輸出了很多錯誤。經(jīng)過問題跟蹤分析最終找到的錯誤原因，下面小編給大家分享下，感興趣的朋友參考下2016-10-10
jQuery使用load()方法載入另外一個網(wǎng)頁文件內(nèi)的指定標(biāo)簽內(nèi)容到div標(biāo)簽的方法
這篇文章主要介紹了jQuery使用load()方法載入另外一個網(wǎng)頁文件內(nèi)的指定標(biāo)簽內(nèi)容到div標(biāo)簽的方法,涉及jQuery中l(wèi)oad方法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
獲得內(nèi)容的三個簡單實用的方法text()、html() 以及 val()、獲取屬性的attr()方法，下面有個不錯的示例，感興趣的朋友可以參考下2013-12-12
jQuery提供css()的方法來實現(xiàn)嵌入式改變元素樣式，css()方法在使用上具有多樣性。2010-02-02
這篇文章主要為大家詳細(xì)介紹了jquery+Ajax實現(xiàn)簡單分頁條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
JQuery 實現(xiàn)在同一頁面錨點鏈接之間的平滑滾動
JQuery 原來比我想象的要強大的多，本文用 JQuery 實現(xiàn)錨點鏈接之間的平滑滾動，在同一頁面的錨點鏈接之間實現(xiàn)平滑的滾動2014-10-10
這篇文章主要為大家詳細(xì)介紹了jQuery zTree插件使用的簡單教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
JQuery+CSS提示框?qū)崿F(xiàn)思路及代碼(純手工打造)
純手工打造、兼容性還哦可、可移植任何項目感興趣的朋友可以學(xué)習(xí)下，希望對你的jquery提升有所幫助2013-05-05
這篇文章主要為大家詳細(xì)介紹了jQuery綁定事件的幾種實現(xiàn)方式，感興趣的小伙伴們可以參考一下2016-05-05
語法著色大家對它都不陌生吧，下面為大家介紹的是jquery-syntax動態(tài)語法著色的具體實現(xiàn),需要的朋友可以參考下2014-05-05