CSS+JavaScript 实现菜单功能--改进版

最新推荐文章于 2022-03-03 20:45:47 发布
最新推荐文章于 2022-03-03 20:45:47 发布
阅读量1.5k 收藏 1
点赞数
分类专栏： 【06】SourceCode 【01】JavaScript 文章标签： javascript css stylesheet string function file
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/majianan/article/details/3477388
版权

CSS+JavaScript 实现菜单功能--改进版

马嘉楠   2008-12-08

共同学习，欢迎转载。转载请注明地址【http://blog.csdn.net/majianan/archive/2008/12/08/3477388.aspx】，谢谢！

 

在上一篇《CSS+JavaScript 实现菜单功能》通过一个HTML页面简单的实现了菜单功能。但是实际开发当中，如果菜单栏有很多项，频繁的修改HTML，会很繁琐，也容易出错。

改进版本优化了这个问题，通过简单的Javascript代码就可以增加菜单。同时使得HTML页面非常简洁，只需要写2行代码即可！O(∩_∩)O

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

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3.     <HEAD>
  4.         <TITLE>Menu</TITLE>
  5.         <link type="text/css" rel="stylesheet" href="menu.css">  
  6.     </HEAD>
  7.     <BODY>
  8.         <div><script src="menu.js"></script></div>
  9.     </BODY>
  10. </HTML>

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

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

 

2.定义菜单代码如下：

  1. if (document.getElementById){
  2.     var root = new Root();  
  3.     
  4.     var m1 = new Menu("File","alert(this.innerText);");
  5.     root.add(m1);
  6.     var m11 = new MenuItem("New");
  7.     m1.add(m11);
  8.     m1.add(new MenuItem("Open","alert('open file');"));
  9.     var m12 = new MenuItem("Save");
  10.     m1.add(m12);
  11.     m1.add(new MenuItem("Save As"));
  12.     m1.add(new MenuItem("Close"));
  13.     m1.add(new MenuItem(""));
  14.     
  15.     var m2 = new Menu("Edit");
  16.     root.add(m2);
  17.     
  18.     root.toString();    
  19. }

说明：

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.css

  1. #menubar { 
  2.     font-family:verdana; 
  3.     font-size:12px;              
  4.     margin:1px; 
  5. } 
  6. #menubar li { 
  7.     float:left; 
  8.     position:relative;               
  9.     text-align:left; 
  10. }        
  11. /* each menu item style */ 
  12. #menubar li a { 
  13.     border-style:none; 
  14.     color:black; 
  15.     display:block;                           
  16.     width:150px; 
  17.     height:20px; 
  18.     line-height:20px; 
  19.     padding-left:10px; 
  20.     text-decoration:none;    
  21. } 
  22. /* the first level menu which displays default */ 
  23. #menubar .menuMain{ 
  24.     border-color:#C0C0C0; 
  25.     border-width:1px; 
  26.     border-style:solid; 
  27. } 
  28. /* the first leve style when mouse on it */ 
  29. #menubar li a:hover{ 
  30.     background-color:#efefef;  
  31.     text-decoration:underline; 
  32. } 
  33. /* the second level menu block style */ 
  34. #menubar li ul{ 
  35.     background-color:#efefef; 
  36.     border-style:none; 
  37.     display:none; 
  38.     position:absolute; 
  39.     top:20px; 
  40.     left:-40px; 
  41.     margin-top:2px; 
  42.     width:150px;             
  43. } 
  44. /* the sub menu item style when mouse on it */ 
  45. #menubar li ul li a:hover { 
  46.     text-decoration:underline;  
  47.     padding-left:20px;  
  48. } 
  49. /* the third or more level menu block style */ 
  50. #menubar li ul li ul { 
  51.     display:none; 
  52.     position:absolute; 
  53.     top:0px; 
  54.     left:150px;  
  55.     margin-top:0; 
  56.     margin-left:0; 
  57.     width:150px; 
  58. }  

<2>menu.js

  1. var MenuConfig = {
  2.     defaultText : "Menu Item",
  3.     defaultAction : "javascript:void(0);"   ,
  4.     defaultMenuCssStyle : "menuMain"
  5. };
  7. var MenuHandler = {
  8.     idCounter : 0,
  9.     idPrefix : "menu-",
  10.     getId : function(){ return this.idPrefix + this.idCounter++ ;},
  11.     insertHTMLBeforeEnd : function(node, sHTML){
  12.         if(node.insertAdjacentHTML != null){
  13.             node.insertAdjacentHTML('BeforeEnd',sHTML);
  14.             return;
  15.         }
  16.         var df; // DocumentFragment
  17.         var r = node.ownerDocument.createRange();
  18.         r.selectNodeContents(node);
  19.         r.collapse(false);
  20.         df = r.createContextualFragment(sHTML);
  21.         node.appendChild(df);
  22.     }
  23. }
  25. function displaySubMenu(li){ 
  26.     var subMenu = li.getElementsByTagName('ul')[0]; 
  27.     if(subMenu)
  28.         subMenu.style.display = 'block'; 
  29. } 
  31. function hideSubMenu(li){ 
  32.     var subMenu = li.getElementsByTagName('ul')[0];   
  33.     if(subMenu)
  34.         subMenu.style.display = 'none'; 
  35. }  
  38. /******************************************
  39.  * Funciont Name:   MenuAbstractNode
  40.  * Description： MenuAbstractNode class
  41.  * @param {String} pText 
  42.  * @param {String} pAction 
  43.  * @Return：
  44.  *******************************************/ 
  45. function MenuAbstractNode(pText, pAction){
  46.     this.text = pText || MenuConfig.defaultText;    
  47.     this.action = pAction || MenuConfig.defaultAction;
  48.     this.id = MenuHandler.getId();
  49.     
  50.     this.childNodes = [];
  51. }
  53. MenuAbstractNode.prototype.add = function(node){
  54.     this.childNodes[this.childNodes.length] = node;
  55. }
  57. /******************************************
  58.  * Funciont Name:   toString
  59.  * Description： generate HTML code
  60.  * @param  
  61.  * @param 
  62.  * @Return：
  63.  *******************************************/
  64. MenuAbstractNode.prototype.toString = function(){   
  65.     var str = "<li id=/"" + this.id + "/" οnmοuseοver=/"displaySubMenu(this)/" οnmοuseοut=/"hideSubMenu(this)/"><a href=/"#/"";
  67.     if(this.type=="Menu"){
  68.         str = str + " class=/"" + this.cssStyle + "/"";
  69.     }
  70.     str = str + " οnclick=/""+this.action+"/">"+this.text+"</a>";
  71.     
  72.     var sb = [];
  74.     for (var i = 0; i < this.childNodes.length; i++) {
  75.         sb[i] = this.childNodes[i].toString();
  76.     }
  77.     if(sb.length>0){
  78.         str = str + "<ul>" + sb.join("") + "</ul>"
  79.     }
  81.     return str + "</li>" ;
  82. }
  84. /******************************************
  85.  * Funciont Name:   Menu
  86.  * Description： Menu class
  87.  * @param {String} pText 
  88.  * @param {String} pAction 
  89.  * @param {String} pCssStyle 
  90.  * @Return：
  91.  *******************************************/ 
  92. function Menu(pText, pAction,pCssStyle){
  93.     this.base = MenuAbstractNode;
  94.     this.base(pText,pAction);
  95.     
  96.     this.type = "Menu";
  97.     this.cssStyle = pCssStyle || MenuConfig.defaultMenuCssStyle;
  98. }
  100. Menu.prototype = new MenuAbstractNode;
  102. /******************************************
  103.  * Funciont Name:   MenuItem
  104.  * Description： MenuItem class
  105.  * @param {String} pText 
  106.  * @param {String} pAction 
  107.  * @Return：
  108.  *******************************************/
  109. function MenuItem(pText, pAction){
  110.     this.base = MenuAbstractNode;
  111.     this.base(pText,pAction);
  112.     this.type = "MenuItem";
  113. }
  115. MenuItem.prototype = new MenuAbstractNode;
  118. /******************************************
  119.  * Funciont Name:   Root
  120.  * Description： Root class
  121.  * @Return：
  122.  *******************************************/
  123. function Root(){
  124.     this.id = "menubar";
  125.     this.childNodes=[]; 
  126. }
  128. Root.prototype = new MenuAbstractNode;
  130. Root.prototype.toString = function(){
  131.     document.write("<div id='menu'><ul id=/""+root.id+"/"> </ul> </div>");
  132.     for(var i=0; i<this.childNodes.length; i++){
  133.         MenuHandler.insertHTMLBeforeEnd(document.getElementById(root.id), this.childNodes[i].toString());
  134.     }
  135. }
  137. if (document.getElementById){
  138.     var root = new Root();  
  139.     
  140.     var m1 = new Menu("File","alert(this.innerText);");
  141.     root.add(m1);
  142.     var m11 = new MenuItem("New","alert(this.innerText);");
  143.     m1.add(m11);
  144.     m1.add(new MenuItem("Open","alert('open file');"));
  145.     var m12 = new MenuItem("Save");
  146.     m1.add(m12);
  147.     m1.add(new MenuItem("Save As"));
  148.     m1.add(new MenuItem("Close"));
  149.     m1.add(new MenuItem(""));
  150.     
  151.     var m2 = new Menu("Edit");
  152.     root.add(m2);
  153.     var m22 = new MenuItem("Select All");
  154.     m2.add(m22);
  155.     m2.add(new MenuItem("Cut"));
  156.     m2.add(new MenuItem("Copy"));
  157.     m2.add(new MenuItem("paste"));
  158.     
  159.     var m3 = new Menu("View");
  160.     var m33 = new MenuItem("View List");
  161.     m33.add(new MenuItem("Function List"));
  162.     m3.add(m33);
  163.     m3.add(new MenuItem("Tool Bar"));
  164.     root.add(m3);
  165.     root.toString();    
  166. }

 

 

 

 

 

 

majianan
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js和css实现的19个菜单栏案例
03-23
css和js实现的19个菜单栏案例，希望对网页开发的同学有帮助
CSS+JavaScript分别实现下拉菜单效果
02-15
利用CSS和JavaScript分别实现简单的下拉框效果，简单实用，容易上手
Js+CSS横向导航菜单
旺仔专栏
11-28 5370
效果图： 以下是源代码：>  html>      head>          meta http-equiv="Content-Type" content="text/html; charset=gb2312" />          meta http-equiv="Content-Language" content="zh-CN" />          tit
CSS JavaScript 实现菜单功能 改进版
12-10
改进版本优化了这个问题，通过简单的Javascript代码就可以增加菜单。同时使得HTML页面非常简洁，只需要写2行代码即可！O(∩_∩)O 1.使用前提，在HTML页面中引入一个CSS文件，和一个JavaScript文件。如下： 代码如下:...
JavaScript CSS菜单功能 改进版
10-30
在上一篇《JavaScript css 实现菜单功能》通过一个HTML页面简单的实现了菜单功能。但是实际开发当中，如果菜单栏有很多项，频繁的修改HTML，会很繁琐，也容易出错。
CSS横向下拉菜单(兼容IE6)
12-13
CSS驱动的横向下拉菜单（改进版） 由于我的IE是IE7的，所以起初没有意识到那个下拉菜单在IE6中不能显示，今天刚把IE7卸了装了IE6，一般的，由于CSS驱动的下拉菜单不能在IE6中正常工作，大多数人会选择用JavaScript去...
用JavaScript+CSS制作下拉菜单
Chien d'amis的博客
07-08 1703
用JavaScript+CSS制作下拉菜单 样例跳转：样例三<—点这跳转 HTML代码： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link href="./CSS/index3.css" rel="stylesheet" type="text/css"> <title>导航条</title> </h
关于jsp表单提交中action所指向Servlet路径问题的总结
热门推荐
玲小洋的博客
04-25 3万+
初学java web，在使用servlet处理jsp时发现很多提交表单时发生的错误都是因为提交路径出错造成的。 现以自己为例说明： 项目目录结构如下： web.xml文件主要内容如下： This is the description of my J2EE component This is the display name of my J2EE compone
jsp接收action的值的方法总结
直到世界的尽头
03-03 7059
s标签  调用java代码 session application等
.jsp页面中请求action的几种方式
iteye_14194的博客
07-30 548
版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://gaochaojs.blog.51cto.com/812546/166697   方式1.用javascript的location.href    -------(实现整个页面刷新) &lt;table width="95%" border="0...
Struts2 jsp访问action出现404错误
z1799426163的博客
05-10 2116
    在测试环境时发现一个奇怪的bug，A类的save方法可以调用而update方法不能调用。一开始以为自己写错了，检查了半天也没发现问题，后来发现Struts2 2.5版本已经默认开启严格的方法调用Strict Method Invocation。    什么是严格的方法调用？    在使用动态方法绑定调用action时，理论上可以通过修改html代码调用action的任何方法，这就会出现安全...
漂亮的仿flash菜单，来自蓝色经典
grace_yan的专栏
07-03 684
 /* 先把这个 xmenu 的样式放到css里 */.xmenu td{font-size:12px;font-family:verdana,arial;font-weight:bolder;color:#ffffff;border:1px solid #336699;background:#336699;filter:blendtrans(duration=0.5);cursor:hand;t
jsp页面动态修改提交到的Action路径
kaidishi的专栏
08-17 3519
思路：使用JavaScript修改Form的Action路径，然后再启动Form的submit()事件提交表单 JS代码 function action1(){ document.Mform.action="action1.action";//修改路径 document.Mform.submit();//提交form[name=Mfrom] } function action2()
js仿头条顶部菜单效果，点击菜单该菜单回滚到中间
QUX轻博客
08-07 269
前段时间做移动项目，设计稿上有个菜单点击后回弹到页面中间的位置，很像头条菜单的效果，就度娘爬了几个小时，终于找到个能用的jquery+swiper(5.3以上版本，否...
js+css制作鼠标经过显示下拉菜单栏
Colincck的博客
03-03 577
<style> * { margin: 0; padding: 0; box-sizing: border-box; } .box { position: relative; width: 100px; } .first { width: 100px; ...
jsp实现数据传递和保存
haocm66的博客
11-10 3222
1.request对象的常用方法 根据表单组件名称获取提交数据(例如:获取text\password等) String getParameter(String name ) 例如:String username=request.getParameter(“username”); 获取表单组件对应多个值时的请求数据(例如:获取checkbox) String[] get
html + css +javascript 实现思维导图
最新发布
11-25
实现思维导图可以通过HTML，CSS和JavaScript来实现。首先，可以使用HTML来构建思维导图的基本结构，例如使用<ul>和<li>标签来表示导图的节点和分支。通过嵌套列表的方式来表示思维导图的层级结构。 接着，可以利用CSS来美化思维导图，包括节点的样式、颜色、文本大小、边框等。通过设定不同的CSS样式来区分不同的节点类型，以及连接线的样式，使得思维导图看起来更加美观和清晰。 最后，可以利用JavaScript来实现思维导图的交互功能，比如展开和收缩节点、拖拽调整节点位置、添加新节点等。通过监听用户的操作事件，比如点击、拖拽等，来对思维导图进行动态的更新和操作。 总之，利用HTML来构建节点，CSS来美化样式，JavaScript来实现交互功能，即可实现思维导图的功能。当用户与思维导图交互时，JavaScript可以实现实时更新和响应，从而提供更好的用户体验。这样的思维导图不仅可以在网页上实现，也可以应用到各种项目管理工具中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值