GalMenu.js是一款仿Key社游戏风格的右键菜单特效jQuery插件。该插件将原生的浏览器右键菜单转换为一个动画的圆形菜单,并且带音效,效果非常的炫酷。
Key社游戏是ビジュアルアーツ(Visual Art's)旗下的一个品牌,它位于日本大阪市的一所游戏制作公司,以制作感人的Galgame而著称于业界。Key最著名的四季四部曲---春之《Clannad》、夏之《Air》、秋之《One~辉之季节~》、冬之《Kanon》。
使用方法
在页面中引入GalMenu.css,jquery和GalMenu.js文件。
<link rel="stylesheet" href="css/GalMenu.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/GalMenu.js"></script>
HTML结构
使用下面的代码作为右键菜单的HTML结构:
<div class="GalMenu GalDropDown"> <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> </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()
方法来初始化该右键菜单插件。
$('body').GalMenu({ 'menu': 'GalDropDown' })
通过下面的JS代码来是菜单项形成一个圆形。
for (var i = 0, l = items.length; i配置参数
GalMenu.js有2个可用的配置参数:
-
click_to_close
:是否在点击遮罩层时关闭右键菜单,默认为true。 -
stay_open
:是否一直显示右键菜单,默认为false。
GalMenu.js右键菜单插件的github地址为:https://github.com/LanlingKira/key_style_right_click_menu
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!