本文实例为大家分享了jquery实现网页左侧导航菜单栏的具体代码，供大家参考，具体内容如下
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>之中写入如下代码（根据您的实际情况修改）
<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;}
好了，完成了以上配置，您就可以实现如文章开始处那样的左侧导航菜单栏了，希望对你有用。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
