海量企业网站模板 · 任您选择
美出特色，精出品质，一切为了企业更好的营销
<p>点击列表图表后，内容页面向内移动显示菜单项。当单击关闭菜单按钮时，菜单项隐藏，内容页恢复原位。看下图</p>
<p><img width="700" height="333" src="http://www.xxx.cn/2014/11/14/20141114003449257.gif" alt='jquery+css3实现炫酷菜单导航实例' /></p>
<p>jquery和css3实现炫酷菜单导航</p>
<p> 代码部分</p>
<p> </p>
<p> </p>
<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><br />
<head><br />
<title>jquery和css3实现炫酷菜单导航</title><br />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><br />
<style><br />
.contener<br />
{<br />
-webkit-perspective:600px;<br />
-moz-perspective:600px;<br />
-ms-perspective:600px;<br />
perspective:600px;<br />
top: 0;<br />
bottom: 0;<br />
left: 0;<br />
right:0;<br />
position: absolute;<br />
margin: 50px;<br />
z-index: 2;<br />
}<br />
#corp_page<br />
{<br />
top: 0;<br />
bottom: 0;<br />
left: 0;<br />
right:0;<br />
position: absolute;<br />
background-color:#DC4B39;<br />
padding: 20px;<br />
-webkit-transform: rotateY( 0deg );<br />
-webkit-transition: all .3s;<br />
-webkit-transform-origin: 100% 100%;<br />
-webkit-transform-style: preserve-3d;<br />
-moz-transform: rotateY( 0deg );<br />
-moz-transition: all .3s;<br />
-moz-transform-origin: 100% 100%;<br />
-moz-transform-style: preserve-3d;<br />
-ms-transform: rotateY( 0deg );<br />
-ms-transition: all .3s;<br />
-ms-transform-origin: 100% 100%;<br />
-ms-transform-style:;<br />
transform: rotateY( 0deg );<br />
transition: all .3s;<br />
transform-origin: 100% 100%;<br />
transform-style: preserve-3d;<br />
}<br />
.menu<br />
{<br />
top:0;<br />
bottom:0;<br />
left:90px;<br />
width: 200px;<br />
position: absolute;<br />
margin: 5px;<br />
display: none;<br />
margin-top:50px;<br />
background-color:transparent;<br />
}<br />
</style><br />
<script type="text/javascript"><br />
$(document).ready(function () {<br />
$('#btn_menu').click(function () {<br />
$("#corp_page").css({<br />
"-webkit-transform": "rotateY(-20deg)",<br />
"-webkit-transition": "all .4s linear",<br />
"-webkit-transform-origin": "100% 100%",<br />
"-webkit-transform-style": "preserve-3d",<br />
"-moz-transform": "rotateY(-20deg)",<br />
"-moz-transition": "all .4s",<br />
"-moz-transform-origin": "100% 100%",<br />
"-moz-transform-style": "preserve-3d",<br />
"-ms-transform": "rotateY(-20deg)",<br />
"-ms-transition": "all .4s",<br />
"-ms-transform-origin": "100% 100%",<br />
"-ms-transform-style": "preserve-3d",<br />
"transform": "rotateY(-20deg)",<br />
"transition": "all .4s",<br />
"transform-origin": "100% 100%",<br />
"transform-style": "preserve-3d"<br />
});<br />
$(".menu").delay(170).css({<br />
"z-index": "5",<br />
"-webkit-transition": "all .4s",<br />
"-moz-transition": "all .4s",<br />
"-ms-transition": "all .4s",<br />
"transition": "all .4s"<br />
}).fadeIn("fast");<br />
});<br />
$('#btn_menu_close,#corp_page').click(function () {<br />
$(".menu").fadeOut("fast").css({<br />
"z-index": "1",<br />
"-webkit-transition": "all .4s",<br />
"-moz-transition": "all .4s",<br />
"-ms-transition": "all .4s",<br />
"transition": "all .4s"<br />
});<br />
<br />
$("#corp_page").css({<br />
"-webkit-transform": "rotateY(0deg)",<br />
"-webkit-transition": "all .7s linear",<br />
"-webkit-transform-origin": "100% 100%",<br />
"-webkit-transform-style": "preserve-3d",<br />
"-moz-transform": "rotateY(0deg)",<br />
"-moz-transition": "all .7s",<br />
"-moz-transform-origin": "100% 100%",<br />
"-moz-transform-style": "preserve-3d",<br />
"-ms-transform": "rotateY(0deg)",<br />
"-ms-transition": "all .7s",<br />
"-ms-transform-origin": "100% 100%",<br />
"-ms-transform-style": "preserve-3d",<br />
"transform": "rotateY(0deg)",<br />
"transition": "all .7s",<br />
"transform-origin": "100% 100%",<br />
"transform-style": "preserve-3d"<br />
});<br />
});<br />
})<br />
</script><br />
</head><br />
<body><br />
<br /><br />
<br /><br />
<div style="position: relative; height: 400px; width: 825px; margin: auto;"><br />
<div class="contener"><br />
<div id="corp_page" style="overflow: scroll"><br />
<div style="width: 100%"><br />
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%"><br />
<tbody><br />
<tr><br />
<td style="padding: 10px; font-weight: 100; color: #ffffff;" valign="top"><br />
WIFEO/CODE<br />
</td><br />
</tr><br />
<tr><br />
<td style="padding: 10px;" valign="top"><br />
Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam licentia<br />
crudelitati indulta per suspicionum nebulas aestimati quidam noxii damnabantur.<br />
quorum pars necati, alii puniti bonorum multatione actique laribus suis extorres<br />
nullo sibi relicto praeter querelas et lacrimas, stipe conlaticia victitabant, et<br />
civili iustoque imperio ad voluntatem converso cruentam, claudebantur opulentae<br />
domus et clarae.<br />
</td><br />
</tr><br />
</tbody><br />
</table><br />
</div><br />
</div><br />
</div><br />
<div class="menu"><br />
Item 2<br /><br />
<br /><br />
Item 3<br /><br />
<br /><br />
Item 4<br /><br />
<br /><br />
<img id="btn_menu_close" src="2.png" style="cursor: pointer;" /></div><br />
<div style="top: 0; left: 0; position: absolute; cursor: pointer;"><br />
<img id="btn_menu" src="1.png" /><br />
</div><br />
</div><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
</body><br />
</html></td>
</tr>
</table>
<p> </p>
<p> </p>
<p>以上代码包含了两张素材图片 1.png 和 2.png：</p>
<p> </p>
<p>1.png</p>
<p><img width="50" height="50" src="http://www.xxx.cn/2014/11/14/20141114003452843.png" alt='jquery+css3实现炫酷菜单导航实例' /></p>
<p> </p>
<p>2.png</p>
<p><img width="50" height="50" src="http://www.xxx.cn/2014/11/14/20141114003454929.png" alt='jquery+css3实现炫酷菜单导航实例' /></p></td>
</tr>
</table>
