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

最近，刚好在研究微网站的制作，查阅了大量的资料都是关于微信3平台开发教程，几乎没有这类的介绍，不过都是第三方平台提供模板制作微站而已，后来很感谢柳峰博客最后写的微网站的解惑，
“什么是微网站？
微网站是新瓶装老酒，被一些搞营销的人给神化了，以至于很多开发者都在问什么是微网站，如何开发微网站。微网站本质上就是以微信浏览器为入口的手机网站（Web APP），能够兼容Android、iOS、WP等操作系统。开发微网站用到的技术与开发普通网站一样，都是基于HTML（HTML5）、CSS、Javascript等，所以有普通网站开发经验的开发者，完全有能力开发微网站。
PS：初学者以后再看到什么以“微”开头的新名词，例如：微商城、微客服、微统计，直接把“微”字去掉或者把“微”当作是“基于微信的”就不难理解了。”， 
大部分都涉及html5的写法，这样就好理解了。。。还有就是参考了“微信生意宝”中的案例，里面的导航自己写了下demo，感觉还是很好理解的，下面上界面效果图

因为是用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结构