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 相关文章推荐
Google Map Api和GOOGLE Search Api整合实现代码
Jul 18 Javascript
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
js 高效去除数组重复元素示例代码
Dec 19 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
JavaScript数组push方法使用注意事项
Oct 30 Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 Javascript
微信小程序自定义弹窗wcPop插件
Nov 19 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
微信小程序select下拉框实现效果
May 15 Javascript
vue实现移动端图片上传功能
Dec 23 Javascript
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
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
php结合redis高并发下发帖、发微博的实现方法
2016/12/15 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
举例讲解Python设计模式编程中对抽象工厂模式的运用
2016/03/02 Python
深入浅出分析Python装饰器用法
2017/07/28 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
Python 使用office365邮箱的示例
2020/10/29 Python
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
Java语言程序设计测试题选择题部分
2014/04/03 面试题
大学生简历的个人自我评价
2013/12/04 职场文书
自荐书模板
2013/12/15 职场文书
晚宴邀请函范文
2014/01/15 职场文书
应用英语专业自荐信
2014/01/26 职场文书
初中生自我鉴定
2014/02/04 职场文书
企业厂务公开实施方案
2014/03/26 职场文书
热门专业求职信
2014/05/24 职场文书
2015年预算员工作总结
2015/05/14 职场文书
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技
Pillow图像处理库安装及使用
2022/04/12 Python