求高手 - 类似QQ的js菜单 ？

http://singlepine.cnblogs.com/articles/260219.html

解决方案 »

  1.   

    <style type="text/css">
      .titleStyle{
          background-color:#6699CC;color:#ffffff;
          border-top:1px solid #FFFFFF;font-size:9pt;cursor:hand;
      }
      .contentStyle{
          background-color:#efefef;color:blue;font-size:9pt;
      }
    </style>
    </HEAD>
    <BODY>
    <SCRIPT LANGUAGE=javascript>
    <!--var mMenu=new Array()var headHeight = 22;//每个标题的高度
    var bodyHeight = 260;//母体高度
    var objcount = 6;//项目的个数，要改变了项目的个数别忘了该这个东西
    var step = 6;//移动速度(请确认可以被'bodyHeight-headHeight'整除,当前的设定可选速度为1,2,3,6,23,138)
    var moving = false;//是否有移动的项目
    var layerTop=50;       //菜单顶边距
    var layerLeft=50;      //菜单左边距
    var layerWidth=140;    //菜单总宽度
    var titleHeight=20;    //标题栏高度
    var contentHeight=200; //内容区高度
    var stepNo=1;         //移动步数，数值越大移动越慢
    var itemNo=0;
    function regsterMenu(menu){
    mMenu[mMenu.length]=menu;
    return mMenu.length-1;
    }function mainMenu(img,capture,hrefurl){
    this.items=new Array();
    this.img=img;
    this.capture=capture;
    this.hrefurl=hrefurl;
    this.id=regsterMenu(this);
    } //img 是作为图标的图像位置//capture 是连接的文字//href是超连接的地址function subMenu(img,capture,hrefurl){
    this.img=img;
    this.capture=capture;
    this.hrefurl=hrefurl;
    }function addSub(item){
    this.items[this.items.length]=item;
    }mainMenu.prototype.addSub=addSub;
    function generateHtml(mmenu){
    var menuHTML="";
    menuHTML+="<span id=itemsLayer style=\"position:absolute;overflow:hidden;border:1px solid #008800;left:'"+layerLeft+"';top:'"+layerTop+"';width:'"+layerWidth+"';\">"
    for(var i=0;i<mmenu.length;i++){
    menuHTML+="<div id=item"+i+" style=\"LEFT: 0px; WIDTH: "+layerWidth+"; POSITION: relative; TOP:-"+contentHeight*i+"px\" itemIndex=\""+i+"\"><TABLE cellSpacing=0 cellPadding=0 width=\"100%\"><TBODY><TR><TD class=titleStyle onclick=changeItem("+i+") align=middle height="+titleHeight+">"+mmenu[i].capture+"</TD></tr>"
    if(mmenu[i].items.length!=0){
    menuHTML+="<TR><TD class=contentStyle height=200><div style=\"overflow:auto;height:200;\">"            
    for(var q=0;q<mmenu[i].items.length;q++){
    menuHTML+="<BR><CENTER>"+mmenu[i].items[q].capture+"</CENTER>"
    }
    menuHTML+="</div></TD></TR>"
    }
    menuHTML+="</TBODY></TABLE></DIV>"
    }
    menuHTML+="</span>"
    return menuHTML;
    }
    var mm1=new mainMenu('#','我的收藏夹','#');
    mm1.addSub(new subMenu('#','娱乐世界','#'));
    mm1.addSub(new subMenu('#','娱乐世界','#'));
    mm2=new mainMenu('#','我的收藏夹','#');
    mm2.addSub(new subMenu('#','娱乐世界','#'));
    mm3=new mainMenu('#','我的收藏夹','#');
    mm3.addSub(new subMenu('#','娱乐世界','#'));
    mm4=new mainMenu('#','我的收藏夹','#');
    mm4.addSub(new subMenu('#','娱乐世界','#'));
    mm4.addSub(new subMenu('#','娱乐世界','#'));
    document.write (generateHtml(mMenu));
    document.all.itemsLayer.style.height =mMenu.length*titleHeight+contentHeight;
    //************************************************************ var toItemIndex=mMenu.length-1;
     var onItemIndex=mMenu.length-1;
     var runtimes=0;  //"runtimes"用于记录层移动次数
      //菜单标题被点击时调用这个函数：
     function changeItem(clickItemIndex){
    //myid.innerText=" "+itemsLayer.outerHTML+" "
        //判断相应的层应上移还是下移：
       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>
      

  2.   

    来一个寒碜点的：<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Menu</title>
    <script language=javascript>
    function showSubmenu(obj)
    {
    for(var i=0;i<submunuTbody.length;i++)
    {
    if(submunuTbody[i]!=obj) submunuTbody[i].style.display="none";
    else submunuTbody[i].style.display="";

    }}
    </script>
    </head><body>
    <table style="width:100%;height:100%">
    <tr style="height:20;background-color:cccccc" onclick="showSubmenu(submunuTbody[0]);" >
      <td>Menu01</td>
    </tr>
    <tbody id=submunuTbody >
    <tr style="height:20;background-color:eeeeee">
      <td>Menu0101</td>
    </tr>
    <tr style="height:20;background-color:eeeeee">
      <td>Menu0102</td>
    </tr>
    <tr style="height:20;background-color:eeeeee">
      <td>Menu0103</td>
    </tr>
    <tr >
      <td></td>
    </tr>
    </tbody><tr style="height:20;background-color:cccccc" onclick="showSubmenu(submunuTbody[1]);"  >
      <td>Menu02</td>
    </tr>
    <tbody id=submunuTbody style="display:none">
    <tr style="height:20;background-color:eeeeee">
      <td>Menu0201</td>
    </tr>
    <tr style="height:20;background-color:eeeeee">
      <td>Menu0202</td>
    </tr>
    <tr style="height:20;background-color:eeeeee">
      <td>Menu0203</td>
    </tr>
    <tr >
      <td></td>
    </tr>
    </tbody><tr style="height:20;background-color:cccccc" onclick="showSubmenu(submunuTbody[2]);"  >
      <td>Menu03</td>
    </tr>
    <tbody id=submunuTbody style="display:none">
    <tr style="height:20;background-color:eeeeee">
      <td>Menu0301</td>
    </tr>
    <tr style="height:20;background-color:eeeeee">
      <td>Menu0302</td>
    </tr>
    <tr style="height:20;background-color:eeeeee">
      <td>Menu0303</td>
    </tr>
    <tr >
      <td></td>
    </tr>
    </tbody><tr style="height:20;background-color:cccccc" onclick="showSubmenu(submunuTbody[3]);"  >
      <td>Menu04</td>
    </tr>
    <tbody id=submunuTbody style="display:none">
    <tr style="height:20;background-color:eeeeee">
      <td>Menu0401</td>
    </tr>
    <tr style="height:20;background-color:eeeeee">
      <td>Menu0402</td>
    </tr>
    <tr style="height:20;background-color:eeeeee">
      <td>Menu0403</td>
    </tr>
    <tr >
      <td></td>
    </tr>
    </tbody><tr style="height:20;background-color:cccccc" onclick="showSubmenu(submunuTbody[4]);"  >
      <td>Menu05</td>
    </tr>
    <tbody id=submunuTbody style="display:none">
    <tr style="height:20;background-color:eeeeee">
      <td>Menu0501</td>
    </tr>
    <tr style="height:20;background-color:eeeeee">
      <td>Menu0502</td>
    </tr>
    <tr style="height:20;background-color:eeeeee">
      <td>Menu0503</td>
    </tr>
    <tr >
      <td></td>
    </tr>
    </tbody></table>
    </body></html>
      

  3.   

    呵呵，JK兄的这个还好啦，BBS管理里边不都这样的么。 ^_^
      

  4.   

    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <title>文件夹一</title>
    </head><body>
    <script language="javascript">
    NS4 = (document.layers) ? 1 : 0;
    IE4 = (document.all) ? 1 : 0;
    ver4 = (NS4 || IE4) ? 1 : 0;if (ver4) {
    with (document) {
    write("<STYLE TYPE='text/css'>");
    if (NS4) {
    write(".parent {position:absolute; visibility:visible}");
    write(".child {position:absolute; visibility:visible}");
    write(".regular {position:absolute; visibility:visible}")
    }
    else {
    write(".child {display:none}")
    }
    write("</STYLE>");
    }
    }function getIndex(el) {
    ind = null;
    for (i=0; i<document.layers.length; i++) {
    whichEl = document.layers[i];
    if (whichEl.id == el) {
    ind = i;
    break;
    }
    }
    return ind;
    }function arrange() {
    nextY = document.layers[firstInd].pageY +document.layers[firstInd].document.height;
    for (i=firstInd+1; i<document.layers.length; i++) {
    whichEl = document.layers[i];
    if (whichEl.visibility != "hide") {
    whichEl.pageY = nextY;
    nextY += whichEl.document.height;
    }
    }
    }function initIt(){
    if (!ver4) return;
    if (NS4) {
    for (i=0; i<document.layers.length; i++) {
    whichEl = document.layers[i];
    if (whichEl.id.indexOf("Child") != -1) whichEl.visibility = "hide";
    }
    arrange();
    }
    else {
    divColl = document.all.tags("DIV");
    for (i=0; i<divColl.length; i++) {
    whichEl = divColl(i);
    if (whichEl.className == "child") whichEl.style.display = "none";
    }
    }
    }function expandIt(el) {
    if (!ver4) return;
    if (IE4) {
    whichEl = eval(el + "Child");
    if (whichEl.style.display == "none") {
    whichEl.style.display = "block";
    }
    else {
    whichEl.style.display = "none";
    }
    }
    else {
    whichEl = eval("document." + el + "Child");
    if (whichEl.visibility == "hide") {
    whichEl.visibility = "show";
    }
    else {
    whichEl.visibility = "hide";
    }
    arrange();
    }
    }
    onload = initIt;
    </script>
    <div id="KB1Parent" class="parent">　　　　<a href="#" onClick="expandIt('KB1'); return false" >文件夹一</a></div>
    <div id="KB1Child" style="display:none">　　　　　<a href="sample.htm" target="_blank" >页面一</a><br>
      　　　　　<a href="sample.htm" target="_blank" >页面二</a><br>
      　　　　　<a href="sample.htm" target="_blank" >页面三</a></div>
    <div id="KB2Parent" class="parent">　　　　<a href="#" onClick="expandIt('KB2'); return false" >文件夹二</a></div>
    <div id="KB2Child" style="display:none">　　　　　<a href="sample.htm" target="_blank" >页面一</a><br>
      　　　　　<a href="sample.htm" target="_blank" >页面二</a><br>
      　　　　　<a href="sample.htm" target="_blank" >页面三</a></div>
    <div id="KB3Parent" class="parent">　　　　<a href="#" onClick="expandIt('KB3'); return false" >文件夹三</a></div>
    <div id="KB3Child" style="display:none"> 　　　　　<a href="sample.htm" target="_blank" >页面一</a><br>
      　　　　　<a href="sample.htm" target="_blank" >页面二</a><br>
      　　　　　<a href="sample.htm" target="_blank" >页面三</a></div>
    <div id="KB4Parent" class="parent">　　　　<a href="#" onClick="expandIt('KB4'); return false" >文件夹四</a></div>
    <div id="KB4Child" style="display:none">　　　　　<a href="sample.htm" target="_blank" >页面一</a><br>
      　　　　　<a href="sample.htm" target="_blank" >页面二</a><br>
      　　　　　<a href="sample.htm" target="_blank" >页面三</a></div>
    <div id="KB5Parent" class="parent">　　　　<a href="#" onClick="expandIt('KB5'); return false" >文件夹五</a></div>
    <div id="KB5Child" style="display:none">　　　　　<a href="sample.htm" target="_blank" >页面一</a><br>
      　　　　　<a href="sample.htm" target="_blank" >页面二</a><br>
      　　　　　<a href="sample.htm" target="_blank" >页面三</a></div>
    <script language="javascript">
    if (NS4) {
    firstEl = "KB1Parent";
    firstInd = getIndex(firstEl);
    arrange();
    }
    </script></body></html>
      

  5.   

    呵呵 上面的代码 firefox 下不能用哦我找到了几个还不错 大家有没有好的都贴出来