jquery和css3实现的炫酷时尚的菜单导航
程序员文章站
2022-06-13 11:39:15
今天为大家带来的是jquery和css3实现的不错的导航菜单。点击列表图表后,内容页面向内移动显示菜单项。当单击关闭菜单按钮时,菜单项隐藏,内容页恢复原位。看下图
我们看下实...
今天为大家带来的是jquery和css3实现的不错的导航菜单。点击列表图表后,内容页面向内移动显示菜单项。当单击关闭菜单按钮时,菜单项隐藏,内容页恢复原位。看下图
我们看下实现代码:
html代码:
<p style="position: relative; height: 400px; width: 825px; margin: auto;"> <p class="contener"> <p id="corp_page" style="overflow: scroll"> <p 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> </p> </p> </p> <p 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;" /></p> <p style="top: 0; left: 0; position: absolute; cursor: pointer;"> <img id="btn_menu" src="1.png" /> </p> </p>
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" }); }); })
上一篇: JAVA开发面试题&基础篇&第三部分
下一篇: docker镜像导入导出