今天为大家带来的是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="/UploadFiles/2021-04-02/2.png">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" }); }); })
最新资源
- 群星.2024-繁花电视剧原声带3CD【环球】【WAV+C
- 江希文.1994-伝说少女(饿狼伝说动画原声大碟)【
- 洪荣宏.2010-上爱的人【华特】【WAV+CUE】
- 《大牌国语情歌 经典再现 深情对唱 2CD》[WAV/分
- 《陈百强粉红色的一生精选 3CD》[FLAC/分轨][1.
- 《丁当 20首重量级歌曲 Fu Good 下一站天后 2CD
- 歌莉雅.2012-My.Voice.Story【环星】【FLAC分轨
- 群星.1993-一曲成名·青春无悔【飞碟】【WAV+CUE
- 刘德华.2000-爱无知(金装版)【NEWMELODY】【WAV
- 许巍《时光漫步》1CD[FLAC/分轨][804.3MB]