html5 div導(dǎo)航單獨(dú)滑動(dòng)問(wèn)題！

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

蓮池網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,蓮池網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為蓮池?cái)?shù)千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)公司要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的蓮池做網(wǎng)站的公司定做！

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

1.思路：

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

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

mui.plusReady(function() {

main = plus.webview.currentWebview();

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

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來(lái)定位左邊位置；

3. 要打開(kāi)新的webView，要注意webview的show方法使用：

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

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

4.顯示的方法：

（1）按鈕點(diǎn)擊后，讓menu直接show出來(lái)，并對(duì)main設(shè)置樣式，比如

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

main.setStyle({

left:"70%",

transition:{

duration:150

}

});

});

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

main.setStyle({

left: '0',

transition: {

duration: 150

}

});

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

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

setTimeout(function() {

menu.hide();

}, 200);

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

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

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

html5 浮動(dòng)側(cè)滑菜單欄怎樣實(shí)現(xiàn)

一共有4種側(cè)滑動(dòng)畫特效。這款CSS3菜單的特點(diǎn)是鼠標(biāo)劃過(guò)時(shí)即可以各種動(dòng)畫方式展開(kāi)和隱藏菜單項(xiàng)，該動(dòng)畫方式由CSS3中的transition-delay屬性來(lái)完成

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