效果体验：http://hovertree.com/texiao/mobile/2.htm
可以使用移动设备浏览器查看效果。
效果使用到jquery-2.1.4.min.js，该版本的jQuery库是用于支持HTML5的浏览器上，不再兼容IE8以前的浏览器，现在移动端浏览器一般都支持HTML5，所以使用该jQuery没问题。
HTML文件代码：
<!DOCTYPE html><html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /><meta name="apple-touch-fullscreen" content="yes" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" /><meta name="format-detection" content="telephone=no" /><title>移动端页面侧边导航滑入效果 - HoverTree</title><base target="_blank" /><script src='/images/loading.gif' data-original="http://hovertree.com/ziyuan/jquery/jquery-2.1.4.min.js"></script><link rel="stylesheet" href="http://hovertree.com/texiao/mobile/2/hvtmoblilecss2.css"><style>a{color:white}</style></head><body><div class="wrapperhovertree"><div class="container"><header><h1><a href="javascript:;" class="slide-menu" target="_self"><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/mobile/2/menu.png" ></a>HoverTree Menu</h1></header><div class="imgbox"><div>请点击左上角图标，菜单将从左侧滑出。<a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/hvtart/bjae/i1qo2kg6.htm">原文</a> <a href="http://hovertree.com/texiao/">特效库</a></div><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/mobile/2/img1.jpg" ><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/mobile/2/img2.jpg" ><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/mobile/2/img3.jpg" ><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/mobile/2/img4.jpg" ><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/mobile/2/img5.jpg" ><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/mobile/2/img6.jpg" ><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/mobile/2/img7.jpg" ><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/mobile/2/img8.jpg" ><img src='/images/loading.gif' data-original="http://hovertree.com/texiao/mobile/2/img9.jpg" ></div></div></div><!-- 侧边导航 --><div class="slide-mask"></div><aside class="slide-wrapper"><div><div><strong>HoverTree</strong></div><ul><li><a href="http://hovertree.com/menu/jquery/">jQuery</a></li><li><a href="http://hovertree.com/menu/javascript/">JavaScript</a></li><li><a href="http://hovertree.com/menu/html5">HTML5</a></li><li><a href="http://hovertree.com/menu/css">CSS</a></li><li><a href="http://hovertree.com/menu/mobile/">移动Web</a></li><li><a href="http://hovertree.com/menu/texiao/">网页特效</a></li><li><a href="http://tool.keleyi.com/">工具</a></li><li><a href="http://keleyi.com/">柯乐义</a></li><li><a href="http://hovertree.com/guestbook/">留言</a></li></ul></div></aside><footer>hovertree.com 2014-2015</footer><script>$(function(){$('aside.slide-wrapper').on('touchstart', 'li', function(e){$(this).addClass('current').siblings('li').removeClass('current');});$('a.slide-menu').on('click', function(e){var wh = $('div.wrapperhove'+'rtree').height();$('div.slide-mask').css('height', wh).show();$('aside.slide-wrapper').css('height', wh).addClass('moved');});$('div.slide-mask').on('click', function(){$('div.slide-mask').hide();$('aside.slide-wrapper').removeClass('moved');});});</script></body></html>
web前端资源：http://www.cnblogs.com/jihua/p/webfront.html
原标题：移动端页面侧边导航滑入效果
关键词：
我知道了 