13518219792
1.思路：
十多年专注成都网站制作，企业网站制作，个人网站制作服务，为大家分享网站制作知识、方案，网站设计流程、步骤,成功服务上千家企业。为您提供网站建设,网站制作,网页设计及定制高端网站建设服务,专注于企业网站制作,高端网页制作,对餐厅设计等多个领域，拥有丰富的网站运维经验。
其时有2个WebView，一个main是用来装主页面，一个menu是用来装菜单（为提高性能，菜单项是采用了预加载方式的，预加载时为了避免和主页面争夺资源，采用延时加载，例如：
//plusReady事件后，自动创建menu窗口；
mui.plusReady(function() {
main = plus.webview.currentWebview();
//setTimeout的目的是等待窗体动画结束后，再执行create webview操作，避免资源竞争，导致窗口动画不流畅；
setTimeout(function () {
//侧滑菜单默认隐藏，这样可以节省内存；
menu = mui.preload({
id: 'offcanvas-drag-right-plus-menu',
url: 'offcanvas-drag-right-plus-menu.html',
styles: {
left: 0,
width: '70%'
}
});
},300);
});
2. 所谓侧滑，就是控制菜单WebView的显示，使用它的left来定位左边位置；
3. 要打开新的webView，要注意webview的show方法使用：
void plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );
参数含义：（1）是webview对象 （2）动画效果，从没显示过，一般用"none"，（3）动画过渡时间 （4）当指定Webview窗口显示动画执行完毕时触发回调函数，窗口无动画效果（如"none"动画效果）时也会触发此回调。（5）传递的参数；
4.显示的方法：
（1）按钮点击后，让menu直接show出来，并对main设置样式，比如
menu.show("none",0,function(){
main.setStyle({
left:"70%",
transition:{
duration:150
}
});
});
（2）关闭侧滑菜单，实际就是设置main的样式了，比如：
main.setStyle({
left: '0',
transition: {
duration: 150
}
});
另外注意窗体切换完成后要关掉menu
//等窗体动画结束后，隐藏菜单webview，节省资源；
setTimeout(function() {
menu.hide();
}, 200);
5.被打开的WebView的界面如何控制关闭侧滑菜单：
（1）先要找到主页面，main = plus.webview.currentWebview().opener();
（2）激发主页面的某个事件，例如：mui.fire(main,"menu:swipeleft");
给装两个分类的div加上overflow:scroll试试，分类内部的元素float:left
这个可以通过绝对定位，配合left设置 或者translate去实现
left的方法：
比如让class为menu的元素宽为300px，高100%的，设置left为-300px；在这期间可以加一个过渡transition:left 0.3s ...；
然后让class为menu active的元素设置 left设置为0就可以了 ，在这期间可以加一个过渡transition:left 0.3s ...；
然后可以通过Jquery的toggleClass('active');来实现切换
translate
比如让class为menu的元素宽为300px，高100%的，设置left为-300px；在这期间可以加一个过渡transition:left 0.3s ...；
然后让class为menu active的元素设置 transform:translate3d(-300px,0,0) ，在这期间可以加一个过渡transition:left 0.3s ...；
然后可以通过Jquery的toggleClass('active');来实现切换
这个过程中 需要注意 body需要overflow：hidden; (不然会有滚动条，可设置overflow-x即可)
left 和 translate 最好用translate ，translate3d可以开启GPU硬件加速，性能会更好，体验会更流畅
我github有类似小组件样式
github： IFmiss
希望能解决你的问题
一共有4种侧滑动画特效。这款CSS3菜单的特点是鼠标划过时即可以各种动画方式展开和隐藏菜单项，该动画方式由CSS3中的transition-delay属性来完成
style type="text/css"
/*Fontawesome Iconfont*/
@import url();
@import url();
* {margin: 0; padding: 0;}
li {list-style-type: none;}
.grid {float: left;width:980px;margin: 0 auto;}
.grid li { width: 285px; height: 500px; overflow: hidden; float: left; margin: 20px 0 20px 30px; position: relative; }
.grid li:hover {box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5);}
.gridli section {position: relative; transition: all 0.25s; width: 100%;}
.gridli h2 {font: bold 14px montserrat; color: #fff; text-transform: uppercase; position: absolute; text-align: center; width: 60%; left: 20%; top: 100px; padding: 10px 0; border: 2px solid white; border-radius: 4px;}
.sidenav { position: absolute; top: 0; left: 0; bottom: 0; background: linear-gradient(rgba(50,60,60, 1), rgba(50,60,60, 0.7)); width: 50px; transition: all 0.25s; overflow: hidden; padding-top: 100px;}
.sidenav li { _overflow: hidden; width: 150px; }
.sidenav a { text-decoration: none; color: #eee; display: block; line-height: 48px; }
.sidenav span {display: block;}
.sidenav b { padding-left 10px; display: block; color: white; font-family: Montserrat; font-size: 12px; line-height: 4; opacity: 0; }
.sidenav a i { display: block; float: left; font-size: 16px; line-height: 48px; width: 50px; text-align: center; }
/*All instances*/
.gridli:hover .sidenav {width: 150px;}
.gridli:hover section {margin-left: 150px;}
.gridli:hover b {opacity: 1;}
.sidenav li:nth-child(1) b, .sidenav li:nth-child(1) a {transition-delay: .08s;}
.sidenav li:nth-child(2) b, .sidenav li:nth-child(2) a {transition-delay: .16s;}
.sidenav li:nth-child(3) b, .sidenav li:nth-child(3) a {transition-delay: .24s;}
.sidenav li:nth-child(4) b, .sidenav li:nth-child(4) a {transition-delay: .32s;}
.sidenav li:nth-child(5) b, .sidenav li:nth-child(5) a {transition-delay: .40s;}
.sidenav li:nth-child(6) b, .sidenav li:nth-child(6) a {transition-delay: .48s;}
/*Three*/
.three .w {transform: perspective(100px) translateZ(-24px);}
.three b {transform: perspective(100px) rotateY(180deg) translateZ(24px) scale(0.5); }
.three:hover b {transform: perspective(100px) rotateY(0) translateZ(24px) scale(1); transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); background: transparent;}
.three .sidenav {width: 150px;}
/*Two*/
.two .w {transform: perspective(100px) translateZ(-24px);}
.two b {transform: perspective(100px) rotateX(90deg) translateZ(24px) scale(1.5); opacity: 0; }
.two:hover b {transform: perspective(100px) rotateX(0) translateZ(24px) scale(1); transition: all .4s; opacity: 1;}
.two .sidenav {width: 150px;}
/*One*/
.one .w {transform: perspective(100px);}
.one b {transform: perspective(100px) rotateY(90deg); _opacity: 0; transform-origin: left center; _border: 1px solid white;}
.one:hover b {transform: perspective(100px) rotateX(0); transition: all .4s; opacity: 1;}
.one .sidenav {width: 150px;}
.one .sidenav span {float: left; width: 100px;}
/style
!--[if IE]
script src=""/script
![endif]--
/head
body
div class="htmleaf-container"
header class="htmleaf-header bgcolor-11"
div class="htmleaf-demo center"
a href="index.html"DEMO1/a
a href="index2.html" class="current"DEMO2/a
a href="index3.html"DEMO3/a
a href="index4.html"DEMO4/a
/div
div style="text-align:center;clear:both;"
script src="/gg_bd_ad_720x90.js" type="text/javascript"/script
script src="/follow.js" type="text/javascript"/script
/div
/header
div class="htmleaf-content bgcolor-8"
ul class="grid"
li class="one"
ul class="sidenav"
liai class="fa fa-check"/ispan class="w"bTasks/b/span/a/li
liai class="fa fa-inbox"/ispan class="w"bMessages/b/span/a/li
liai class="fa fa-pencil"/ispan class="w"bNew Post/b/span/a/li
liai class="fa fa-cog"/ispan class="w"bSettings/b/span/a/li
liai class="fa fa-star"/ispan class="w"bStarred/b/span/a/li
liai class="fa fa-power-off"/ispan class="w"bLogout/b/span/a/li
/ul
section
h2Door Opening/h2
img src="img/mb1.png"/
/section
/li
li class="two"
ul class="sidenav"
liai class="fa fa-check"/ispan class="w"bTasks/b/span/a/li
liai class="fa fa-inbox"/ispan class="w"bMessages/b/span/a/li
liai class="fa fa-pencil"/ispan class="w"bNew Post/b/span/a/li
liai class="fa fa-cog"/ispan class="w"bSettings/b/span/a/li
liai class="fa fa-star"/ispan class="w"bStarred/b/span/a/li
liai class="fa fa-power-off"/ispan class="w"bLogout/b/span/a/li
/ul
section
h2Flip Down/h2
img src="img/mb2.png"/
/section
/li
li class="three"
ul class="sidenav"
liai class="fa fa-check"/ispan class="w"bTasks/b/span/a/li
liai class="fa fa-inbox"/ispan class="w"bMessages/b/span/a/li
liai class="fa fa-pencil"/ispan class="w"bNew Post/b/span/a/li
liai class="fa fa-cog"/ispan class="w"bSettings/b/span/a/li
liai class="fa fa-star"/ispan class="w"bStarred/b/span/a/li
liai class="fa fa-power-off"/ispan class="w"bLogout/b/span/a/li
/ul
