学步园

  我们先来看看最终效果：http://www.orfeo-casa/index.aspx 左边的菜单

主要的JAVASCRIPT：

<script type="text/javascript">

//<![CDATA[
window.onload = function() {
rolinTab("rolin")
}
function rolinTab(obj) {
var list = $$(obj).getElementsByTagName("LI");
var state = {show:false,hidden:false,showObj:false};

for (var i=0; i<list.length; i++) {
var tmp = new rolinItem(list[i],state);
if (i == 0) tmp.pShow();
}
}

function rolinItem(obj,state) {
var speed = 0.0666;
var range = 1;
var interval;
var tarH;
var tar = this;
var head = getFirstChild(obj);
var content = getNextChild(head);
var isOpen = false;
this.pHidden = function() {
if (isOpen) hidden();
}
this.pShow = show;

var baseH = content.offsetHeight;
content.style.display = "none";
var isOpen = false;

head.onmouseover = function() {
this.style.background = "#000";
}

head.onmouseout = mouseout;

head.onclick = function() {
this.style.background = "#000";
if (!state.show && !state.hidden) {
if (!isOpen) {
head.onmouseout = null;
show();
} else {
hidden();
}

}
}

function mouseout() {
this.style.background = "#000"
}
function show() {
head.style.borderBottom = "1px solid #DADADA";
state.show = true;
if (state.openObj && state.openObj != tar ) {
state.openObj.pHidden();
}
content.style.height = "0px";
content.style.display = "block";
content.style.overflow = "hidden";
state.openObj = tar;
tarH = baseH;

interval = setInterval(move,10);
}
function showS() {
isOpen = true;
state.show = false;
}

function hidden() {
state.hidden = true;
tarH = 0;
interval = setInterval(move,10);
}

function hiddenS() {
head.style.borderBottom = "none";
head.onmouseout = mouseout;
head.onmouseout();
content.style.display = "none";
isOpen = false;
state.hidden = false;
}

function move() {
var dist = (tarH - content.style.height.pxToNum())*speed;
if (Math.abs(dist) < 1) dist = dist > 0 ? 1: -1;
content.style.height = (content.style.height.pxToNum() + dist) + "px";
if (Math.abs(content.style.height.pxToNum() - tarH) <= range ) {
clearInterval(interval);
content.style.height = tarH + "px";
if (tarH != 0) {
showS()
} else {
hiddenS();
}
}
}

}
var $$ = function($$) {return document.getElementById($$)};
String.prototype.pxToNum = function() {return Number(this.replace("px",""))}
function getFirstChild(obj) {
var result = obj.firstChild;
while (!result.tagName) {
result = result.nextSibling;
}
return result;
}
function getNextChild(obj) {
var result = obj.nextSibling;
while (!result.tagName) {
result = result.nextSibling;
}
return result;
}
//]]>

</script>

第二步：下面我详细介绍下怎么样动态生成菜单：

HTML部分：

 <div id="Left">  
           <asp:Literal ID="ltaCategory" runat="server"></asp:Literal>
      </div>

CODE:

  protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            this.ltaCategory.Text = GetCategory();
        }
    }

/// <summary>
    /// 获取产品分类
    /// </summary>
    /// <returns></returns>
    public string GetCategory()
    {
        Maticsoft.BLL.productclass bll = new Maticsoft.BLL.productclass();
        List<Maticsoft.Model.productclass> list = Maticsoft.BLL.productclass.get_List();
        StringBuilder strResult = new StringBuilder();
        strResult.AppendLine("<ul class=\"rolinList\" id=\"rolin\">");
        if (list.Count > 0)
        {   
            foreach (Maticsoft.Model.productclass model in list)
            {
                strResult.AppendLine("<li>");
                strResult.Append(string.Format("<h2>{0}</h2>",model.productname));
                strResult.AppendLine("<div class=\"content\">");
                strResult.AppendLine(GetChildCategory(model.id.ToString()));
                strResult.AppendLine("</div>");
            }
        }
        strResult.AppendLine("</ul>");
        return strResult.ToString();
    }
    string  GetChildCategory(string ParentID)
    {
        List<Maticsoft.Model.productclass> list = Maticsoft.BLL.productclass.get_List(ParentID);
        StringBuilder strResult = new StringBuilder();
        if (list.Count > 0)
        {
            foreach (Maticsoft.Model.productclass model in list)
            {
                strResult.AppendLine(string.Format("<a href=\"/List.aspx?cid={0}&action=bind\">{1}</a><br/>", model.id, model.productname));
            }
        }
        return strResult.ToString();
    }