代码描述:jQuery自定义 右键导航菜单。jQuery自定义右键导航菜单代码下载
右键菜单大家都不会陌生,因为windows操作系统有大量应用,几乎每天都会使用,但是自带的菜单也许不能够满足我们的需要,所以要进行自定义才能够满足实际应用,代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <style type="text/css"> *{font-size:12px} #mask{ position:absolute; left:0; top:0; z-index:9000; display:block; } #myMenu{ position:absolute; display:none; z-index:9999; background:yellow; border:1px solid; width:70px; height:120px; } #textbox{ background:orange; width:380px; border:2px solid; } img{ height:30px; width:30px; } td{ font-size:20px; cursor:pointer; } a{ text-decoration:none; color:black; } a: hover{ color:white; background:black; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> var windowwidth; var windowheight; var checkmenu; $(window).ready(function(){ $('#myMenu').hide(); $('#textbox').bind("contextmenu",function(e){ windowwidth = $(window).width(); windowheight = $(window).height(); checkmenu = 1; $('#mask').css({ 'height': windowheight, 'width': windowwidth }); $('#myMenu').show(500); $('#myMenu').css({ 'top':e.pageY+'px', 'left':e.pageX+'px' }); return false; }); $('#mask').click(function(){ $(this).height(0); $(this).width(0); $('#myMenu').hide(500); checkmenu = 0; return false; }); $('#mask').bind("contextmenu",function(){ $(this).height(0); $(this).width(0); $('#myMenu').hide(500); checkmenu = 0; return false; }); $(window).resize(function(){ if(checkmenu == 1) { windowwidth = $(window).width(); windowheight = $(window).height(); $('#mask').css({ 'height': windowheight, 'width': windowwidth, }); } }); }); </script> </head> <body > <div id="myMenu" > <table> <tr> <td><a href="#">js教程</a></td> </tr> <tr> <td><a href="#">jQuery教程</a></td> </tr> <tr> <td><a href="#">css教程</a></td> </tr> <tr> <td><a href="#">51前端</a></td> </tr> </table> </div> <div id="mask"> </div> <div id="textbox"> <p>右击此区域可以查看右键菜单<p/> </div> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能