WEB开发网
开发学院网页设计JavaScript CSS+JavaScript 实现菜单功能 阅读

CSS+JavaScript 实现菜单功能

 2010-09-14 13:37:18 来源:WEB开发网   
核心提示: 说明:1) var root = new Root();root.toString();固定格式2)声明菜单:var m1 = new Menu("File","alert(this.innerText);");菜单显示的名称为“File

说明:

1) var root = new Root();   

root.toString(); 

固定格式

2)声明菜单:

var m1 = new Menu("File","alert(this.innerText);");

菜单显示的名称为“File”,onclick事件为alert(this.innerText);

root.add(m1);

第一级菜单(即页面初始显示的菜单)放到root之下,通过add()方法

var m11 = new MenuItem("New"");

m1.add(m11);

声明“File”的子菜单“New”

m1.add(new MenuItem("Open","alert('open file');"));

声明“File”的子菜单“Open”

通过上面的代码即可完成菜单的添加功能。

代码文件:

<1> menu.cs

#menubar {}{ 
  font-family:verdana; 
  font-size:12px;       
  margin:1px; 
} 
#menubar li {}{ 
  float:left; 
  position:relative;        
  text-align:left; 
}    
/**//* each menu item style */ 
#menubar li a {}{ 
  border-style:none; 
  color:black; 
  display:block;              
  width:150px; 
  height:20px; 
  line-height:20px; 
  padding-left:10px; 
  text-decoration:none;  
} 
/**//* the first level menu which displays default */ 
#menubar .menuMain{}{ 
  border-color:#C0C0C0; 
  border-width:1px; 
  border-style:solid; 
} 
/**//* the first leve style when mouse on it */ 
#menubar li a:hover{}{ 
  background-color:#efefef; 
  text-decoration:underline; 
} 
/**//* the second level menu block style */ 
#menubar li ul{}{ 
  background-color:#efefef; 
  border-style:none; 
  display:none; 
  position:absolute; 
  top:20px; 
  left:-40px; 
  margin-top:2px; 
  width:150px;       
} 
/**//* the sub menu item style when mouse on it */ 
#menubar li ul li a:hover {}{ 
  text-decoration:underline; 
  padding-left:20px; 
} 
/**//* the third or more level menu block style */ 
#menubar li ul li ul {}{ 
  display:none; 
  position:absolute; 
  top:0px; 
  left:150px; 
  margin-top:0; 
  margin-left:0; 
  width:150px; 
}

Tags:CSS JavaScript 实现

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接