您现在的位置是:网站首页> 编程资料编程资料

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

2023-05-24 380人已围观

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

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

1.首先在之间添加

2.然后,在之中写入如下代码(根据您的实际情况修改)

     

       

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;}

好了,完成了以上配置,您就可以实现如文章开始处

-六神源码网