javascript滑动菜单制作

     下面是用javascript制作的滑动菜单效果，其实在显示的页面就是只用了一个Label控件，HTML代码都是自动生成的。


javascript的代码：

function showme(obj1, obj2)

{

    if (moving)

        return;

    moving = true;

    for(i=0;i<document.all.tags('td').length;i++)

        if (document.all.tags('td')[i].className.indexOf('headtd') == 0)

            document.all.tags('td')[i].className = 'headtd1';

    obj2.className = 'headtd2';

    moveme(obj1);

}

function moveme(obj)

{

    idnumber = parseInt(obj.id.substr(4));

    objtop = headHeight * (idnumber - 1);

    objbuttom = bodyHeight + headHeight * (idnumber - 2);

    currenttop = parseInt(obj.style.top);

    if (currenttop >= objbuttom)

    {

        countid = 1;

        for(i=0;i<document.all.tags('div').length;i++)

            if (document.all.tags('div')[i].id == 'item'+countid+'body')

            {

                obj = document.all.tags('div')[i];

                objtop = headHeight * (countid - 1);

                if (countid == idnumber)

                {

                    moveup(obj,objtop,false);

                    break;

                }

                else

                    moveup(obj,objtop,true);

                countid++;

            }

    }

    else if ((currenttop <= objtop) && (idnumber < objcount))

    {

        idnumber++;

        countid = objcount;

        for(i=document.all.tags('div').length-1;i>=0;i--)

            if (document.all.tags('div')[i].id == 'item'+countid+'body')

            {

                obj = document.all.tags('div')[i];

                objbuttom = bodyHeight + headHeight * (countid - 2);

                if (countid == idnumber)

                {

                    movedown(obj,objbuttom,false);

                    break;

                }

                else

                    movedown(obj,objbuttom,true);

                countid--;

            }

    }

}

function moveup(obj,objtop,ismove)

{

    currenttop = parseInt(obj.style.top);

    if (currenttop > objtop)

    {

        obj.style.top = currenttop - step;

        setTimeout('moveup('+obj.id+','+objtop+','+ismove+')',1)

        return;

    }

    moving = ismove;

}

function movedown(obj,objbuttom,ismove)

{

    currenttop = parseInt(obj.style.top);

    if (currenttop < objbuttom)

    {

        obj.style.top = currenttop + step;

        setTimeout('movedown('+obj.id+','+objbuttom+','+ismove+')',1)

        return;

    }

    moving = ismove;

}

组织菜单的代码：

   菜单#region 菜单
            UserModelBLL usermodel = new UserModelBLL();
            DataTable ModelInfo = new DataTable();
            ModelInfo = usermodel.SelectUserModel(UserName);  //用户可显示的菜单
            this.Label2.Text = "<font color='red'>&nbsp;<b>" + UserName + "</b></font><b>&nbsp;欢迎光临</b>";
            string TempMode = string.Empty;
            int ObjCount = 0;//菜单数量
            //int TotalCount = 0;
            foreach (DataRow row in ModelInfo.Rows)
            {
                if (!TempMode.Equals(row["ParentName"].ToString().Trim()))
                    ObjCount++;   //判断主菜单的数量，因为主菜单和分菜单是在同一个表里
                TempMode = row["ParentName"].ToString().Trim();
            }
            if (ModelInfo.Rows.Count > 0)
            {
                int menutop = 222;//一个菜单总体的高度
                int menuheight = 30;//头的高度
                int step = 10;//每次移动的距离
                int fatherdivleft = 3;//父div的位置
                int fatherdivtop = 105;
                int fatherdivwidth = 159;
                int childmenuheight = 24;//子菜单的高度
                int DivHeght = (ObjCount - 1) * menuheight + menutop;//总体的高度

                string LastModel = string.Empty;
                string MenuStr = string.Empty;
                MenuStr += "<script language='JavaScript'>";
                MenuStr += "var headHeight = " + menuheight.ToString() + ";var bodyHeight = " + menutop.ToString() + ";var objcount = " + (ObjCount + 1).ToString() + ";var step = " + step.ToString() + ";var moving = false;";
                MenuStr += "</script>";
                MenuStr += "<script language='javascript' src='js/mainleftmenu.js' type='text/javascript'></script>";
                MenuStr += "<div id='mainboard'  style='position: absolute; left: " + fatherdivleft.ToString() + "; top: " + fatherdivtop.ToString() + "; width: " + fatherdivwidth.ToString() + "; height:" + DivHeght.ToString() + "; z-index: 1; overflow: hidden; background: #F6F9FD;'>";
                int ItemCount = 1;
                int index = 1;//子菜单的个数
                int zindex = 2;//Z-index
                int childmenutdheight = 20;//子菜单TD的高度

                foreach (DataRow row in ModelInfo.Rows)
                {
                    if (LastModel.Equals(string.Empty))
                    {
                        MenuStr += "<div id='item" + ItemCount.ToString() + "body' style='position: absolute; left: 0; top: 0; width: " + fatherdivwidth.ToString() + "; height: " + menutop.ToString() + ";";
                        MenuStr += "z-index: " + zindex.ToString() + "; overflow: hidden'>";
                        MenuStr += "<table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'>";
                        MenuStr += "<tr>";
                        MenuStr += "<td height='" + childmenuheight.ToString() + "' align='center' class='headtd2' id='item" + ItemCount.ToString() + "head' onclick='showme(item" + ItemCount.ToString() + "body,this)'>";
                        MenuStr += "<div align='left'>";
                        MenuStr += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + row["ParentName"].ToString() + "</div>";
                        MenuStr += "</td>";
                        MenuStr += "</tr>";
                        MenuStr += "<tr>";
                        MenuStr += "<td class='bodytd2' valign='top'>";
                        MenuStr += "<table width='100%' border='0'>";
                    }
                    else
                    {
                        if (!LastModel.Equals(row["ParentName"].ToString().Trim()))  //说明是子菜单，因为是按父菜单排的序，上下不同说明不是同一个菜单了。
                        {
                            zindex++;
                            ItemCount++;

                            MenuStr += "</table>";
                            MenuStr += "</td>";
                            MenuStr += "</tr>";
                            MenuStr += "</table>";
                            MenuStr += "</div>";
                            MenuStr += "<div id='item" + ItemCount.ToString() + "body' style='position: absolute; left: 0; top: " + menutop.ToString() + "; width: 148px; height: " + menutop.ToString() + ";z-index: " + zindex.ToString() + "; overflow: hidden'>";
                            MenuStr += "<table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'>";
                            MenuStr += "<tr>";
                            MenuStr += "<td height='" + childmenuheight.ToString() + "' align='center' class='headtd1' id='item" + ItemCount.ToString() + "head' onclick='showme(item" + ItemCount.ToString() + "body,this)' style='width: " + fatherdivwidth.ToString() + "'>";
                            MenuStr += "<div align='left'>";
                            MenuStr += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; " + row["ParentName"].ToString() + "</div>";
                            MenuStr += "</td>";
                            MenuStr += "</tr>";
                            MenuStr += "<tr>";
                            MenuStr += "<td class='bodytd2' align='center' style='width: " + fatherdivwidth.ToString() + "'>";
                            MenuStr += "<table width='100%' border='0'>";

                            menutop += menuheight;

                        }
                    }

                    MenuStr += "<tr>";
                    MenuStr += "<td class='bodytd' style='vertical-align: middle; height: " + childmenutdheight.ToString() + ";' id='s" + index.ToString() + "'>";
                    //MenuStr += "&nbsp;&nbsp;&nbsp;<img src='images/folder.gif' width='16' height='14'> <a href='#' onclick=show('" + row["ModelPath"].ToString().Trim().Trim() + "',s" + index.ToString() + ")>";
                    MenuStr += "&nbsp;&nbsp;&nbsp;<img src='images/folder.gif' width='16' height='14'> <a href='#' onclick=show('" + row["ModelPath"].ToString().Trim().Trim() + "',s" + index.ToString() + ")>";
                    MenuStr += row["ModelName"].ToString() + "</a></td>";
                    MenuStr += "</tr>";
                    index++;
                    LastModel = row["ParentName"].ToString();
                }

                zindex++;
                ItemCount++;
                MenuStr += "</table>";
                MenuStr += "</td>";
                MenuStr += "</tr>";
                MenuStr += "</table>";
                MenuStr += "</div>";
                MenuStr += "<div id='item" + ItemCount.ToString() + "body' style='visibility:hidden;position: absolute; left: 0; top: " + menutop.ToString() + "; width: 148px; height: 202px;z-index: " + zindex.ToString() + "; overflow: hidden'>";
                MenuStr += "<table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'>";
                MenuStr += "<tr>";
                MenuStr += "<td height='" + childmenuheight.ToString() + "' align='center' class='headtd1' id='item" + ItemCount.ToString() + "head' onclick='showme(item" + ItemCount.ToString() + "body,this)' style='width: " + fatherdivwidth.ToString() + "'>";
                MenuStr += "垫底得</td>";  //可能是javascript代码有误，经常是最下面的一个显示不出，所以弄了垫底的，哈哈
                MenuStr += "</tr>";
                MenuStr += "<tr>";
                MenuStr += "<td class='bodytd' align='center' style='width: " + fatherdivwidth.ToString() + "px'>";
                MenuStr += "test</td>";
                MenuStr += "</tr>";
                MenuStr += "</table>";
                MenuStr += "</div>";
                MenuStr += "</div>";
                this.Label1.Text = MenuStr;                
                //Response.Write(MenuStr);
                //this.Label1.Text = "ok";
            }

            #endregion