兰陵の记事簿

Tech Otakus Save The World

兰陵

2016年8月21日

代码>

仿Key游戏风格jQuery右键菜单

我不会告诉你我是在推GAL时的脑洞 :P

好像很少有人做右键菜单美化,于是我就去研究了下。右键菜单原理就是对右键事件进行判定,然后让隐藏的div显示,于是做了GalMenu.js这个插件。

k社的风格大概是右键时顺时针弹出和逆时针收回菜单,有菜单弹出音效,弹出笼罩层。

如图:
仿Key游戏风格jQuery右键菜单

可在下方区域进行体验

插件已重写,修复已知问题


GalMenu.js 右键环形菜单

代码地址

key_style_right_click_menu

使用方法

引入文件

在页面中引入 GalMenu.css,jquery 和 GalMenu.js 文件

<link rel="stylesheet" type="text/css" href="css/GalMenu.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/GalMenu.js"></script>

HTML 结构

为菜单项设置相应的跳转或点击事件

<div class="galMenu galRing">
  <div class="circle" id="gal">
    <div class="ring">
      <a href="#" title="Home" class="menuItem">Home</a>
      <a href="#" title="Blog" class="menuItem">Blog</a>
      <a href="#" title="About" class="menuItem">About</a>
      <a href="#" title="Contact" class="menuItem">Contact</a>
      <a href="#" title="Social" class="menuItem">Social</a>
      <a href="#" title="Other" class="menuItem">Other</a>
    </div>
    <audio id="galAudio" src="audio/nyanpass.mp3"></audio>
  </div>
</div>
<div id="overlay" style="opacity: 1; cursor: pointer;"></div>

CSS 样式

为右键菜单的菜单项设置背景图片

.ring a:nth-of-type(1){background-image:url(1.jpg)}
.ring a:nth-of-type(2){background-image:url(2.jpg)}
.ring a:nth-of-type(3){background-image:url(3.jpg)}
.ring a:nth-of-type(4){background-image:url(4.jpg)}
.ring a:nth-of-type(5){background-image:url(5.jpg)}
.ring a:nth-of-type(6){background-image:url(6.jpg)}

初始化插件

在页面 DOM 元素加载完毕之后,通过 galMenu() 方法来初始化该右键菜单插件

$(document).ready(function() {
  $("body").galMenu({
    menu:"galRing",
    click_to_close:true,
    stay_open:false
  });
});

配置参数

GalMenu.js 有 2 个可用的配置参数

  • click_to_close:是否在点击遮罩层时关闭右键菜单,默认为 true
  • stay_open:是否在点击菜单项后一直显示右键菜单,默认为 false

关闭菜单

3 个方式

  • 再次右键
  • 左键点击遮罩层
  • ESC 关闭


关于在手机上显示的问题,如果是基于Chromium的浏览器,长按就可能是出现系统的文字选择菜单。部分国产浏览器不会出现这种情况,解决的办法就是禁止选中文本。
使用css禁止文本选中,最好使用@media查询来只设置移动端的。

.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently not supported by any browser */
}

虽然可以使用右键菜单了,但是牺牲了文本选择,这个孰轻孰重自己选择啦( ̄▽ ̄)

#一言#

来一发吐槽

Title - Artist
0:00