jquery实现网页左侧导航菜单栏

本文实例为大家分享了jquery实现网页左侧导航菜单栏的具体代码，供大家参考，具体内容如下

1.首先在之间添加

2.然后，在之中写入如下代码（根据您的实际情况修改）

     

     

      
车辆信息管理
         

              
车辆管理
              
使用记录
              
维护记录
          
           
        
用车申请
        
申请审批
        
审批结果
          

               
已批准的申请
               
待批准的申请
               
未通过的申请
               
维护中的车辆
           
               
               
返回OA主页
               
退出OA系统
            
 

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; k0){//如果存在二级菜单项，即隐藏它
                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;i0){
     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;}

好了，完成了以上配置，您就可以实现如文章开始处那样的左侧导航菜单栏了，希望对你有用。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。