用jquery写的菜单从左往右滑动出现


Posted in Javascript onApril 11, 2014

最近,刚好在研究微网站的制作,查阅了大量的资料都是关于微信3平台开发教程,几乎没有这类的介绍,不过都是第三方平台提供模板制作微站而已,后来很感谢柳峰博客最后写的微网站的解惑,

“什么是微网站?

微网站是新瓶装老酒,被一些搞营销的人给神化了,以至于很多开发者都在问什么是微网站,如何开发微网站。微网站本质上就是以微信浏览器为入口的手机网站(Web APP),能够兼容Android、iOS、WP等操作系统。开发微网站用到的技术与开发普通网站一样,都是基于HTML(HTML5)、CSS、Javascript等,所以有普通网站开发经验的开发者,完全有能力开发微网站。

PS:初学者以后再看到什么以“微”开头的新名词,例如:微商城、微客服、微统计,直接把“微”字去掉或者把“微”当作是“基于微信的”就不难理解了。”, 

大部分都涉及html5的写法,这样就好理解了。。。还有就是参考了“微信生意宝”中的案例,里面的导航自己写了下demo,感觉还是很好理解的,下面上界面效果图

用jquery写的菜单从左往右滑动出现
因为是用jq所写,需要引用库文件,这边使用的是在线的cdn地址:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

然后编写html导航结构

<div class="quick"></div> <div class="slideLeftMenu"> 
<div class="quick-toolbar"> 
<p class="toolbar-title">QUICK MENU</p> 
<span class="toolbar-icon-delete"></span> 
</div> 
<div class="menuList"> 
<a class="list-item"> 
<p class="list-item-title">Home</p> 
<span class="list-item-icon"></span> 
</a> 
<a class="list-item"> 
<p class="list-item-title">About Us</p> 
<span class="list-item-icon"></span> 
</a> 
<a class="list-item"> 
<p class="list-item-title">Products</p> 
<span class="list-item-icon"></span> 
</a> 
<a class="list-item"> 
<p class="list-item-title">News</p> 
<span class="list-item-icon"></span> 
</a> 
<a class="list-item"> 
<p class="list-item-title">Contact Us</p> 
<span class="list-item-icon"></span> 
</a> 
</div> 
</div> 
<div class="masklayer"></div>

这部分没有什么技术性,纯粹就是div结构
<span style="white-space:pre"> </span>*{ margin:0; padding:0;} 
body{ 
font-size:1em; 
height:100%; 
margin:0; 
padding:0; 
}

/*这边是快捷按钮的样式,使用了css3属性写法,没考虑ie8-*/ 
.quick{ 
position:relative; 
left:0; 
top:0; 
width:100%; 
height:32px; 
background:-webkit-gradient(linear, left top, left bottom, from(#99f), to(#96f)); 
background:-webkit-linear-gradient(#99f, #96f); 
background: -moz-linear-gradient(#99f, #96f); 
background: -ms-linear-gradient(#99f, #9f); 
background: -o-linear-gradient(#99f, #96f); 
background: linear-gradient(#99f, #96f); 
}/*这边就是导航的css了,*/ 
<span style="white-space:pre"> </span>.slideLeftMenu{ 
display:none; 
width:272px; 
min-height:100%; 
background:#3d3d3d; 
position:absolute; 
right:0; 
top:0; 
z-index:3; 
} 
.slideLeftMenu .quick-toolbar, 
.slideLeftMenu .list-item{ 
display:block; 
width:100%; 
float:left; 
height:42px; 
line-height:42px; 
background:-webkit-gradient(linear, left top, left bottom, from(#444), to(#222)); 
background:-webkit-linear-gradient(#444, #222); 
background: -moz-linear-gradient(#444, #222); 
background: -ms-linear-gradient(#444, #222); 
background: -o-linear-gradient(#444, #222); 
background: linear-gradient(#444, #222); 
} 
.quick-toolbar .toolbar-title{ 
float:right; 
color:#fff; 
margin-right:10px; 
} 
.quick-toolbar .toolbar-icon-delete{ 
float:left; 
width:18px; 
height:18px; 
margin:11px 0 0 10px; 
background:url(images/icons-18-white.png) -73px -1px #212121; 
border-radius:9px; 
} 
.menuList .list-item-title{ 
float:left; 
font:blod 1.125em Arial, Helvetica, sans-serif; 
color:#fff; 
text-indent:0.75em; 
text-align:left; 
border:solid 0px red; 
} 
.menuList .list-item-icon{ 
float:right; 
width:18px; 
height:18px; 
margin:11px 10px 0 0; 
background:url(images/icons-18-white.png) -108px -1px #212121; 
border-radius:9px; 
}/*遮罩的css部分,这些绝大部分都是使用绝对定位实现的,因为我们要让导航从右侧平滑的飞入*/ 
.masklayer{ 
display:none; 
width:100%; 
height:100%; 
position:absolute; 
left:0; 
top:0; 
background:#000; 
opacity:0.6; 
z-index:2; 
}

把css都写好了,也就完成一大半了,剩下就是使用jq处理动画部分,如下代码
window.QuickPanel = { //定义全局函数 
'isOpened': false, 
'opened': function(){ //定义面板打开的方法,打开的同时如果点击了背景层和快捷按钮层,执行关闭面板 
$masklayer.fadeIn().on("click" ,function(){ 
window.QuickPanel.closed(); 
}); 
$quickpanel_toolbar.on("click" ,function(){ 
window.QuickPanel.closed(); 
}); 
$panel.css({ //从右边飞入,使用绝对定位来操作 
"width":"272px", 
"top":"-6px", 
"right":"-272px" 
}).show().animate({"right":"0"},function(){ 
window.QuickPanel.isOpened = true; 
}); 
}, 
'closed': function(){ //定义关闭面板方法 
$panel.css({"right":"0"}).show().animate({ 
"right":"-272px" 
},function(){ 
$masklayer.fadeOut(); //这边才淡出的遮罩,我点击快的时候就会出问题。。。 
window.QuickPanel.isOpened = false; 
$panel.hide(); //等动画结束了吧菜单隐藏,不至于有滚动条 
}); 
} 
};

这部分是最重要的,我封装了个quickpanel的函数,里面有open和closed俩方法,,供我们其他dom元素点击调用会比较方便,最终实现就是图上的下效果,

ps:这边有个问题,在滑动过程会出现滚动条,这样其实是非常不美观的,请问大牛们有办法解决吗??我把附件放资源那边了,麻烦下载运行看看,如果有什么地方不对劲请留言提出来哦~~非常感谢

Javascript 相关文章推荐
javascript返回顶部效果(自写代码)
Jan 06 Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 Javascript
js给selected添加options的方法
May 06 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 Javascript
关于jQuery库冲突的完美解决办法
May 20 jQuery
jquery实现图片轮播器
May 23 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
Vue.js划分组件的方法
Oct 29 Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
JS实现判断有效的数独算法示例
Feb 25 Javascript
瀑布流布局代码一例
Apr 11 #Javascript
javascript读写json示例
Apr 11 #Javascript
javascript如何判断输入的url是否正确
Apr 11 #Javascript
javascript判断office版本示例
Apr 11 #Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 #Javascript
jquery解析xml字符串简单示例
Apr 11 #Javascript
代码获取历史上的今天发生的事
Apr 11 #Javascript
You might like
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
PHP中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
php xml 入门学习资料
2011/01/01 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
php限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
浅谈Coreseek、Sphinx-for-chinaese、Sphinx+Scws的区别
2016/12/15 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
jQuery实现可以计算进制转换的计算器
2020/10/19 jQuery
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
Python实现爬虫抓取与读写、追加到excel文件操作示例
2018/06/27 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
python实现对变位词的判断方法
2020/04/05 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
"引用"与多态的关系
2013/02/01 面试题
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
集团薪酬管理制度
2014/01/13 职场文书
雪山饭庄的创业计划书范文
2014/01/18 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
美术课外活动总结
2014/07/08 职场文书
查摆问题整改措施
2014/10/24 职场文书
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android