jquery实现网页左侧导航菜单栏
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
本文实例为大家分享了jquery实现网页左侧导航菜单栏的具体代码,供大家参考,具体内容如下
1.首先在<head></head>之间添加
<script type="text/javascript" src="http://9i0i.com/pic.php?p=js/menu.js"></script> <link href="css/menu.css" rel="stylesheet" type="text/css" />
2.然后,在<body></body>之中写入如下代码(根据您的实际情况修改)
<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="#">审批结果</a> ? ? ? ? ? <ul class="level2"> ? ? ? ? ? ? ? ?<li><a href="HasBeenApproved.aspx" target="CarFrame1">已批准的申请</a></li> ? ? ? ? ? ? ? ?<li><a href="WaitingForApproval.aspx" target="CarFrame1">待批准的申请</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系统</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; ?? ?? ?}? } ? /*通用加载函数,页面中如果要用到onload函数在窗体一加载时就执行的代码,可以直接添加到这个函数,否则会引起多个onload函数的执行冲突 ? 带参数的调用方法: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的函数,调用例子为:o.className=o.addClass(o,"normal");*/ function hasClass(element, className) { ? ?? ?var reg = new RegExp('(\\s|^)'+className+'(\\s|$)'); ? ?? ?? ?return element.className.match(reg);? }? /*动态添加className的函数,调用例子为:addClass(document.getElementById("test"), "test");*/ function addClass(element, className) { ? ?? ?if (!this.hasClass(element, className)){ ?? ?? ??? ?element.className += " "+className;/*如果有多个样式叠加,则用这种方式,如class="style1 style2"*/ ?? ??? ?/*element.className = className; */? ?? ?}? } ? /*动态删除className的函数,调用例子为: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,' '); ? ?? ?? ?}? }? /*获取第一个子节点的函数,兼容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代表二级菜单项的父容器, //后面的三个参数style1,style2,style3分别代表鼠标移入,移出,点击的三态样式名 addLoadEvent(new Function("submenu('level2','hove1','hove1');")); ? /*滑动显隐菜单列表*/ var temp; var temp1; function hovermenu(cssName1,cssName2,style2,style3){? ? ? var ArrLinks=getElementsByClassName(cssName1);//一级菜单父容器的数组 ?? ?var ArrLevel = new Array();//第一级菜单的数组 ?? ?for(var i=0;i<ArrLinks.length;i++){ ?? ??? ?var curobj= getFirstChild(ArrLinks[i]);//获得第一个子对象?? ??? ? ? ??? ??? ? ?? ??? ?ArrLevel.push(curobj);?? ??? ? ?? ?} ? ? var ArrDivs=getElementsByClassName(cssName2);//二级菜单的父容器数组,要显示的二级菜单容器 ? ? 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);//一级菜单父容器的数组 ?? ?var ArrLevel = new Array();//第一级菜单的数组 ?? ?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){//如果存在二级菜单项,显示当前点击的二级菜单 ?? ? ? ? ?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);//时间开关 ? ?if(flag>0){ ?? ? clearInterval(bw2); ? ?} } //缓冲关闭 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;} ? /*菜单个性设置*/ .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;} /*一级菜单两态样式,供JS调用*/ .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;} /*二级菜单两态样式,供JS调用*/ .menu li ul.level2 li a.hove1{background:#F6F6F6 url(../images/t2.gif) no-repeat 30px center;}
好了,完成了以上配置,您就可以实现如文章开始处那样的左侧导航菜单栏了,希望对你有用。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持程序员之家。
相关文章
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
这篇文章主要介绍了jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法,涉及jQuery针对页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2018-03-03jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
这些年,javascript火起来了,主要归功于AJAX的推广应用,Web2.0的发展。。。于是,出现了很多的javascript框架。2010-10-10Jquery和BigFileUpload实现大文件上传及进度条显示
这篇文章主要介绍了Jquery和BigFileUpload实现大文件上传及进度条显示的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下2016-06-06jQuery实现限制textarea文本框输入字符数量的方法
这篇文章主要介绍了jQuery实现限制textarea文本框输入字符数量的方法,涉及jQuery键盘事件及页面元素的相关操作技巧,需要的朋友可以参考下2015-05-05
最新评论