html部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Menu</title>
<link href="Menu.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<ul id="Container"></ul>
</body>
</html>
<script language="javascript" type="text/javascript" src="Menu.js"></script>
//--------------------------------------------------------
js部分
Ｍｅｎｕ．ｊｓ
//---------------------------------//
//主题：多级式托盘菜单
//作者：H2j
//QQ：101540778
//最后修改时间：2011年4月8日
//版本：V1.0
//说明：为完成此程序在网上借鉴了一些材料，实在是记不住都是谁的了，
//在这里一并感谢他们的无私贡献。这种精神吾辈将传承下去。
//人人为我，我为人人。
//--------------------------------//
function displaySubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
if(subMenu){
subMenu.style.display = "block";
}else{return false ;}
}
function hideSubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
if(subMenu){
subMenu.style.display = "none";
}else{return false ;}
}
//--------------------------------------------------//
function build_item(){
//用ul元素格式化
if(isArray(this)){ //检查是否为数组对象是就含有子元素，如果没有跳出
//初始化0元素标签
var re_li=document.createElement("li");
re_li.innerHTML=this[0].text.link(this[0].url);
re_li.setAttribute("onmouseover","displaySubMenu(this)");
re_li.setAttribute("onmouseout","hideSubMenu(this)");
if(Container.getElementsByTagName("ul").length<1){
Container.appendChild(re_li);
}else{
// alert( Container.innerHTML);
re_element=document.getElementById(this[0].par_id);
re_element.appendChild(re_li);
}
if(this.length>1){//有子对象
var newul = document.createElement("ul");
newul.id=this[0].id;
var array_reli = Container.getElementsByTagName("li")
array_reli[array_reli.length-1].appendChild(newul);
for(var j=1;j<this.length;j++){//循环显示对象属性
this[j].builditem();//向子集项扫描
}
}
}
return;
}
function show_menu(){
if(root_menu.length>0){//检查root_menu数组是否为空，为空跳出程序.不为空开始从第一个元素扫描
for(var i=0;i<root_menu.length;i++){ //循环显示对象属性
root_menu.builditem();
}
}else{
alert("没有可选择的菜单");
return;
}
}
function isArray(obj){
return (typeof obj=='object')&&obj.constructor==Array;//检测对象类型
}
Array.prototype.builditem = build_item;//添加一个自定义方法
var root_menu = new Array();//root_menu保存类型是数组类型
var re_element = new Array();
//create menu root_item
function data_item(par_id,id,index,text,url){
this.par_id = par_id;//定义父级id
this.id = id;//定义自己的id
this.index = index;//定义索引号
this.text = text;//文本标签
this.url = url;//定义资源连接地址
// this.builditem = build_item;
}
function create_item(par_id,id,index,text,url){
var newnode = new Array();
newnode[0] =new data_item(par_id,id,index,text,url);
return newnode;
}
function add_child(parent_node,child_node){//parent_node：父级节点，child_node：要添加的子级节点
var next_node = parent_node.length;
parent_node[next_node] = child_node;
return child_node;
}
function create_menu(){
var main_node = add_child(root_menu,create_item("Container","root_1",1,"公司简介","#"));
var level1 = add_child(main_node,create_item("root_1","menu_1",1,"组织结构","#"));
var level2 = add_child(main_node,create_item("root_1","menu_2",2,"企业文化","#"));
var level3 = add_child(main_node,create_item("root_1","menu_3",3,"主营业务","#"));
var level1_1 = add_child(level1,create_item("menu_1","submenu_1",1,"领导班子","#"));
var level1_1_1 = add_child(level1_1,create_item("submenu_1","submenu_1_1",1,"董事长","#"));
var level1_1_2 = add_child(level1_1,create_item("submenu_1","submenu_1_2",2,"总经理","#"));
var level1_1_1_1 = add_child(level1_1_1,create_item("submenu_1_1","submenu_1_1_1",1,"张三","#"));
var level1_1_1_2 = add_child(level1_1_1,create_item("submenu_1_1","submenu_1_1_2",2,"王五","#"));
var main_node_1 = add_child(root_menu,create_item("Container","root_2",2,"联系方式","#"));
var main_node_1_1 = add_child(main_node_1,create_item("root_2","root_2_1",1,"电话","#"));
var main_node_1_2 = add_child(main_node_1,create_item("root_2","root_2_2",2,"电子邮箱","#"));
show_menu();
}
create_menu();
//----------------javascript判断对象类型的通用方法-------------------//
/*var is = {types:["Array", "Boolean", "Date", "Number", "Object", "RegExp", "String", "Window", "HTMLDocument"]}
for(var i = 0, c; c = is.types[i ++ ]; ){
is[c] = (function (type){return function (obj){return Object.prototype.toString.call(obj) == "[object " + type + "]"; } })(c);
}
alert(is.Array([])); // true
alert(is.Date(new Date)); // true
alert(is.RegExp(/reg/ig)); // true */
//-----------------------------------------------------
css部分
Menu.css
body {
}
* {
padding:0;
margin:0;
}
body {
font-family:verdana, sans-serif;
font-size:small;
}
#Container, #Container li ul {
list-style-type:none;
}
#Container {
margin:20px;
}
#Container li {
float:left;
text-align:center;
position:relative;
}
#Container li a:link, #Container li a:visited {
display:block;
text-decoration:none;
color:#000;
width:120px;
height:40px;
line-height:40px;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c5dbf2;
padding-left:10px;
}
#Container li a:hover {
color:#fff;
background:#2687eb;
}
#Container li ul li a:hover {
color:#fff;
background:#6b839c;
}
#Container li ul {
display:none;
position:absolute;
top:40px;
left:0;
margin-top:1px;
width:120px;
}
#Container li ul li ul {
display:none;
position:absolute;
top:0px;
left:130px;
margin-top:0;
margin-left:1px;
width:120px;
}
最新评论