多层展开菜单

最新推荐文章于 2020-02-07 09:39:48 发布

zss1100

最新推荐文章于 2020-02-07 09:39:48 发布

阅读量735

点赞数

分类专栏：菜单类CSS 文章标签： class border div function numbers image

菜单类CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

脚本说明:
把如下代码加入<body>区域中
<style type="text/css">
#divFoldCont {position:absolute; left:80px; top:100px; width:170px; visibility:hidden;}
.clFold   {position:absolute; width:170px;}
.clFoldSub  {position:absolute; left:15px; width:170px; visibility:hidden;}
.clFoldSub2  {position:absolute; left:15px; width:170px; visibility:hidden;}
.clFoldLinks {font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; font-weight:bold; text-decoration:none; color:black;}
.clSubLinks  {font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; font-weight:bold; text-decoration:none; color:black;}
.clSubLinks2 {font-family:Arial, Verdana, Helvetica, Helv; font-size:12px; text-decoration:none; color:black;}
</style>
<script language="JavaScript" type="text/javascript">
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=new lib_bwcheck()

if(document.layers){ //NS4 resize fix...
scrX= innerWidth; scrY= innerHeight;
οnresize= function(){if(scrX!= innerWidth || scrY!= innerHeight){history.go(0)} }
}

if(navigator.userAgent.indexOf('Opera')>-1 && document.getElementById){ //Opera 5 resize fix.
scrX= innerWidth; scrY= innerHeight;
document.οnmοusemοve= function(){
  if(scrX<innerWidth-10 || scrY<innerHeight-10 || scrX>innerWidth+10 || scrY>innerHeight+10){
   scrX = innerWidth;
   scrY = innerHeight;
   foldInit();
  }
};
}
/************************************************************************************
This is the new foldoutmenu, with more levels!
This is in some ways a rather advanced menu so please read every
note in this script and in the comments in the page to understand how
it works.

NOTE: if you change the position of divFoldCont from absolute to relative,
you can put the menu in a table. HOWEVER it will no longer work in netscape 4.
If you wish to support netscape 4, you have to use absolute positioning.
************************************************************************************/

//Do you want images (if not set to 0 and remove the images from the body)?
foldImg=1

//Here are the images for the top links.
foldinImg=new Image(); foldinImg.src="foldoutmenu2_arrow.gif" //The image for the closed state.
foldoutImg=new Image(); foldoutImg.src="foldoutmenu2_arrow_open.gif" //The image for the open state.
//Here are the images for the sub links.
foldsubinImg=new Image(); foldsubinImg.src="foldoutmenu2_arrow.gif" //The image for the "in" state.
foldsuboutImg=new Image(); foldsuboutImg.src="foldoutmenu2_arrow_open.gif" //The image for the "out" state.
//If you change the images above please remember to change the images in the actual page as well.

mainmenus=4 //How many main menus do you have?

//How many submenus do you have beneath each main level.
submenus=new Array(3,3,2,3)
//In this example I have 3 submenus in the first top menu,
//3, in the second, 2 submenus in the third top menu and 3 in the forth.
//It's really important that these numbers are correct.

pxbetweenmain = 10 //How much space should there be between the main menus
pxbetweensub = 5 //How much space should there be between the sub menus

mainstayfolded = false //Should the main menus stay folded?
substayfolded = false //Should the sub menus stay folded? Play with these 2 variables.

/************************************************************************************
Making cross-browser objects
************************************************************************************/
function makeMenu(obj,nest){
nest=(!nest) ? "":'document.'+nest+'.';
this.css= bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0;
this.elm= bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.ref= bw.dom || bw.ie4? document:bw.ns4?eval(nest+"document.layers." +obj+".document"):0;
this.x= bw.ns4?this.css.left:bw.opera5?this.css.pixelLeft:this.elm.offsetLeft;
this.y= bw.ns4?this.css.top:bw.opera5?this.css.pixelTop:this.elm.offsetTop;
this.height= bw.ns4?this.ref.height:bw.opera5?this.css.pixelHeight:this.elm.offsetHeight;
this.hideIt= b_hideIt;
this.showIt= b_showIt;
this.moveIt= b_moveIt;
this.status= 0;
return this;
}

// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";

<div id="divFoldCont">

<div id="divFold0" class="clFold"><a href="#" οnclick="foldmenu(0); return false" class="clFoldLinks" οnfοcus="if(this.blur)this.blur()"><img src="http://www.baron.com.cn/javascript/menu/foldoutmenu2_arrow.gif" name="imgFold0" width=12 height=12 alt="" border=0> [choice 0]</a><br>
  <div id="divFoldSub0_0" class="clFoldSub"><a href="#" οnclick="subfoldmenu(0,0); return false" class="clSubLinks" οnfοcus="if(this.blur)this.blur()"><img src="http://www.baron.com.cn/javascript/menu/foldoutmenu2_arrow.gif" name="imgFold0Sub0" alt="" border=0> [choice 0_0]</a><br>
   <div id="divFoldSub0_0_0" class="clFoldSub2">
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 0_0_0</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 0_0_1</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 0_0_2</a><br>
   </div>
  </div>
  <div id="divFoldSub0_1" class="clFoldSub"><a href="#" οnclick="subfoldmenu(0,1); return false" class="clSubLinks" οnfοcus="if(this.blur)this.blur()"><img src="http://www.baron.com.cn/javascript/menu/foldoutmenu2_arrow.gif" name="imgFold0Sub1" alt="" border=0> [choice 0_1]</a><br>
   <div id="divFoldSub0_1_0" class="clFoldSub2">
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 0_1_0</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 0_1_1</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 0_1_2</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 0_1_3</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 0_1_4</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 0_1_5</a><br>
   </div>
  </div>
  <div id="divFoldSub0_2" class="clFoldSub"><a href="#" οnclick="subfoldmenu(0,2); return false" class="clSubLinks" οnfοcus="if(this.blur)this.blur()"><img src="http://www.baron.com.cn/javascript/menu/foldoutmenu2_arrow.gif" name="imgFold0Sub2" alt="" border=0> [choice 0_2]</a><br>
   <div id="divFoldSub0_2_0" class="clFoldSub2">
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 0_2_0</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 0_2_1</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 0_2_2</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 0_2_3</a><br>
   </div>
  </div>

  
</div>

<div id="divFold1" class="clFold"><a href="#" οnclick="foldmenu(1); return false" class="clFoldLinks" οnfοcus="if(this.blur)this.blur()"><img src="http://www.baron.com.cn/javascript/menu/foldoutmenu2_arrow.gif" name="imgFold1" width=12 height=12 alt="" border=0> [choice 1]</a><br>
  <div id="divFoldSub1_0" class="clFoldSub"><a href="#" οnclick="subfoldmenu(1,0); return false" class="clSubLinks" οnfοcus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold1Sub0" alt="" border=0> [choice 1_0]</a><br>
   <div id="divFoldSub1_0_0" class="clFoldSub2">
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 1_0_0</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 1_0_1</a><br>
   </div>
  </div>
  <div id="divFoldSub1_1" class="clFoldSub"><a href="#" οnclick="subfoldmenu(1,1); return false" class="clSubLinks" οnfοcus="if(this.blur)this.blur()"><img src="http://www.baron.com.cn/javascript/menu/foldoutmenu2_arrow.gif" name="imgFold1Sub1" alt="" border=0> [choice 1_1]</a><br>
   <div id="divFoldSub1_1_0" class="clFoldSub2">
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 1_1_0</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 1_1_1</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 1_1_2</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 1_1_3</a><br>
   </div>
  </div>
  <div id="divFoldSub1_2" class="clFoldSub"><a href="#" οnclick="subfoldmenu(1,2); return false" class="clSubLinks" οnfοcus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold1Sub2" alt="" border=0> [choice 1_2]</a><br>
   <div id="divFoldSub1_2_0" class="clFoldSub2">
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 1_2_0</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 1_2_1</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 1_2_2</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 1_2_3</a><br>
   </div>
  </div>
</div>

<div id="divFold2" class="clFold"><a href="#" οnclick="foldmenu(2); return false" class="clFoldLinks" οnfοcus="if(this.blur)this.blur()"><img src="http://www.baron.com.cn/javascript/menu/foldoutmenu2_arrow.gif" name="imgFold2" width=12 height=12 alt="" border=0> [choice 2]</a><br>
  <div id="divFoldSub2_0" class="clFoldSub"><a href="#" οnclick="subfoldmenu(2,0); return false" class="clSubLinks" οnfοcus="if(this.blur)this.blur()"><img src="http://www.baron.com.cn/javascript/menu/foldoutmenu2_arrow.gif" name="imgFold2Sub0" alt="" border=0> [choice 2_0]</a><br>
   <div id="divFoldSub2_0_0" class="clFoldSub2">
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 2_0_0</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 2_0_1</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 2_0_2</a><br>
   </div>
  </div>
  <div id="divFoldSub2_1" class="clFoldSub"><a href="#" οnclick="subfoldmenu(2,1); return false" class="clSubLinks" οnfοcus="if(this.blur)this.blur()"><img src="http://www.baron.com.cn/javascript/menu/foldoutmenu2_arrow.gif" name="imgFold2Sub1" alt="" border=0> [choice 2_1]</a><br>
   <div id="divFoldSub2_1_0" class="clFoldSub2">
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 2_1_0</a><br>
   </div>
  </div>
</div>
<div id="divFold3" class="clFold"><a href="#" οnclick="foldmenu(3); return false" class="clFoldLinks" οnfοcus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold3" width=12 height=12 alt="" border=0> [choice 3]</a><br>
  <div id="divFoldSub3_0" class="clFoldSub"><a href="javascript://this link doesn't have a onclick, and can be used just like a regular link" class="clSubLinks" οnfοcus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold3Sub0" alt="" border=0> [empty]</a>
   <div id="divFoldSub3_0_0" class="clFoldSub2"></div>
  </div>
  <div id="divFoldSub3_1" class="clFoldSub"><a href="#" οnclick="subfoldmenu(3,1); return false" class="clSubLinks" οnfοcus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold3Sub1" alt="" border=0> [choice 3_1]</a><br>
   <div id="divFoldSub3_1_0" class="clFoldSub2">
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 3_1_0</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 3_1_1</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 3_1_2</a><br>
   </div>
  </div>
  <div id="divFoldSub3_2" class="clFoldSub"><a href="#" οnclick="subfoldmenu(3,2); return false" class="clSubLinks" οnfοcus="if(this.blur)this.blur()"><img src="foldoutmenu2_arrow.gif" name="imgFold3Sub2" alt="" border=0> [choice 3_2]</a><br>
   <div id="divFoldSub3_2_0" class="clFoldSub2">
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 3_2_0</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 3_2_1</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 3_2_2</a><br>
     <a href="#" class="clSubLinks2" οnfοcus="if(this.blur)this.blur()">Sub 3_2_3</a><br>
   </div>
  </div>
</div>


</div>

zss1100

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多层展开菜单

脚本说明:把如下代码加入区域中#divFoldCont {position:absolute; left:80px; top:100px; width:170px; visibility:hidden;}.clFold {position:absolute; width:170px;}.clFoldSub {position:absolute; left:15px; width:170px;
复制链接

扫一扫

专栏目录