jQuery自定义右键导航菜单代码下载

右键菜单大家都不会陌生，因为windows操作系统有大量应用，几乎每天都会使用，但是自带的菜单也许不能够满足我们的需要，所以要进行自定义才能够满足实际应用，代码实例如下:

[ jQuery ] 运行代码下载代码

<!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>

代码描述：jQuery自定义右键导航菜单。jQuery自定义右键导航菜单代码下载

下载全部收藏

147 196

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册