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


Posted in Javascript onSeptember 01, 2014

今天为大家带来的是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"
});

});
})
Javascript 相关文章推荐
js 对象是否存在判断
Jul 15 Javascript
JavaScript 学习笔记(六)
Dec 31 Javascript
stream.js 一个很小、完全独立的Javascript类库
Oct 28 Javascript
JS 实现导航栏悬停效果
Sep 23 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
深入理解Vue nextTick 机制
Apr 28 Javascript
处理JavaScript值为undefined的7个小技巧
Jul 28 Javascript
jquery实现广告上下滚动效果
Mar 04 jQuery
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
Sep 01 #Javascript
jQuery淡入淡出元素让其效果更为生动
Sep 01 #Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 #Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 #Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 #Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 #Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 #Javascript
You might like
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
CodeIgniter CLI模式简介
2014/06/17 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
JavaScript数组去重的两种方法推荐
2016/04/05 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
分享Python文本生成二维码实例
2016/01/06 Python
Python中单、双下划线的区别总结
2017/12/01 Python
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
python自动发送邮件脚本
2018/06/20 Python
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
财务会计人员岗位职责
2013/11/30 职场文书
初三学习计划书范文
2014/04/30 职场文书
公司节能减排倡议书
2014/05/14 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python