html分级显示的下拉列表,左侧的隐藏菜单，点击后显示下拉分级菜单的内容

web

reference

var maxmnus = 5

function opTab(){

var mnu = document.getElementByIdx("menubar")

var arrdiv = document.getElementByIdx("arrow")

var arrtxt = document.getElementByIdx("arr")

if((mnu.style.display != "block") || (mnu.style.display ==

"")){

mnu.style.display = "block"

arrdiv.style.pixelLeft = mnu.style.width.substring(0 ,

mnu.style.width.length - 2)

arrtxt.innerText = "3";

} else {

mnu.style.display = "none"

arrtxt.innerText = "4";

arrdiv.style.pixelLeft = 0;

}

event.cancelBubble = true;

}

function toggleMenu(el){

for(var i = 0;i < maxmnus;i++)

document.getElementByIdx(document.getElementByIdx("c" +

i).menu).style.display = "none";

if(el.status == "closed"){

el.status = "open"

document.getElementByIdx(el.menu).style.display = "block";

} else {

el.status = "closed"

}

}

function toggleSub(e){

el = document.getElementByIdx(e)

if(el.status == "closed"){

el.style.display = "block";

el.status = "open"

} else {

el.style.display = "none";

el.status = "closed"

}

event.cancelBubble = true;

}

#menubar{

position:absolute;top:0px;left:0px;display:none;font-family:Verdana,Helvetica,Arial;font-weight:700;font-size:10px;cursor:hand;z-index:5;background-image:url();background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#2644b2',

endColorstr='#e7e8f1');}

.indicator{

color:#b24426;font-family:Webdings;font-weight:bold;font-size:10px;}

.r1{

position:relative;top:10px;left:5px;width:213px;color:#e7e8f1;border-left:#e7e8f1

2px outset;border-top:#e7e8f1 2px outset;border-right:#e7e8f1 2px

outset;border-bottom:#e7e8f1 2px

outset;padding-left:5px;padding-top:1px;adding-right:5px;padding-bottom:1px;background-image:url();background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#2644b2',

endColorstr='#e7e8f1');}

.submenu1{

position:relative;top:0px;left:0px;height:95%;width:100%;border-left:#e0f8e3

2px inset;border-top:#e0f8e3 2px inset;border-right:#e0f8e3 2px

inset;border-bottom:#e0f8e3 2px

inset;padding-left:3px;padding-top:3px;padding-right:3px;padding-bottom:3px;display:none;color:#2644b2;font-family:Verdana,Helvetica,Arial;font-weight:700;font-size:10px;background-color:#cff1d4;background-image:url();background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#bec1e4',

endColorstr='#e7e8f1');}

.submenu2{

position:relative;top:0px;left:0px;width:90%;border-left:#e0f8e3

3px groove;border-top:#e0f8e3 3px groove;border-right:#e0f8e3 3px

groove;border-bottom:#e0f8e3 3px

groove;padding-left:3px;padding-top:3px;padding-right:3px;padding-bottom:3px;margin-top:4px;display:none;background-color:#cff1d4;color:#2644b2;font-family:Verdana,Helvetica,Arial;font-weight:700;font-size:10px;background-image:url();background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#bec1e4',

endColorstr='#e7e8f1');}

.pulltab{

position:absolute;top:0px;left:0px;height:100%;width:20px;padding-left:2px;cursor:hand;color:#2644b2;font-family:Webdings;font-weight:bold;font-size:10px;z-index:5;background-image:url();background-repeat:repeat-y;filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',gradientType='1',startColorstr='#e7e8f1',

endColorstr='#2644b2');}

.inner{

height:100%;width:100%;}

.mtab{

position:relative;top:0px;

.btninner{

height:100%;width:100%;}

.fr{

position:absolute;top:0px;left:30px;}

status="closed" menu="m0">

class="btninner">Behaviors

border="0" cellspacing="0" cellpadding="0">

οnclick="opTab();">DHTML

Behaviours

οnclick="opTab();">HTC

Reference

οnclick="opTab();">Element

Behaviors

οnclick="toggleSub('m0s0');">ViewLink

Overview

class="indicator">6

border="0" cellspacing="0" cellpadding="0"

status="closed">

οnclick="opTab();">ViewLink CSS

Inheritance

οnclick="opTab();">Default Behaviors

Reference

οnclick="opTab();">Behaviors

Library

οnclick="opTab();">Using DHTML

behaviors

οnclick="opTab();">Implementing DHTML Behaviors in

Script Using HTML

Components

status="closed" menu="m1">

class="btninner">CSS

border="0" cellspacing="0" cellpadding="0">

οnclick="opTab();">A Coast-to-Coast Cascade of Style

Sheets

οnclick="opTab();">Using Cascading Style

Sheets

οnclick="opTab();">Controlling Presentation with

Measurement and Location

Properties

οnclick="opTab();">A User's Guide to Style

Sheets

οnclick="opTab();">Cascading Style Sheets in

Internet Explorer

4.0

οnclick="opTab();">New in CSS, Level

2

οnclick="opTab();">CSS

Positioning

οnclick="opTab();">Linked Style

Sheets

οnclick="opTab();">Using Vertical Layout in Internet

Explorer

5.5

οnclick="opTab();">CSS Attributes

Reference

οnclick="opTab();">CSS Length Units

Reference

οnclick="opTab();">Tips

status="closed" menu="m2">

class="btninner">DHTML

border="0" cellspacing="0" cellpadding="0">

DHTML

1

DHTML

2

DHTML

3

DHTML

4

DHTML

5

DHTML

6

DHTML

7

DHTML

8

DHTML

9

DHTML

10

DHTML

11

DHTML

12

status="closed" menu="m3">

class="btninner">DOM

border="0" cellspacing="0" cellpadding="0">

DOM

1

DOM

2

DOM

3

DOM

4

DOM

5

DOM

6

DOM

7

DOM

8

DOM

9

DOM

10

DOM

11

DOM

12

status="closed" menu="m4">

class="btninner">HTML

border="0" cellspacing="0" cellpadding="0">

HTML

1

HTML

2

HTML

3

HTML

4

HTML

5

HTML

6

HTML

7

HTML

8

HTML

9

HTML

10

HTML

11

HTML

12

οnclick="opTab()">

class="inner">

id="arr"

valign="middle">4

class="fr">

左侧的变化菜单

This menu is specifically designed

for IE5.5+, there will be a version for N6+ and Mozilla 0.9.2

soon

1. Click on the bar to the left to

   open or close the menu

2. Clicking on any menu item would

   normally display a page here and/or show a submenu indicated by a

   down arrow at Jon Steele's

   suggestion

3. The fourth item of the

   "Behavoirs" menu, "Viewlink Overview" has a

   sub-menu.

4. No menu will remain open if

   another is clicked

5. Clicking on the same menu item

   toggles it open or closed

   accordingly

6. Selection of a link closes the

   menu automatically

7. The IE 5.5 version, uses no

   images, the colouration is from a behavior that requires

   5.5

8. The 5.0 version uses 2 small jpg

   but are of lesser quality.

9. This menu is designed, primarily,

   for dynamic page. The adat for the page would either be placed here

   via XML or arrays or document/write method.