用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 相关文章推荐
图片按比例缩放函数
Jun 26 Javascript
style、 currentStyle、 runtimeStyle区别分析
Aug 01 Javascript
Vue.js数据绑定之data属性
Jul 07 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 Javascript
使用Angular material主题定义自己的组件库的配色体系
Sep 04 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 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
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
通过PHP实现用户注册后邮箱验证激活
2020/11/10 PHP
js中for in语句的用法讲解
2015/04/24 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
Layui数据表格跳转到指定页的实现方法
2019/09/05 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
2020/07/27 Javascript
python getopt 参数处理小示例
2009/06/09 Python
详解Python迭代和迭代器
2016/03/28 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
Python实现查看系统启动项功能示例
2018/05/10 Python
使用Python读取二进制文件的实例讲解
2018/07/09 Python
PyQt5响应回车事件的方法
2019/06/25 Python
Python编程快速上手——强口令检测算法案例分析
2020/02/29 Python
简单了解Django项目应用创建过程
2020/07/06 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
使用CSS3来代替JS实现交互
2017/08/10 HTML / CSS
中邮全球便购:中国邮政速递物流
2017/03/04 全球购物
土木工程实习生自我鉴定
2013/09/19 职场文书
小学教研工作制度
2014/01/15 职场文书
车辆转让协议书
2014/04/15 职场文书
爱国演讲稿500字
2014/05/04 职场文书
校园安全演讲稿
2014/05/09 职场文书
企业标语大全
2014/07/01 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
工资证明范本
2015/06/12 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书