自编一个简单的Web菜单_web菜单怎么写-CSDN博客

本文链接：https://blog.csdn.net/treeclimber/article/details/4775935

效果：在frameset中Banner菜单＋左边平滑菜单。

测试页面：

abc.appendChild(menu.object);
</script>

－－－－－－－－－－下面是js代码------------------------------------------

    tr = this.object.insertRow(-1);
    td = $(tr.insertCell(-1));
    td.addClassName("menuItem-separator");
    if (parentId != undefined){
        td.parentId = parentId;
        tr.style.display = "none";
    }
}
PlainMenu.prototype.addBanner=function(_id,text,layer){
    var td = this.object.insertRow(-1).insertCell(-1);
    td = $(td).update(text);
    td.setAttribute("id", _id);
    td.addClassName("plain-menuBanner");
    td.menu = this;
    td.expand = false;
    td.layer =layer;
    td.observe("click", function(event){
        this.menu.expand(_id);
        this.menu.alterFocusItem(_id);
    });
}
PlainMenu.prototype.getChildren=function(parentId){
    var target = new Array();
    var trObjs = this.object.rows;
    for (var i=0,len=trObjs.length; i<len; i++){
        var td = $(trObjs[i].cells[0]);
        if (td.parentId == parentId){
            target.push(trObjs[i]);
        }
    }
    return target;
}
PlainMenu.prototype.alterFocusItem=function(_id){
    if (this.itemId != _id){
        var prevItem = $(this.itemId);
        var item = $(_id);
        var isBanner = item.classNames().include("plain-menuBanner");
        if (prevItem != null){
            var children = prevItem.immediateDescendants();
            if (prevItem.classNames().include("plain-menuBanner")){
                if (isBanner){
                    this.expand(this.itemId);
                }
            }else{
                children[0].className = "plain-menuItem";
                children[1].src = this.item_icon1;
                if (prevItem.parentId && isBanner){
                    this.expand(prevItem.parentId);
                }
            }
        }
        if (isBanner){

        }else{
            var children = item.immediateDescendants();
            children[0].className = "focus-plain-menuItem";
            children[1].src = this.item_icon2;
        }
        this.itemId = _id;
    }
}
PlainMenu.prototype.expand=function(_id){
    var children = this.getChildren(_id);
    var expand = !$(_id).expand;
    $(_id).expand = expand;
    for (var i=0,len=children.length; i<len; i++){
        children[i].style.display = (expand) ? "inline" : "none";
    }
}

var scroll_timer;
function SlideMenu(id){
    this.object = new Element("DIV",{"id":id});
    this.object.addClassName("slide-menu");
    this.object.insert({top: '<span class="menu-arrow" title="Slide Left" οnclick="scrollShortMenu(-1)"><<</span>'});
    this.object.insert({bottom: '<div style="display:inline"></div>'});
    this.object.insert({bottom: '<span class="menu-arrow" title="Slide Right" οnclick="scrollShortMenu(1)">>></span>'});
};
SlideMenu.prototype.setTarget=function(frame){
    this.target = frame;
}
SlideMenu.prototype.addItem=function(_id,text,href,icon){
    var slide_div = this.object.descendants()[1];
    slide_div.insert({bottom: '<span class="spanItem"></span>'});
    if (icon){ slide_div.insert({bottom: '<img src="'+icon+'">'}); }
    if (text.length < 5){
        text += " ";
    }
    var elt = new Element("SPAN", {"id":_id}).update(" "+text+" ");
    elt.addClassName("slide-menuItem");
    slide_div.insert({bottom: elt});

    elt.menu = this;
    elt.observe("click", function(event){
        this.className = "focus-slide-menuItem";
        this.previousSiblings()[0].className = "focus-spanItem";
        var prevItem = $(this.menu.itemId);
        if (prevItem!=null && prevItem!=this){
            prevItem.className = "slide-menuItem";
            prevItem.previousSiblings()[0].className = "spanItem";
        }
        this.menu.itemId = _id;
        eval(this.menu.target).location = href;
    });
};
function scrollShortMenu(arrow){
   if (shortMenu.scrollLeft>=0 && parseInt(arrow) < 0){   //to left
      shortMenu.scrollLeft -= 5;
   }else{   // to right
      shortMenu.scrollLeft += 5;
   }
   if (shortMenu.scrollLeft >= shortMenu.scrollWidth - 600 || shortMenu.scrollLeft<=0){
      stopScroll();
   }
   scroll_timer = window.setTimeout("scrollShortMenu("+arrow+")",50);
}
function stopScroll(){
   window.clearTimeout(scroll_timer);
}