怎样制作例如 http://www.tunnel.net.cn/oa.gif左边的导航菜单

Question

<script language="JavaScript">
var HeadHeight=22;
var BodyHeight=260;
var ObjectCount=3;
var Step=1;
var Moving=false;
function ShowMe(m_Object,m_Object_)
{
if(Moving)
return;
Moving=true;
for(iIndex=0;iIndex<document.all.tags("td").length;iIndex++)
{
if(document.all.tags("td")[iIndex].className.indexOf('HeadTD')==0)
{
document.all.tags("td")[iIndex].className='HeadTD';
m_Object_.className='HeadTD_';
}
}
MoveMe(m_Object);
}
function MoveMe(m_Object)
{
IDNumber=parseInt(m_Object.id.substr(4));
m_ObjectTop=HeadHeight*(IDNumber-1);
m_ObjectButtom=BodyHeight+HeadHeight*(IDNumber-2);
CurrentTop=parseInt(m_Object.style.top);
if(CurrentTop>=m_ObjectButtom)
{
CountID=1;
for(iIndex=0;iIndex<document.all.tags("div").length;iIndex++)
if(document.all.tags("div")[iIndex].id=='Item'+CountID+'Body')
{
m_Object=document.all.tags("div")[iIndex];
m_ObjectTop=HeadHeight*(CountID-1);
if(CountID==IDNumber)
{
MoveUp(m_Object,m_ObjectTop,false);
break;
}
else
MoveUp(m_Object,m_ObjectTop,true);
CountID++;
}
}
else if((CurrentTop<=m_ObjectTop)&&(IDNumber<ObjectCount))
{
IDNumber++;
CountID=ObjectCount;
for(iIndex=document.all.tags("div").length-1;iIndex>=0;iIndex--)
if(document.all.tags("div")[iIndex].id=='Item'+CountID+'Body')
{
m_Object=document.all.tags("div")[iIndex];
m_ObjectButtom=BodyHeight+HeadHeight*(CountID-2);
if(CountID==IDNumber)
{
MoveDown(m_Object,m_ObjectButtom,false);
break;
}
else
MoveDown(m_Object,m_ObjectButtom,true);
CountID--;
}
}
}
function MoveUp(m_Object,m_ObjectTop,IsMove)
{
CurrentTop=parseInt(m_Object.style.top);
if(CurrentTop>m_ObjectTop)
{
m_Object.style.top=CurrentTop-Step;
setTimeout('MoveUp('+m_Object.id+','+m_ObjectTop+','+IsMove+')',1)
return;
}
Moving=IsMove;
}
function MoveDown(m_Object,m_ObjectButtom,IsMove)
{
CurrentTop=parseInt(m_Object.style.top);
if(CurrentTop<m_ObjectButtom)
{
m_Object.style.top=CurrentTop+Step;
setTimeout('MoveDown('+m_Object.id+','+m_ObjectButtom+','+IsMove+')',1)
return;
}
Moving=IsMove;
}
</script>
<style>
.HeadTD{background: #F2F2F2; border: 1px solid; border-color: #999999 #999999 #999999 #999999; cursor: hand; font-size: 9pt}
.HeadTD_{background: #FFFFFF; border: 1px solid; border-color: #999999 #999999 #999999 #999999; cursor: hand; font-size: 9pt}
.BodyTD{background: #FFFFFF; border: 0px solid; border-color: #999999 #999999 #999999 #999999; font-size: 9pt}
</style>
<fieldset style="position:absolute;top:10px;left:10px;height:312px;width:98px;">
<div>
<div id="Menu" style="position:absolute; left:2px; top:2px; width:90px; height:304px; z-index:3; overflow: hidden; background: #F2F2F2;" onclick="">
  <div id="Item1Body" style="position:absolute; left:0; top:0; width:90px; height:260px; z-index:1; overflow: hidden">
    <table width="90" border="0" height="100%" cellpadding="2" cellspacing="0">
      <tr>
        <td id="Item1Head" height="20" class="HeadTD_" onclick="ShowMe(Item1Body,this)">
          <div align="center">电子公告</div>
        </td>
    </tr>
    <tr>
        <td class="BodyTD"></td>
    </tr>
    </table>
  </div>
  <div id="Item2Body" style="position:absolute; left:0px; top:260; width:90; height:260; z-index:2; overflow: hidden">
    <table width="90" border="0" height="100%" cellpadding="2" cellspacing="0">
      <tr>
        <td id="Item2Head" height="20" class="HeadTD" onclick="ShowMe(Item2Body,this)">
          <div align="center">日常办公</div>
        </td>
      </tr>
     <tr>
        <td class="BodyTD">
          <div align="center"><a href="about:blank">公文拟制</a></div>
        </td>
      </tr>
      <tr>
        <td class="BodyTD">
          <div align="center"><a href="about:blank">工作简报</a></div>
        </td>
      </tr>       
    </table>
  </div>
  <div id="Item3Body" style="position:absolute; left:0; top:282; width:90px; height:260; z-index:3">
    <table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0">
      <tr>
        <td id="Item3Head" height="20" class="HeadTD" onclick="ShowMe(Item3Body,this)">
          <div align="center">待办事宜</div>
        </td>
      </tr>
      <tr>
        <td class="BodyTD"></td>
      </tr>
    </table>
  </div>
</div>
</div>
</fieldset>

Answer 1

http://fason.nease.net/zhuanti/menu.htm

Answer 2

function ShowMe(m_Object,m_Object_)
{
if(Moving)
return;
Moving=true;
for(iIndex=0;iIndex<document.all.tags("td").length;iIndex++)
{
if(document.all.tags("td")[iIndex].className.indexOf('HeadTD')==0)
{
document.all.tags("td")[iIndex].className='HeadTD';
m_Object_.className='HeadTD_';
}
}
MoveMe(m_Object);
         Moving=false;  //在此加一行,上面问题可解决
}

Answer 3

<script language="JavaScript">
 <!--
 var layerTop=20;       //菜单顶边距
 var layerLeft=30;      //菜单左边距
 var layerWidth=202;    //菜单总宽度
 var titleHeight=20;    //标题栏高度
 var contentHeight=200; //内容区高度
 var stepNo=10;         //移动步数，数值越大移动越慢
 var itemNo=0;
  //建立一个名为"itemsLayer"的层，用它限制所有菜单的显示范围：
 document.write('<span id=itemsLayer 
style="position:absolute;overflow:hidden;border:1px
 solid #008800;left:'+layerLeft+';top:'+
layerTop+';width:'+layerWidth+';">');
 function addItem(itemTitle,itemContent){ 
   //这个函数准备接受菜单标题和内容的写入
     //新增菜单的顶点刚好在上一菜单的标题栏以下，尺寸由一开始便声明的变量决定
   itemHTML='<div id=item'+itemNo+' itemIndex='+itemNo+
' style="position:relative;left:0;
top:'+(-contentHeight*itemNo)+';width:'+layerWidth+';">'+
       '<table width=100% cellspacing="0" cellpadding="0">'+
       '<tr><td height='+titleHeight+
' onclick=changeItem('+itemNo+') class="titleStyle" 
align=center>'+itemTitle+'</td></tr>'+
       '<tr><td height='+contentHeight+' class="contentStyle">'
+itemContent+'</td></tr> </table></div>';
   document.write(itemHTML);
   itemNo++;
 }
 //这时便可以把菜单标题和内容作为参数调用以上函数了：
  //你可以添加任意多项，格式参照以下几行： addItem('欢迎','<BR>欢迎光临设计在线！');
 addItem('网页陶吧','<center><a href="#">项目</a> <BR><BR><a href="#">项目</a> 
<BR><BR><a href="#">项目</a> <BR><BR><a href="#">更多..</a></center>');
 addItem('美工教室','<center><a href="#">项目</a> <BR><BR><a href="#">项目</a> 
<BR><BR><a href="#">项目</a> <BR><BR><a href="#">更多..</a></center>');
 addItem('Flash','<center><a href="#">项目</a> <BR><BR><a href="#">项目</a> 
<BR><BR><a href="#">项目</a> <BR><BR><a href="#">更多..</a></center>');
 addItem('多媒体','<center><a href="#">项目</a> <BR><BR><a href="#">项目</a> 
<BR><BR><a href="#">项目</a> <BR><BR><a href="#">更多..</a></center>');
 addItem('精品赏析','<a href="#">设计精品</a>');
 document.write('</span>');   //结束"itemsLayer"层  //下面一式计算"itemsLayer"层的高度：
 document.all.itemsLayer.style.height =
itemNo*titleHeight+contentHeight;
 //现在开始编写点击标题时移动相应的层：
  //初始化变量"toItemIndex"和"onItemIndex"，
它们分别用于记录"应该显示的层"和"现在显示的层":
 var toItemIndex=itemNo-1;
 var onItemIndex=itemNo-1;
 var runtimes=0;  //"runtimes"用于记录层移动次数
  //菜单标题被点击时调用这个函数：
 function changeItem(clickItemIndex){
    //判断相应的层应上移还是下移：
   toItemIndex=clickItemIndex;
   if(toItemIndex-onItemIndex>0) moveUp(); else moveDown();
    //一定的时间间隔后继续移动，直到移了设定的步数stepNo: 
   runtimes++;
   if(runtimes>=stepNo){
     onItemIndex=toItemIndex;
     runtimes=0;}
   else
     setTimeout("changeItem(toItemIndex)",10);
 }
  //相应菜单上移：
 function moveUp(){
    //判断应一起上移的菜单，并让它(们)每次移动contentHeight/stepNo的距离：
   for(i=onItemIndex+1;i<=toItemIndex;i++)
     eval('document.all.item'+i+'.style.top=
parseInt(document.all.item'+i+'.style.top)-contentHeight/stepNo;');
 }
  //相应菜单下移：
 function moveDown(){
   for(i=onItemIndex;i>toItemIndex;i--)
     eval('document.all.item'+i+'.style.top=
parseInt(document.all.item'+i+'.style.top)+contentHeight/stepNo;');
 }
 changeItem(0); //把第一个菜单作为默认显示
 //-->
</script>