jquery鼠标右键菜单多级导航代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery鼠标右键菜单多级导航代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery鼠标右击菜单多级导航代码</title>
<link rel="stylesheet" href="css/chinaz.css">
<link rel="stylesheet" href="css/gizmoMenu.css">
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/gizmoMenu.js"></script>

<script type="text/javascript">
	$(document).ready(function(){ 
		$('body').gizmoMenu({
			'menu':'gizmoDropDown'	
		});
		
		$('#hamburger_example').gizmoMenu({
			'menu':'gizmoBurger'
		});
		
		$('#horizontal_example').gizmoMenu({
			'menu':'gizmoHorizontal'
		});			
	});
</script>  
<style>.gizmoMenu{display:block}</style>  
</head>
<body>
<div class="gizmoMenu gizmoDropDown">
	<ul>
		<li><i class="fa fa-camera-retro"></i><a href="#" target="_blank">首页</a></li>
		<li><i class="fa fa-bars"></i><a href="#" target="_blank">功能</a></li>            
		<li><i class="fa fa-arrow-right"></i><a href="#">jQuery特效</a>
			<ul>
				<li><i class="fa fa-bullseye"></i><a href="#" target="_blank">第一</a></li>
				<li><i class="fa fa-cubes"></i><a href="#" target="_blank">第二</a></li>
				<li><i class="fa fa-text-height"></i><a href="#" target="_blank">第三</a></li>
				<li><i class="fa fa-star"></i><a href="#" target="_blank">第四</a></li>
				<li><i class="fa fa-cube"></i><a href="#" target="_blank">第五</a></li>
				<li><i class="fa fa-location-arrow"></i><a href="#" target="_blank">第六</a></li>                                                
			</ul>
		</li>
		<li><i class="fa fa-arrow-right"></i><a href="#">网页特效</a>
			<ul>
				<li><i class="fa fa-table"></i><a href="#" target="_blank">HTML5特效</a></li>
				<li><i class="fa fa-table"></i><a href="#" target="_blank">CSS3特效</a></li>
			</ul>
		</li>
		<li><i class="fa fa-arrow-right"></i><a href="#">HTML5特效</a>
			<ul>
				<li><i class="fa fa-image"></i><a href="#" target="_blank">HTML5特效</a></li>
				<li><i class="fa fa-gamepad"></i><a href="#" target="_blank">CSS3特效</a></li>
			</ul>
		</li>
	</ul>
</div>
</body>
</html>

JS代码(gizmoMenu.js):

;
	(function($){
	var gizmoMenu={
	defaults:{
	click_to_close:true,// IF CLICKING DOCUMENT CLOSES MENUmenu:'gizmoBurger',// MENU CLASS NAME (gizmoBurger,gizmoDropDown,gizmoHorizontal)stay_open:false// KEEP MENU OPEN WHEN JUMPING TO ANOTHER CONTEXT MENU}
,/***********************************************************************************************/
// INITIALIZE/***********************************************************************************************/
init:function(options){
	var o=options,$this=$(this);
	/////////////////// EACH gizmoMenu/////////////////$this.each(function(i){
	// MERGE USER OPTIONS WITH DEFAULTSvar $this=$(this),settings=$.extend({
}
,gizmoMenu.defaults,o),$menu=$('.'+settings.menu);
	// STAY_OPEN SETTING KEEPS MENU OPEN WHEN OPENING ANOTHERif(!settings.stay_open) $menu.addClass('gizmoMenu_close_me');
	//////////////////////////////// INITIAL SETUP FOR HAMBURGER//////////////////////////////if(settings.menu==='gizmoBurger'){
	var $ul=$this.find('ul.gizmoMenu > li > ul'),$a=$this.find('ul.gizmoMenu > li > a');
	$ul.hide();
	$this.find('ul.gizmoMenu').addClass('gizmo2');
	// gizmoMenu MENU ITEM CLICK HANDLER$a.on('click',function(e){
	e.preventDefault();
	var $this=$(this),$menu=$this.parents('.gizmoMenu:first');
	if(!$this.hasClass('active')){
	$menu.find('.active').removeClass('active');
	$ul.filter(':visible').slideUp('normal');
	$this.addClass('active').next().stop(true,true).slideDown('normal');
}
else{
	$this.removeClass('active').next().stop(true,true).slideUp('normal');
}
;
}
);
}
;
	////////////////////////////////////////////// CLOSE MENU IF ANY OTHER BUTTON IS CLICKED////////////////////////////////////////////$this.on('mousedown',function(e){
	if(e.which!==3 && $(e.target).parents('.gizmoMenu').length < 1 && settings.click_to_close){
	$this.find('.gizmoMenu').stop(true,false).animate({
	opacity:0}
,{
	duration:100,queue:false,complete:function(){
	// CLOSE ANY OPEN gizmoMENUS$(this).css('display','none').find('.active').removeClass('active').next().stop(true,true).slideUp('normal');
}
}
);
}
;
}
);
	///////////////////// OPEN CONTEXTMENU///////////////////$this.on('contextmenu',function(e){
	e.preventDefault();
	e.stopPropagation();
	gizmoMenu.getCoords(e);
	////////////////////////////////////////// CLOSE OTHERS IF STAY_OPEN IF DISABLED////////////////////////////////////////$('.gizmoMenu_close_me').stop(true,false).animate({
	opacity:0}
,{
	duration:100,queue:false,complete:function(){
	$(this).css('display','none');
}
}
);
	var top=Coords.clientY,left=($('body')[0]===e.target) ? Coords.clickX:Coords.clientX;
	// SHOW AND POSITION CONTEXTMENU$menu.css({
	top:top+'px',left:left+'px',display:'block'}
).stop(true,false).animate({
	opacity:1}
,{
	duration:100,queue:false}
);
}
);
}
);
}
,/***********************************************************************************************/
// GETS MOUSE CLICK COORDINATES/***********************************************************************************************/
getCoords:function(e){
	var evt=e ? e:window.event;
	var clickX=0,clickY=0;
	if((evt.clientX || evt.clientY) && document.body && document.body.scrollLeft!=null){
	clickX=evt.clientX+document.body.scrollLeft;
	clickY=evt.clientY+document.body.scrollTop;
}
;
	if((evt.clientX || evt.clientY) && document.compatMode=='CSS1Compat' && document.documentElement && document.documentElement.scrollLeft!=null){
	clickX=evt.clientX+document.documentElement.scrollLeft;
	clickY=evt.clientY+document.documentElement.scrollTop;
}
;
	if(evt.pageX || evt.pageY){
	clickX=evt.pageX;
	clickY=evt.pageY;
}
;
	return Coords={
	clickX:clickX,clickY:clickY,clientX:evt.clientX,clientY:evt.clientY,screenX:evt.screenX,screenY:evt.screenY}
;
}
}
;
	/***********************************************************************************************/
// PLUGIN DEFINITION/***********************************************************************************************/
$.fn.gizmoMenu=function(method,options){
	if(gizmoMenu[method]){
	return gizmoMenu[method].apply(this,Array.prototype.slice.call(arguments,1));
}
else if(typeof method==='object'||!method){
	return gizmoMenu.init.apply(this,arguments);
}
else{
	$.error('Method '+method+' does not exist');
}
}
}
)(jQuery);
	// EXTEND NATIVE CLASSESString.prototype.removeWS=function(){
	return this.toString().replace(/\s/g,'');
}
;
	String.prototype.pF=function(){
	return parseFloat(this);
}
;
	Number.prototype.pF=function(){
	return parseFloat(this);
}
;

CSS代码(chinaz.css):

@charset "utf-8";/* CSS Document */
html,body{min-height:100%;margin:0;padding:0;}
body{font-family:"Open Sans",sans-serif;background:#3e50b4;color:#FFF;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;}
pre,code{color:#FFF;font-family:monospace;font-size:18px;}
.container{margin:0 auto;}
h1{font-size:62px;color:#FFF;font-family:'Raleway',sans-serif;font-weight:100;}
p{font-size:25px;line-height:46px;font-weight:100;color:#FFF;}
p.example{font-size:20px;line-height:32px;font-weight:100;color:#FFF;}
h2{font-size:26px;font-weight:300;line-height:46px;color:#FFF;}
ul li{font-size:25px;line-height:46px;font-weight:100;color:#FFF;}
.setting{color:#FFF;font-weight:400;display:inline-block;width:170px;}
#hamburger_example,#horizontal_example{width:100%;height:200px;background:#FFF;overflow:hidden;}
/* IPHONE */
@media (max-width:375px){.container{width:375px;padding-top:500px;}
}
/* IPAD */
@media (max-width:768px){.container{width:500px;padding-top:250px;}
.setting{display:block;}
}
/* DESKTOP */
@media (min-width:768px){.container{width:768px;padding-top:100px;}
}
/* DESKTOP + */
@media (min-width:1024px){.container{width:1000px;padding-top:100px;}
}

CSS代码(gizmoMenu.css):

@charset "utf-8";/* RESET */
.gizmoMenu *{vertical-align:baseline;margin:0;padding:0;border:0;cursor:inherit;box-sizing:content-box;/* AVOID OPENING MOBILE CONTEXT MENU ON TAPHOLD */
-webkit-touch-callout:none;-moz-touch-callout:none;-ms-touch-callout:none;-o-touch-callout:none;touch-callout:none;/* AVOID HIGHLIGHTING ON TAP */
-webkit-tap-highlight-color:rgba(0,0,0,0);tap-highlight-color:rgba(0,0,0,0);/* AVOID CHANGING TEXT SIZE ON ORIENTATION CHANGE */
-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none;-o-text-size-adjust:none;text-size-adjust:none;/* AVOID SELECTING TEXT AND IMAGES */
-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;margin:0;padding:0;box-sizing:border-box;float:none;list-style-type:none;text-decoration:none;font-size:100%;outline:none;}
.gizmoMenu{display:none;}
/**********************************/
/* STYLE 1 - gizmoDropDown */
/**********************************/
.gizmoMenu.gizmoDropDown{position:fixed;box-shadow:0 0 0 7px rgba(157,157,157,0.15);}
.gizmoMenu.gizmoDropDown ul,.gizmoMenu.gizmoDropDown ul li{margin:0;padding:0;list-style:none;}
.gizmoMenu.gizmoDropDown ul li{transition:all 500ms ease;padding:3px 0 3px 20px;background-color:#FFFFFF;color:#222;width:180px;cursor:pointer;}
.gizmoMenu.gizmoDropDown ul li:hover{background-color:#1530c2;color:#FFF;position:relative;}
.gizmoMenu.gizmoDropDown ul li a{color:inherit;font-family:'Open Sans',sans-serif;font-size:15px;display:inline-block;text-decoration:none;}
.gizmoMenu.gizmoDropDown i{font-size:12.5px;margin-right:10px;}
/**** SECOND LEVEL MENU ****/
.gizmoMenu.gizmoDropDown ul li ul{position:absolute;display:none;}
.gizmoMenu.gizmoDropDown ul li:hover ul{left:180px;top:0px;display:block;}
.gizmoMenu.gizmoDropDown ul{box-shadow:0 0 0 7px rgba(157,157,157,0.15);}
.gizmoMenu.gizmoDropDown ul li ul li{background-color:#3f464e;}
.gizmoMenu.gizmoDropDown ul li:hover ul li:hover{background-color:#9d9d9d;}
.gizmoMenu.gizmoDropDown ul li ul li a{color:#FFF;display:inline-block;width:120px;}
.gizmoMenu.gizmoDropDown ul li ul li i{color:#FFF;}
/**** THIRD LEVEL MENU ****/
.gizmoMenu.gizmoDropDown ul li:hover ul li ul{position:absolute;display:none;}
.gizmoMenu.gizmoDropDown ul li:hover ul li:hover ul{display:block;left:150px;top:0;}
.gizmoMenu.gizmoDropDown ul li:hover ul li:hover ul li{background:#86d3fa;}
.gizmoMenu.gizmoDropDown ul li:hover ul li:hover ul li:hover{background:#358ebc;}
.gizmoMenu.gizmoDropDown ul li:hover ul li:hover ul li a{color:#ffffff;}
.clear{clear:both;}
/**********************************/
/* STYLE 2 - gizmoBurger */
/**********************************/
/* CONTAINER */
.gizmoMenu.gizmoBurger{width:300px;}
/* MAIN MENU */
.gizmoMenu.gizmoBurger{display:none;opacity:0;position:fixed;padding:0;margin:0;height:auto;box-shadow:0 1px 3px 0 rgba(0,0,0,.53),0 0 18px 0 rgba(0,0,0,.13);}
/* FIRST LEVEL */
.gizmoMenu.gizmoBurger > li > a{font-family:'Open Sans',sans-serif;font-weight:400;display:block;position:relative;cursor:pointer;}
.gizmoMenu.gizmoBurger > li > a{width:100%;height:60px;font-size:16px;line-height:60px;text-indent:20px;}
/* SECOND LEVEL */
.gizmoMenu.gizmoBurger ul li a{display:block;position:relative;font-family:'Open Sans',sans-serif;font-weight:400;color:#333;cursor:pointer;}
.gizmoMenu.gizmoBurger ul li a{width:100%;height:45px;font-size:16px;line-height:46px;text-indent:40px;}
/* SPAN */
.gizmoMenu.gizmoBurger > li > a span{display:inline-block;position:absolute;color:#fff;text-indent:0;text-align:center;font-weight:500;}
.gizmoMenu.gizmoBurger > li > a span{font-size:11px;right:12px;top:50%;line-height:14px;height:60px;padding:3px;margin-top:-8px;}
.gizmoMenu.gizmoBurger ul > li > a span{display:inline-block;position:absolute;text-indent:0;text-align:center;border-radius:769em;text-shadow:0 0 0 rgba(255,255,255,.01));}
.gizmoMenu.gizmoBurger ul > li > a span{font-size:11px;right:12px;top:50%;line-height:16px;height:60px;padding:3px;margin-top:-8px;}
/**********************************/
/* STYLE 3 - gizmoHoritonztal */
/**********************************/
/* GENERAL */
.gizmoMenu.gizmoHorizontal{position:fixed;}
.gizmoMenu.gizmoHorizontal,.gizmoMenu.gizmoHorizontal a,.gizmoMenu.gizmoHorizontal ul,.gizmoMenu.gizmoHorizontal li,.gizmoMenu.gizmoHorizontal div,.gizmoMenu.gizmoHorizontal form,.gizmoMenu.gizmoHorizontal input{margin:0;padding:0;border:none;outline:none;}
.gizmoHorizontal a{text-decoration:none;}
.gizmoHorizontal li{list-style:none;}
.gizmoHorizontal{position:relative;cursor:default;z-index:500;}
.gizmoHorizontal > li{display:block;float:left;}
/* LINKS */
.gizmoMenu.gizmoHorizontal > li > a{cursor:pointer;position:relative;display:block;z-index:510;padding:0 20px;line-height:54px;font-family:'Open Sans',sans-serif;font-weight:200;font-size:17px;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;}
.gizmoHorizontal > li:first-child > a{border-radius:3px 0 0 3px;border-left:none;}
/****************/
/* COLOR THEMES */
/****************/
/* RED */
.gizmoMenu_red > li > a:hover,.gizmoMenu_red > li > a.active{background-color:#eb6363;border-bottom:1px solid #eb6363;box-shadow:inset 0 1px 0 0 #f44236;}
.gizmoMenu_red > li > a.active{border-bottom:1px solid #eb6363;}
.gizmoMenu_red ul li a:hover{background-color:#CCC;color:#FFF;}
.gizmoMenu_red ul li a{background:#FFFFFF;border-bottom:1px solid #CCC;}
.gizmoMenu_red > li > a{background-color:#3f464e;color:#FFFFFF;box-shadow:inset 0px 1px 0px 0px #363f46;}
.gizmoMenu_red ul li:last-child a{border-bottom:1px solid #CCC;}
.gizmoMenu_red ul > li > a span{color:#222;}
/* PINK */
.gizmoMenu_pink > li > a:hover,.gizmoMenu_pink > li > a.active{background-color:#ff0056;border-bottom:1px solid #ff0056;box-shadow:inset 0 1px 0 0 #ff0056;}
.gizmoMenu_pink > li > a.active{border-bottom:1px solid #f44236;}
.gizmoMenu_pink ul li a:hover{background-color:#ffc3d7;color:#FFF;}
.gizmoMenu_pink ul li a{background:#FFFFFF;border-bottom:1px solid #ffd8e5;}
.gizmoMenu_pink > li > a{background-color:#3f464e;color:#FFFFFF;box-shadow:inset 0px 1px 0px 0px #363f46;}
.gizmoMenu_pink ul li:last-child a{border-bottom:1px solid #e91d62;}
.gizmoMenu_pink ul > li > a span{color:#e91d62;}
.gizmoMenu_pink > li > a{background:#e91d62;}
/* PURPLE */
.gizmoMenu_purple > li > a:hover,.gizmoMenu_purple > li > a.active{background-color:#6739b6;border-bottom:1px solid #6739b6;box-shadow:inset 0 1px 0 0 #6739b6;}
.gizmoMenu_purple > li > a.active{border-bottom:1px solid #9c26b0;}
.gizmoMenu_purple ul li a:hover{background-color:#9c26b0;color:#FFF;}
.gizmoMenu_purple ul li a{background:#FFFFFF;border-bottom:1px solid #CCC;}
.gizmoMenu_purple > li > a{background-color:#3f464e;color:#FFFFFF;box-shadow:inset 0px 1px 0px 0px #363f46;}
.gizmoMenu_purple ul > li > a span{color:#6739b6;}
.gizmoMenu_purple ul li:last-child a{border-bottom:1px solid #6739b6;}
.gizmoMenu_purple > li > a{background:#4912a8;}
/* GRAY */
.gizmoMenu_gray > li > a:hover,.gizmoMenu_gray > li > a.active{background-color:#9d9d9d;border-bottom:1px solid #6b6b6b;box-shadow:inset 0 1px 0 0 #6b6b6b;}
.gizmoMenu_gray > li > a.active{border-bottom:1px solid #6b6b6b;}
.gizmoMenu_gray ul li a:hover{background-color:#cbcbcb;color:#222;}
.gizmoMenu_gray ul li a{background:#ebebeb;border-bottom:1px solid #CCC;}
.gizmoMenu_gray > li > a{background-color:#3f464e;color:#FFFFFF;box-shadow:inset 0px 1px 0px 0px #363f46;}
.gizmoMenu_gray ul > li > a span{color:#6739b6;}
.gizmoMenu_gray ul li:last-child a{border-bottom:1px solid #6b6b6b;}
.gizmoMenu_gray > li > a{background:#7d7d7d;}
/* BLUE */
.gizmoMenu_blue > li > a:hover,.gizmoMenu_blue > li > a.active{background-color:#02a8f4;border-bottom:1px solid #02a8f4;box-shadow:inset 0 1px 0 0 #02a8f4;}
.gizmoMenu_blue > li > a.active{border-bottom:1px solid #02a8f4;}
.gizmoMenu_blue ul li a:hover{background-color:#e0f8ff;color:#222;}
.gizmoMenu_blue ul li a{background:#FFF;border-bottom:1px solid #e0f8ff;}
.gizmoMenu_blue > li > a{background-color:#b1e7ff;color:#FFFFFF;box-shadow:inset 0px 1px 0px 0px #02a8f4;}
.gizmoMenu_blue ul > li > a span{color:#02a8f4;}
.gizmoMenu_blue ul li:last-child a{border-bottom:1px solid #02a8f4;}
.gizmoMenu_blue > li > a{background:#2095f2;}
/* GREEN */
.gizmoMenu_green > li > a:hover,.gizmoMenu_green > li > a.active{background-color:#8bc24a;border-bottom:1px solid #8bc24a;box-shadow:inset 0 1px 0 0 #8bc24a;}
.gizmoMenu_green > li > a.active{border-bottom:1px solid #8bc24a;}
.gizmoMenu_green ul li a:hover{background-color:#ccdb38;color:#4baf4f;}
.gizmoMenu_green ul li a{background:#FFF;border-bottom:1px solid #ccdb38;}
.gizmoMenu_green > li > a{background-color:#b1e7ff;color:#FFFFFF;box-shadow:inset 0px 1px 0px 0px #ccdb38;}
.gizmoMenu_green ul > li > a span{color:#8bc24a;}
.gizmoMenu_green ul li:last-child a{border-bottom:1px solid #ccdb38;}
.gizmoMenu_green > li > a{background:#4baf4f;}

附件:下载该文件资源,减少时间成本(增值服务)