页面结构用前端实现如下
代码:
<div class="Area">
  <div id="menu1" class="main_tit">
    <h2><a href="">IamUed.com-前端开发</a></h2>
    <ul  class="sublist">
        <li><a href="">javascript</a></li>
        <li><a href="">Ria</a></li>
        <li><a href="">ActionScript</a></li>
        <li><a href="">Flash</a></li>
        <li><a href="">FLex</a></li>
        <li><a href="">W3C</a></li>
        <li><a href="">xhtml</a></li>
    </ul>
  </div>
  一级内具体内容
</div>
可以看到 对于程序输出来讲 这样的结构不需要任何逻辑 相对代码结构清晰整洁
核心JS代码如下
复制内容到剪贴板代码:
//核心方法 传送一个数组参数 
function submenumore(menuarr) 
{ 
    for(var j=0;j<menuarr.length;j++)//循环该数组
    { 
        var listli=document.getElementById(menuarr[j]).getElementsByTagName("ul")[0].getElementsByTagName("li");//根据数组获取到该子菜单的li 
        if(listli.length > 5)//如果子菜单数量大于5 
        { 
            var newimg=document.createElement("a");//新建一个a元素 作为大于5个之后显示的小图标容器 
            newimg.className="moreimg";//给a元素设置一个样式 
            newimg.onmouseover=function()//绑定事件 主要用于显示之后的子菜单 这里不多做解释 
            { 
                showsubmore(this); 
            } 
            newimg.onmouseout=function()//绑定事件 主要用于隐藏之后的子菜单 这里不多做解释 
            { 
                hidesubmore(this); 
            } 
            var newul=document.createElement("ul");//新建一个Ul元素 用来存档多余的子菜单 
            newul.className="sublistmore";//给新的UL设置样式 
            for(var i=5;i
            { 
                newul.appendChild(listli[i]);//将其余的子菜单 添加到这个新的有序列表里 
                i--; 
            } 
            newul.onmouseover=function()//绑定事件 主要用于显示之后的子菜单 这里不多做解释 
            { 
                this.style.display="block"
            } 
            newul.onmouseout=function()//绑定事件 主要用于隐藏之后的子菜单 这里不多做解释 
            { 
                this.style.display="none"
            } 
            var imgli=document.createElement("li");//新建一个li元素 
            imgli.appendChild(newimg);//将之前建立的A元素 添加到这里 为了页面结构统一 可以比较好的调整样式 
            document.getElementById(menuarr[j]).getElementsByTagName("ul")[0].insertBefore(imgli,null);//将新建的LI插入到5个子菜单后面 
            document.getElementById(menuarr[j]).appendChild(newul);//将多余子菜单加入到数组所传的容器内 
        } 
    } 
}
这里要解释一个地方
复制内容到剪贴板代码:
for(var i=5;i<listli.length;i++) 
{ 
    newul.appendChild(listli[i]);//将其余的子菜单 添加到这个新的有序列表里 
    i--; 
}
这里为什么要i–呢
由于读取出来的是一个引用对象
所以将之前数组内对象 添加到新的 对象里
之前的数组length将-1
所以将i–以获得之前数组的连贯对象
在代码中用到了2个之前收集的方法 主要是为了兼容各种浏览器
复制内容到剪贴板代码:
//该函数主要取得对象距离浏览器的真实距离Offset 
function GetRealOffset(o) 
{ 
    var elem = o; 
    var leftOffset = elem.offsetLeft; 
    var topOffset = elem.offsetTop; 
    var parent = elem.offsetParent; 
    while(parent) 
    { 
        leftOffset += parent.offsetLeft; 
        topOffset += parent.offsetTop; 
        parent = parent.offsetParent; 
    } 
    var Offsets = new Object(); 
    Offsets.top = topOffset; 
    Offsets.left = leftOffset; 
    return Offsets; 
} 
//该函数主要用于取得元素的兄弟节点 由于火狐下兄弟节点将TextNode也计算在内 所以用该函数兼容 
function getnextSibling(o) 
{ 
    do
    { 
        o = o.nextSibling; 
    } 
    while (o.nodeType != 1) 
    return o; 
}
其他的更多的是页面样式的问题 不做过多解释了