用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 相关文章推荐
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
javascript forEach通用循环遍历方法
Oct 11 Javascript
JavaScript之HTMLCollection接口代码
Apr 27 Javascript
javascript实现促销倒计时+fixed固定在底部
Sep 18 Javascript
javascript新闻跑马灯实例代码
Jul 29 Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
微信小程序实现运动步数排行功能(可删除)
Jul 05 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
vue 扩展现有组件的操作
Aug 14 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
PHP操作文件方法问答
2007/03/16 PHP
php带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
基于PHP Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
怎么在Windows系统中搭建php环境
2013/08/31 PHP
php命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
php提取微信账单的有效信息
2018/10/01 PHP
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
深入了解Node.js中的一些特性
2014/09/25 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
学习JavaScript设计模式之模板方法模式
2016/01/20 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
python实现一个简单的udp通信的示例代码
2019/02/01 Python
keras中的卷积层&amp;池化层的用法
2020/05/22 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
英文版银行求职信
2013/10/09 职场文书
努力学习演讲稿
2014/05/10 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
员工担保书范本
2015/09/22 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
MySQL的Query Cache图文详解
2021/07/01 MySQL