jquery和css3实现的很酷的菜单导航
2023-09-27 14:28:19 时间
今天为大家带来的是jquery和css3实现的不错的导航菜单。点击列表图表后,内容页面向内移动显示菜单项。当单击关闭菜单按钮时,菜单项隐藏,内容页恢复原位。看下图
我们看下实现代码:
html代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.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代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
$(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" }); }); })
注:本文爱编程原创文章,转载请注明原文地址:http://www.w2bc.com/Article/5661
相关文章
- 从零开始学习jQuery (六) AJAX快餐
- jQuery 教程
- jQuery和CSS3超酷表单美化插件
- 原生和jQuery的ajax用法
- jquery on事件jquery on实现绑定多个事件
- jQuery 的 ready 函数是如何工作的?
- jQuery
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.14 技巧:移除元素
- jquery ready 延迟
- jquery中attr和prop的区别
- 16款创建CSS3动画的jQuery插件
- 15个CSS3和jQuery的超棒页面过渡效果教程
- jQuery层次选择器
- html5+Css3+JavaScript+jQuery:HTML5篇
- jquery ajax 访问接口或者后台函数