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

CSS+JavaScript 实现菜单功能

 2010-09-14 13:37:18 来源:WEB开发网   
核心提示:通过简单的Javascript代码就可以增加菜单,同时使得HTML页面非常简洁,CSS+JavaScript 实现菜单功能,只需要写2行代码即可!O(∩_∩)O1.使用前提,在HTML页面中引入一个CSS文件,和一个JavaScript文件,如下:<!DOCTYPE HTML PUBLIC &qu

通过简单的Javascript代码就可以增加菜单。同时使得HTML页面非常简洁,只需要写2行代码即可!O(∩_∩)O

1.使用前提,在HTML页面中引入一个CSS文件,和一个JavaScript文件。如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <TITLE>Menu</TITLE>
    <link type="text/css" rel="stylesheet" href="menu.css"> 
  </HEAD>
  <BODY>
    <div><script src="menu.js"></script></div>
  </BODY>
</HTML>

引入CSS文件:<link type="text/css" rel="stylesheet" href="menu.css"> ,menu.css代码见后

引入JavaScript文件:<script src="menu.js"></script>

2.定义菜单代码如下:

if (document.getElementById){
  var root = new Root(); 
  var m1 = new Menu("File","alert(this.innerText);");
  root.add(m1);
  var m11 = new MenuItem("New");
  m1.add(m11);
  m1.add(new MenuItem("Open","alert('open file');"));
  var m12 = new MenuItem("Save");
  m1.add(m12);
  m1.add(new MenuItem("Save As"));
  m1.add(new MenuItem("Close"));
  m1.add(new MenuItem(""));
  var m2 = new Menu("Edit");
  root.add(m2);
  root.toString();  
}

1 2 3  下一页

Tags:CSS JavaScript 实现

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