html5做手機(jī)app開發(fā)時有沒有好的側(cè)滑菜單插件

1.思路：

十多年專注成都網(wǎng)站制作，企業(yè)網(wǎng)站制作，個人網(wǎng)站制作服務(wù)，為大家分享網(wǎng)站制作知識、方案，網(wǎng)站設(shè)計流程、步驟,成功服務(wù)上千家企業(yè)。為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計及定制高端網(wǎng)站建設(shè)服務(wù),專注于企業(yè)網(wǎng)站制作,高端網(wǎng)頁制作,對餐廳設(shè)計等多個領(lǐng)域，擁有豐富的網(wǎng)站運維經(jīng)驗。

其時有2個WebView，一個main是用來裝主頁面，一個menu是用來裝菜單（為提高性能，菜單項是采用了預(yù)加載方式的，預(yù)加載時為了避免和主頁面爭奪資源，采用延時加載，例如：

//plusReady事件后，自動創(chuàng)建menu窗口；

mui.plusReady(function() {

main = plus.webview.currentWebview();

//setTimeout的目的是等待窗體動畫結(jié)束后，再執(zhí)行create webview操作，避免資源競爭，導(dǎo)致窗口動畫不流暢；

setTimeout(function () {

//側(cè)滑菜單默認(rèn)隱藏，這樣可以節(jié)省內(nèi)存；

menu = mui.preload({

id: 'offcanvas-drag-right-plus-menu',

url: 'offcanvas-drag-right-plus-menu.html',

styles: {

left: 0,

width: '70%'

}

});

},300);

});

2. 所謂側(cè)滑，就是控制菜單WebView的顯示，使用它的left來定位左邊位置；

3. 要打開新的webView，要注意webview的show方法使用：

void plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );

參數(shù)含義：（1）是webview對象 （2）動畫效果，從沒顯示過，一般用"none"，（3）動畫過渡時間 （4）當(dāng)指定Webview窗口顯示動畫執(zhí)行完畢時觸發(fā)回調(diào)函數(shù)，窗口無動畫效果（如"none"動畫效果）時也會觸發(fā)此回調(diào)。（5）傳遞的參數(shù)；

4.顯示的方法：

（1）按鈕點擊后，讓menu直接show出來，并對main設(shè)置樣式，比如

menu.show("none",0,function(){

main.setStyle({

left:"70%",

transition:{

duration:150

}

});

});

（2）關(guān)閉側(cè)滑菜單，實際就是設(shè)置main的樣式了，比如：

main.setStyle({

left: '0',

transition: {

duration: 150

}

});

另外注意窗體切換完成后要關(guān)掉menu

//等窗體動畫結(jié)束后，隱藏菜單webview，節(jié)省資源；

setTimeout(function() {

menu.hide();

}, 200);

5.被打開的WebView的界面如何控制關(guān)閉側(cè)滑菜單：

（1）先要找到主頁面，main = plus.webview.currentWebview().opener();

（2）激發(fā)主頁面的某個事件，例如：mui.fire(main,"menu:swipeleft");

html5 div導(dǎo)航單獨滑動問題！

給裝兩個分類的div加上overflow:scroll試試，分類內(nèi)部的元素float:left

html5左側(cè)彈出菜單怎樣實現(xiàn)

這個可以通過絕對定位，配合left設(shè)置 或者translate去實現(xiàn)

left的方法：

比如讓class為menu的元素寬為300px，高100%的，設(shè)置left為-300px；在這期間可以加一個過渡transition:left 0.3s ...；

然后讓class為menu active的元素設(shè)置 left設(shè)置為0就可以了 ，在這期間可以加一個過渡transition:left 0.3s ...；

然后可以通過Jquery的toggleClass('active');來實現(xiàn)切換

translate

比如讓class為menu的元素寬為300px，高100%的，設(shè)置left為-300px；在這期間可以加一個過渡transition:left 0.3s ...；

然后讓class為menu active的元素設(shè)置 transform:translate3d(-300px,0,0) ，在這期間可以加一個過渡transition:left 0.3s ...；

然后可以通過Jquery的toggleClass('active');來實現(xiàn)切換

這個過程中 需要注意 body需要overflow：hidden; (不然會有滾動條，可設(shè)置overflow-x即可)

left 和 translate 最好用translate ，translate3d可以開啟GPU硬件加速，性能會更好，體驗會更流暢

我github有類似小組件樣式

github： IFmiss

希望能解決你的問題

html5 浮動側(cè)滑菜單欄怎樣實現(xiàn)

一共有4種側(cè)滑動畫特效。這款CSS3菜單的特點是鼠標(biāo)劃過時即可以各種動畫方式展開和隱藏菜單項，該動畫方式由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