jquery和css3实现的炫酷时尚的菜单导航
更新时间:2014年09月01日 17:59:43 投稿:whsnow
点击列表图表后,内容页面向内移动显示菜单项。当单击关闭菜单按钮时,菜单项隐藏,内容页恢复原位
今天为大家带来的是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" }); }); })
相关文章
浅谈jquery选择器 :first与:first-child的区别
下面小编就为大家带来一篇浅谈jquery选择器 :first与:first-child的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-11-11jquery 通过ajax请求获取后台数据显示在表格上的方法
今天小编就为大家分享一篇jquery 通过ajax请求获取后台数据显示在表格上的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最新评论