jquery+css3实现炫酷菜单导航实例

作者：简简单单 2014-11-14

提示：您可以先修改部分代码再运行

点击列表图表后，内容页面向内移动显示菜单项。当单击关闭菜单按钮时，菜单项隐藏，内容页恢复原位。看下图
<a href="https://img.111com.net/get_pic/2014/11/14/20141114003449257.gif" class="js-smartPhoto" target="_blank"><img src="https://img.111com.net/get_pic/2014/11/14/20141114003449257.gif" alt='jquery+css3实现炫酷菜单导航实例' /></a>
jquery和<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>3实现炫酷菜单导航
 代码部分
 
 
<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7">
	 <tr>
		<td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td>
		<td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onClick="doCopy('copy4677')">复制代码</td>
	 </tr>
	 <tr>
		<td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy4677><html> 
<head> 
<title>jquery和css3实现炫酷菜单导航</title> 
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> 
<style> 
.contener 
{ 
-webkit-perspective:600px; 
-moz-perspective:600px; 
-ms-perspective:600px; 
perspective:600px; 
top: 0; 
bottom: 0; 
left: 0; 
right:0; 
position: absolute; 
margin: 50px; 
z-index: 2; 
} 
#corp_page 
{ 
top: 0; 
bottom: 0; 
left: 0; 
right:0; 
position: absolute; 
background-color:#DC4B39; 
padding: 20px; 
-webkit-transform: rotateY( 0deg ); 
-webkit-transition: all .3s; 
-webkit-transform-origin: 100% 100%; 
-webkit-transform-style: preserve-3d; 
-moz-transform: rotateY( 0deg ); 
-moz-transition: all .3s; 
-moz-transform-origin: 100% 100%; 
-moz-transform-style: preserve-3d; 
-ms-transform: rotateY( 0deg ); 
-ms-transition: all .3s; 
-ms-transform-origin: 100% 100%; 
-ms-transform-style:; 
transform: rotateY( 0deg ); 
transition: all .3s; 
transform-origin: 100% 100%; 
transform-style: preserve-3d; 
} 
.menu 
{ 
top:0; 
bottom:0; 
left:90px; 
width: 200px; 
position: absolute; 
margin: 5px; 
display: none; 
margin-top:50px; 
background-color:transparent; 
} 
</style> 
<script type="text/javascript"> 
$(document).ready(function () { 
$('#btn_menu').click(function () { 
$("#corp_page").css({ 
"-webkit-transform": "rotateY(-20deg)", 
"-webkit-transition": "all .4s linear", 
"-webkit-transform-origin": "100% 100%", 
"-webkit-transform-style": "preserve-3d", 
"-moz-transform": "rotateY(-20deg)", 
"-moz-transition": "all .4s", 
"-moz-transform-origin": "100% 100%", 
"-moz-transform-style": "preserve-3d", 
"-ms-transform": "rotateY(-20deg)", 
"-ms-transition": "all .4s", 
"-ms-transform-origin": "100% 100%", 
"-ms-transform-style": "preserve-3d", 
"transform": "rotateY(-20deg)", 
"transition": "all .4s", 
"transform-origin": "100% 100%", 
"transform-style": "preserve-3d" 
}); 
$(".menu").delay(170).css({ 
"z-index": "5", 
"-webkit-transition": "all .4s", 
"-moz-transition": "all .4s", 
"-ms-transition": "all .4s", 
"transition": "all .4s" 
}).fadeIn("fast"); 
}); 
$('#btn_menu_close,#corp_page').click(function () { 
$(".menu").fadeOut("fast").css({ 
"z-index": "1", 
"-webkit-transition": "all .4s", 
"-moz-transition": "all .4s", 
"-ms-transition": "all .4s", 
"transition": "all .4s" 
}); 
 
$("#corp_page").css({ 
"-webkit-transform": "rotateY(0deg)", 
"-webkit-transition": "all .7s linear", 
"-webkit-transform-origin": "100% 100%", 
"-webkit-transform-style": "preserve-3d", 
"-moz-transform": "rotateY(0deg)", 
"-moz-transition": "all .7s", 
"-moz-transform-origin": "100% 100%", 
"-moz-transform-style": "preserve-3d", 
"-ms-transform": "rotateY(0deg)", 
"-ms-transition": "all .7s", 
"-ms-transform-origin": "100% 100%", 
"-ms-transform-style": "preserve-3d", 
"transform": "rotateY(0deg)", 
"transition": "all .7s", 
"transform-origin": "100% 100%", 
"transform-style": "preserve-3d" 
}); 
}); 
}) 
</script> 
</head> 
<body> 
 
 
<div style="position: relative; height: 400px; width: 825px; margin: auto;"> 
<div class="contener"> 
<div id="corp_page" style="overflow: scroll"> 
<div style="width: 100%"> 
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"> 
<tbody> 
<tr> 
<td style="padding: 10px; font-weight: 100; color: #ffffff;" valign="top"> 
WIFEO/CODE 
</td> 
</tr> 
<tr> 
<td style="padding: 10px;" valign="top"> 
Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam licentia 
crudelitati indulta per suspicionum nebulas aestimati quidam noxii damnabantur. 
quorum pars necati, alii puniti bonorum multatione actique laribus suis extorres 
nullo sibi relicto praeter querelas et lacrimas, stipe conlaticia victitabant, et 
civili iustoque imperio ad voluntatem converso cruentam, claudebantur opulentae 
domus et clarae. 
</td> 
</tr> 
</tbody> 
</table> 
</div> 
</div> 
</div> 
<div class="menu"> 
Item 2 
 
Item 3 
 
Item 4 
 
<a href="2.png" class="js-smartPhoto" target="_blank"><img id="btn_menu_close" src="2.png" style="cursor: pointer;" /></a></div> 
<div style="top: 0; left: 0; position: absolute; cursor: pointer;"> 
<a href="1.png" class="js-smartPhoto" target="_blank"><img id="btn_menu" src="1.png" /></a> 
</div> 
</div> 
 
 
 
 
</body> 
</html></td>
	 </tr>
	</table>
 
 
以上代码包含了两张素材图片 1.png 和 2.png：
 
1.png
<a href="https://img.111com.net/get_pic/2014/11/14/20141114003452843.png" class="js-smartPhoto" target="_blank"><img src="https://img.111com.net/get_pic/2014/11/14/20141114003452843.png" alt='jquery+css3实现炫酷菜单导航实例' /></a>
 
2.png
<a href="https://img.111com.net/get_pic/2014/11/14/20141114003454929.png" class="js-smartPhoto" target="_blank"><img src="https://img.111com.net/get_pic/2014/11/14/20141114003454929.png" alt='jquery+css3实现炫酷菜单导航实例' /></a></td>
	 </tr>
	</table>

提示：您可以先修改部分代码再运行

jquery+css3实现炫酷菜单导航实例

相关文章

精彩推荐