JS实现仿Windows7风格的网页右键菜单效果代码

本文实例讲述了JS实现仿Windows7风格的网页右键菜单效果代码。分享给大家供大家参考。具体如下：

这是一款JS仿Windows7风格的网页右键菜单，可以多级展开的右键菜单，原生JS。可参考性强，学习Javascript的朋友不可错过。本菜单用户体验极佳，兼容性良好，无jQuery。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-win7-style-web-right-menu-codes/

具体代码如下：

html,body{height:100%;overflow:hidden;}
body,div,ul,li{margin:0;padding:0;}
body{font:12px/1.5 5fae8f6f96c59ed1;}
ul{list-style-type:none;}
#rightMenu{position:absolute;top:-9999px;left:-9999px;}
#rightMenu ul{float:left;border:1px solid #979797;background:#f1f1f1 url(images/line.png) 24px 0 repeat-y;padding:2px;box-shadow:2px 2px 2px rgba(0,0,0,.6);}
#rightMenu ul li{float:left;clear:both;height:24px;cursor:pointer;line-height:24px;white-space:nowrap;padding:0 30px;}
#rightMenu ul li.sub{background-repeat:no-repeat;background-position:right 9px;background-image:url(images/arrow_win7.png);}
#rightMenu ul li.active{background-color:#f1f3f6;border-radius:3px;border:1px solid #aecff7;height:22px;line-height:22px;background-position:right -8px;padding:0 29px;}
#rightMenu ul ul{display:none;position:absolute;}




自定义右键菜单，请在页面点击右键查看效果。

 

 
Javascript 学习
 

  第一课
  

  
响应用户操作
  
事件驱动
  
元素属性操作
  
 
 

  第二课
  

  
改变网页背景颜色
  
函数传参
  
126邮箱全选效果
  
循环及遍历操作
  
 
 

  第三课
  

  

   Javascript组成
   

   
ECMAscript
   
DOM
   
BOM
   
Javascript兼容性来源
   
  
  
Javascript出现的位置、优缺点
  
变量、类型、变量作用域
  

   闭包
   

   
什么是闭包
   
简单应用
   
闭包缺点
   
  
  
运算符
  
程序流程控制
  

   定时器的使用
   

   
setInterval
   
setTimeout
   
  
  
 
 

希望本文所述对大家的Javascript程序设计有所帮助。