没有人用过吗,哪有谁能提供一个很COOL的QQ菜单(网页用)呢,要有图标的,容易修改的,在线等,急!

解决方案 »

  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>
      然后在<BODY>模块中加入以下Javascript代码:
    <script language="JavaScript">
    var layerTop=50;    //菜单顶边距
    var layerLeft=50;   //菜单左边距
    var layerWidth=140;  //菜单总宽度
    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><center>大家好!</center>');
    addItem('技术文章','<center><a href="#">项目</a> <BR><BR><a href="#">项目</a><BR><BR><a href="#">项目</a><BR><BR><a href="#">更多..</a></center>');
    addItem('script库','<center><a href="#">项目</a> <BR><BR><a href="#">项目</a><BR><BR><a href="#">项目</a> <BR><BR><a href="#">更多..</a></center>');
    addItem('actionscript库','<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('精品赏析','<center><a href="#">设计精品</a></center>');
    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>
      

  2.   

    楼上的,这个我试过,但他对contentHeight=200; //内容区高度有限制,修改起来不方便,有更好的吗!