自定义网页右键菜单

本经验使用JavaScript和简单的HTML实现网页的右键菜单的自定义。

工具/原料

已安装Dreamweaver或其它网页编辑器的电脑一台

实现效果

HTML网页打开，一开始显示如图。

鼠标右键之悦鬼后显示自定义躲撤右槐盯哨键菜单。

HTML代码

HTML代码：

<div id="cen">点击鼠标右键</div>

<div id="div1">

      <ul>

           <li><strong>JavaScript 学习</strong></li>

           <li>响应用户操作</li>

           <li>事件驱动</li>

           <li>元素属性操作</li>

           <li>函数传参</li>

           <li>JavaScript组成</li>

           <li>JavaScript出现的位置、优缺点</li>

           <li>变量、类型、变量作用域</li>

           <li>闭包</li>

           <li>运算符</li>

           <li>程序流程控制</li>

           <li>定时器的使用</li>

     </ul>

</div>

CSS代码

CSS代码：

body, div, ul, li { margin:0; padding:0; }

body { font:12px/1.5 \5fae\8f6f\96c5\9ed1; }

ul { list-style-type:none; }

#cen {font-size:36px; color:#60F; text-align:center;}

#div1 { position:absolute; display:none; }

#div1 ul { position:absolute; float:left; border:1px solid #979797;background:#f1f1f1; padding:2px; box-shadow:2px 2px 2px rgba(0, 0, 0, .6); width:230px; overflow:hidden; }

#div1 ul li { float:left; clear:both; height:24px; cursor:pointer; line-height:24px; white-space:nowrap; padding:0 30px; width:100%; display:inline-block; }

#div1 ul li:hover { background:#E6EDF6; border:1px solid #B4D2F6; }

JS代码

JavaScript代码：

document.oncontextmenu = function (ev)

{

var oEvent=ev||event;

var oDiv=document.getElementById('div1');   

oDiv.style.display='block';

oDiv.style.left=oEvent.clientX+'px';

oDiv.style.top=oEvent.clientY+'px';   

return false;

};

document.onclick=function ()

{

var oDiv=document.getElementById('div1');   

oDiv.style.display='none';

};

注意事项

注意JavaScript代码的书写