用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 相关文章推荐
日期函数扩展类Ver0.1.1
Sep 07 Javascript
可以文本显示的公告栏的js代码
Mar 11 Javascript
javascript 动态生成私有变量访问器
Dec 06 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 Javascript
Bootstrap简单表单显示学习笔记
Nov 15 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
bootstrap switch开关组件使用方法详解
Aug 22 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 Javascript
JavaScript实现简单进度条效果
Mar 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
组合算法的PHP解答方法
2012/02/04 PHP
php curl post 时出现的问题解决
2014/01/30 PHP
php实现网站留言板功能
2015/11/04 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
简单实现php上传文件功能
2017/09/21 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
JavaScript For Beginners(转载)
2007/01/05 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
Vue计算属性的使用
2017/08/04 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
浅谈JavaScript中的“!!”作用
2020/08/03 Javascript
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
Python跳出循环语句continue与break的区别
2014/08/25 Python
python 循环while和for in简单实例
2016/08/16 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
如何在Django中设置定时任务的方法示例
2019/01/18 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
家居装修公司创业计划书范文
2014/03/20 职场文书
IT工程师岗位职责
2014/07/04 职场文书
2014年高一班主任工作总结
2014/12/05 职场文书
事业单位年度考核评语
2014/12/31 职场文书
上课迟到检讨书
2015/05/06 职场文书
学历证明范文
2015/06/16 职场文书
Go语言测试库testify使用学习
2022/07/23 Golang