导航菜单
仿Key社游戏风格jQuery右键菜单
PetitQ
GalMenu.js 是一款仿 Key 社游戏风格的右键菜单特效 jQuery 插件。该插件将原生的浏览器右键菜单转换为一个动画的圆形菜单，并且带音效，效果非常的炫酷。
使用方法:
在页面中引入 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 < l; i++) {
items[i].style.left = (50 - 35 * Math.cos( - 0.5 * Math.PI - 2 * (1 / l) * i * Math.PI)).toFixed(4) + "%";
items[i].style.top = (50 + 35 * Math.sin( - 0.5 * Math.PI - 2 * (1 / l) * i * Math.PI)).toFixed(4) + "%"
}
配置参数:
GalMenu.js 有 2 个可用的配置参数：
click_to_close：是否在点击遮罩层时关闭右键菜单，默认为 true。
stay_open：是否一直显示右键菜单，默认为 false。
GalMenu.js 右键菜单插件的 github 地址为：https://github.com/LanlingKira/key_style_right_click_menu
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
