jQuery+CSS3另类滑动掉落导航菜单特效代码

版权：原创更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]
以下是 jQuery+CSS3另类滑动掉落导航菜单特效代码的示例演示效果:
当前平台(PC电脑)
平台:
整屏预览
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
<title>制作一款动态导航菜单</title> 
<style> 
/* ----------------------------------------------------------------------------
* The Sliding Menu Effect - (http://www.entheosweb.com/tutorials/css/default.asp)
* This notice must stay intact for use
* Visit http://www.entheosweb.com/ for more
------------------------------------------------------------------------------ */
	* { margin: 0; padding: 0; }
	body { padding: 40px; background: #eee; font-family: Arial; font-size: 16px; line-height: 18px; }
	a { text-decoration: none;  }
		
	.button {
		padding: 11px 21px 13px;
		display: inline;
		border: 2px solid #FFF;
		color: #fff;
		cursor: pointer;
		font-weight: bold;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		text-shadow: 1px 1px #666;
box-shadow:inset 0px -4px 21px 0px #f0f0f0;
-moz-box-shadow:inset 0px -4px 21px 0px #f0f0f0;
-webkit-box-shadow:inset 0px -4px 21px 0px #f0f0f0;
box-shadow:0px 2px 21px 5px #3f3f3f;
-moz-box-shadow:0px 2px 21px 5px #3f3f3f;
-webkit-box-shadow: 0px 2px 21px 5px #3f3f3f;

		}
	.button:hover {

		}
	.button:active {
		position: relative;
		top: 6px;
		text-shadow: 2px 2px #666;
		padding: 10px 21px 10px;
box-shadow:inset 0px 4px 21px 5px #e5e5e5;
-moz-box-shadow:inset 0px 4px 21px 5px #e5e5e5;
-webkit-box-shadow:inset 0px 4px 21px 5px #e5e5e5;

box-shadow: 0px 0px 21px 0px #3f3f3f;
-moz-box-shadow: 0px 0px 21px 0px #3f3f3f;
-webkit-box-shadow: 0px 0px 21px 0px #3f3f3f;
}


	.blue { background-color: #56c6d9; }
	.green { background-color: #99dc30; }
	.orange { background-color: #ffd22e; }
	.violet { background-color: #c5b8f6; }
	.pink { background-color: 	#fe2192; }	
	
	.green_grad {
	background: url(images/green.png) repeat-x;	/* for all browsers */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#99DC30', endColorstr='#99DC30');		/* Internet Explorer 6,7 and 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#99DC30', endColorstr='#99DC30')";	/* Internet Explorer 8 only */
   background: -webkit-gradient(linear, left top, left bottom, from(rgba(153,220,48,0.1)), to(rgba(153,220,48,1))); /* for webkit browsers */
   background: -moz-linear-gradient(top, rgba(153,220,48,0.1), rgba(153,220,48,1)); /* for firefox 3.6+ */
   background: -o-linear-gradient(rgba(153,220,48,0.1),rgba(153,220,48,1));  /* For Opera Browsers */
   }
   
	.orange_grad {
	background: url(images/orange.png) repeat-x;	/*	For all browsers*/
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFD230', endColorstr='#FFD230');		/* Internet Explorer 6,7 and 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFD230', endColorstr='#FFD230')";	/*Internet Explorer 8 only*/
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,210,48,0.1)), to(rgba(255,210,48,1)));		/* for webkit browsers */
   background: -moz-linear-gradient(top, rgba(255,210,48,0.1), rgba(255,210,48,1));		/* for firefox 3.6+ */
   background: -o-linear-gradient(top,rgba(255,210,48,0.1),rgba(255,210,48,1)); /* For Opera Browsers */
   }
   
	.violet_grad {
	background: url(images/violet.png) repeat-x; 	/* For all browsers */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#C5B8F6', endColorstr='#C5B8F6');	/* Internet Explorer 6,7 and 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#C5B8F6', endColorstr='#C5B8F6')";	/* Internet Explorer 8 only*/
   background: -webkit-gradient(linear, left top, left bottom, from(rgba(197,184,246,0.1)), to(rgba(197,184,246,1))); /* for webkit browsers */
   background: -moz-linear-gradient(top, rgba(197,184,246,0.1), rgba(197,184,246,1)); /* for firefox 3.6+ */
   background: -o-linear-gradient(top,rgba(197,184,246,0.1),rgba(197,184,246,1)); /* For Opera Browsers */
   }
   
	.pink_grad {
	 background: url(images/pink.png) repeat-x;  /* For all browsers */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FE2192', endColorstr='#FE2192');		/*Internet Explorer 6,7 and 8*/	
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FE2192', endColorstr='#FE2192')"; 	/* Internet Explorer 8 only */
   background: -webkit-gradient(linear, left top, left bottom, from(rgba(254,33,146,0.1)), to(rgba(254,33,146,1))); /* for webkit browsers */
   background: -moz-linear-gradient(top, rgba(254,33,146,0.1), rgba(254,33,146,1)); /* for firefox 3.6+ */
   background: -o-linear-gradient(top,rgba(254,33,146,0.1),rgba(254,33,146,1));  /* For Opera Browsers */
   }
   
.slider {
	background-color: #fff;
	width:172px;
	height:200px;
	line-height:30px;
	text-align:center;
	color: #555;
	position: relative;
	top: -234px;
	opacity:0.0;  
	filter: alpha(opacity=0);
	-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 
}
.slider a { display: block; color: #000; font-weight: bold; }

.slider a:hover { background: #f1f1f1; }
#slide { width:736px; margin:auto; height: 330px;  }
.column { float: left; margin-left: 12px; position: relative; }

</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>

<script type="text/javascript" >

/***********************************************
* The Sliding Menu Effect - (http://www.entheosweb.com/tutorials/css/default.asp)
* This notice must stay intact for use
* Visit http://www.entheosweb.com/ for more
***********************************************/

$(document).ready(function(){
		$(".button").toggle(
		function(){
		var clas  = $(this).attr("class");
			$("."+clas.replace('button ','')+"_grad").animate({opacity:'1',top:'50px'}, 500 )
			},
		function(){
		var clas  = $(this).attr("class");
			$("."+clas.replace('button ','')+"_grad").animate({opacity:'0',top:'-300px'}, 500 );
			});

});

</script>
<h2 style="width:100%; text-align:center;margin-top:120px;">Sliding Menu Buttons</h2>
<div id="slide">
<br /><br />

<div style="clear:both"></div>

<div class="column">
<div class='button green'>Menu option -&raquo;</div>
<div style="" class="green_grad slider">
<a href="#">Green Option one</a>
<a href="#">Green Option two</a>
</div>
</div>


<div class="column">
<div class='button orange'>Menu option -&raquo;</div>
<div style="" class="orange_grad slider">
<a href="#">Orange Option one</a>
<a href="#">Orange Option two</a>
<a href="#">Orange Option three</a>
</div>
</div>


<div class="column">
<div class='button violet'>Menu option -&raquo;</div>
<div style="" class="violet_grad slider">
<a href="#">Violet Option one</a>
<a href="#">Violet Option two</a>
<a href="#">Violet Option three</a>
<a href="#">Violet Option four</a>
</div>
</div>


<div class="column">
<div class='button pink'>Menu option -&raquo;</div>
<div style="" class="pink_grad slider">
<a href="#">Pink Option one</a>
<a href="#">Pink Option two</a>
<a href="#">Pink Option three</a>
<a href="#">Pink Option four</a>
<a href="#">Pink Option five</a>
</div>
</div>


</div> <!-- #slider -->

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