jquery和css3实现的炫酷时尚的菜单导航

今天为大家带来的是jquery和css3实现的不错的导航菜单。点击列表图表后，内容页面向内移动显示菜单项。当单击关闭菜单按钮时，菜单项隐藏，内容页恢复原位。看下图

源码下载

我们看下实现代码：

html代码：

<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<br />
<br />
Item 3<br />
<br />
Item 4<br />
<br />
<img id="btn_menu_close" src="2.png" style="cursor: pointer;" /></div>
<div style="top: 0; left: 0; position: absolute; cursor: pointer;">
<img id="btn_menu" src="1.png" />
</div>
</div>

css代码：

.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;
}

js代码：

$(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"
});

});
})

您可能感兴趣的文章:

• CSS3 media queries结合jQuery实现响应式导航
• jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
• 各式各样的导航条效果css3结合jquery代码实现
• jQuery+CSS3实现四种应用广泛的导航条制作实例详解
• 使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
• 7款风格新颖的jQuery/CSS3菜单导航分享
• jquery+css3实现熊猫tv导航代码分享