左侧隐藏的互换菜单

<STYLE>#menuShow {
 BORDER-RIGHT: #999999 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #999999 1px solid; PADDING-LEFT: 0px; FONT-SIZE: 10px; PADDING-BOTTOM: 0px; BORDER-LEFT: #999999 1px solid; WIDTH: 161px; PADDING-TOP: 0px; BORDER-BOTTOM: #999999 1px solid; FONT-FAMILY: tahoma; POSITION: absolute; HEIGHT: auto; BACKGROUND-COLOR: #cccccc
}
#menuSelect {
 BORDER-RIGHT: #999999 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #999999 1px solid; PADDING-LEFT: 0px; FONT-SIZE: 10px; PADDING-BOTTOM: 0px; BORDER-LEFT: #999999 1px solid; WIDTH: 161px; PADDING-TOP: 0px; BORDER-BOTTOM: #999999 1px solid; FONT-FAMILY: tahoma; POSITION: absolute; HEIGHT: 24px; BACKGROUND-COLOR: #cccccc
}
A {
 FONT-SIZE: 10px; COLOR: #333333; LINE-HEIGHT: 16px; FONT-FAMILY: "tahoma"; TEXT-DECORATION: none
}
A:hover {
 FONT-SIZE: 10px; COLOR: #ffffff; LINE-HEIGHT: 16px; FONT-FAMILY: "tahoma"; TEXT-DECORATION: none
}
</STYLE>

<DIV id=menuSelect><A onclick=moveOnMenu();moveOffSelector() 
href="#"><IMG height=24 
src="/texiao/zzsc_demo/2007112301.gif" width=161 border=0></A></DIV>
<DIV id=menuShow align=center><A onclick=moveOffMenu();moveOnSelector() 
href="#"><IMG height=24 
src="/texiao/zzsc_demo/2007112301.gif" width=161 border=0></A> <BR><A 
href="#">Menu Item A</A><BR><A 
href="#">Menu Item B</A><BR><A 
href="#">Menu Item C</A><BR><BR><A 
href="#">Menu Item D</A><BR><A 
href="#">Menu Item E</A><BR><BR><A 
href="#">Menu Item F</A><BR><A 
href="#">Menu Item G</A><BR><A 
href="#">Menu Item H</A><BR></DIV>
<SCRIPT language=JavaScript>
// Set Show to "yes" to show the menu on start-up.
// Set Show to "no" to show the selector on start-up.

Show ="no";

// Set OffX in pixels to a negative number 
// somewhat larger than the width of the menu.

var OffX = -200;

// Set the PosX and PosY variables
// to the location on the screen where the
// menu should position (in pixels) when stopped.

var PosX =  10;
var PosY =  10;

// Usually, use the settings shown; but you can
// change the speed and the increment of motion
// across the screen, below.

var speed        = 5;
var increment    = 5;
var incrementNS4 = 5; // for slower NS4 browsers

// do not edit below this line
// ===========================

var is_NS = navigator.appName=="Netscape";
var is_Ver = parseInt(navigator.appVersion);
var is_NS4 = is_NS&&is_Ver>=4&&is_Ver<5;
var is_NS5up = is_NS&&is_Ver>=5;

var MenuX = OffX;
var SelX = PosX;
var sPosX = PosX;
var sOffX = OffX;

if (Show == "yes") {
sPosX = OffX;
sOffX = PosX;
MenuX = sOffX;
SelX = sPosX;
}

if (is_NS4) {
increment = incrementNS4;
Lq = "document.layers.";
Sq = "";
eval(Lq+'menuSelect'+Sq+'.left=sPosX');
eval(Lq+'menuShow'+Sq+'.left=sOffX');
eval(Lq+'menuSelect'+Sq+'.top=PosY');
eval(Lq+'menuShow'+Sq+'.top=PosY');
} else {
Lq = "document.all.";
Sq = ".style";
document.getElementById('menuSelect').style.left = sPosX+"px";
document.getElementById('menuShow').style.left = sOffX+"px";
document.getElementById('menuSelect').style.top = PosY+"px";
document.getElementById('menuShow').style.top = PosY+"px";
}  

function moveOnMenu() {
if (MenuX < PosX) { 
MenuX = MenuX + increment;
if (is_NS5up) {
document.getElementById('menuShow').style.left = MenuX+"px";
} else {
eval(Lq+'menuShow'+Sq+'.left=MenuX');
}
setTimeout('moveOnMenu()',speed);
   }
}

function moveOffMenu() {
if (MenuX > OffX) { 
MenuX = MenuX - increment;
if (is_NS5up) {
document.getElementById('menuShow').style.left = MenuX+"px";
} else {
eval(Lq+'menuShow'+Sq+'.left=MenuX');
}
setTimeout('moveOffMenu()',speed);
   }
}

function moveOffSelector() {
if (SelX > OffX) { 
SelX = SelX - increment;
if (is_NS5up) {
document.getElementById('menuSelect').style.left = SelX+"px";
} else {
eval(Lq+'menuSelect'+Sq+'.left=SelX');
}
setTimeout('moveOffSelector()',speed);
   }
}

function moveOnSelector() {
if (SelX < PosX) { 
SelX = SelX + increment;
if (is_NS5up) {
document.getElementById('menuSelect').style.left = SelX+"px";
} else {
eval(Lq+'menuSelect'+Sq+'.left=SelX');
}
setTimeout('moveOnSelector()',speed);
   }
}
</SCRIPT>