㈠ html 側滑 菜單透明 手機

CSS樣式
整個包裹div被設置為相對定位，並為其設置左浮動和陰影效果。
.mobile {
float: left; position: relative;
box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.5);
overflow: hidden;
}

這里的按鈕製作使用了一個小技巧。作為按鈕的checkbox被設置為隱藏狀態，然後在<section>元素使用一個<label>元素來和它關聯，將<label>製作為按鈕樣式，實際在點擊<label>時，相當於點擊了checkbox按鈕。

㈡ html5如何做一個隨著滾動條而自動置頂的導航菜單

修改的就是抄那些top之類的，如下所示：從第一個變成第二個。。。<divclass="navbars"style="top:44px;">
<navrole="main"class=""style="margin-top:20px;margin-left:20px;margin-right:20px;">
</nav>
</div><divclass="navbars"style="top:0px;">
<navrole="main"class=""style="margin-top:0px;margin-left:0px;margin-right:0px;">
</nav>
</div>

㈢ html5左側彈出菜單怎樣實現

用html是做不出來的，必須得靠div+css結合javascript才能夠做出來。

㈣ html5 div導航單獨滑動問題！

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

㈤ html5 菜單左右滑動

可以放到移動端的html5動畫切換效果
默認也可以自動切換
支持滑鼠點擊拖動、滑動
將head中的樣式引入到你的樣式表中
將body中需要的代碼部分拷貝過去即可

㈥ 求一個html5支持滑動的，效果類似於建設銀行app的菜單。，

avascript有對象的概念，也可以模擬類。

當然我這里說的對象和類不知道是不是指你說的「對象圖」中的對象和「類圖」中的類。
javascript可以以一種面向對象的編程方式來設計你所說的文檔，就是說你在做功能之前把需要的類和對象都設計好，但前提是你要對javascript面向對象的編程比較熟悉。

㈦ html5做手機app開發時有沒有好的側滑菜單插件

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, ration, 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:{
ration:150
}
});
});
（2）關閉側滑菜單，實際就是設置main的樣式了，比如：
main.setStyle({
left: '0',
transition: {
ration: 150
}
});
另外注意窗體切換完成後要關掉menu
//等窗體動畫結束後，隱藏菜單webview，節省資源；
setTimeout(function() {
menu.hide();
}, 200);
5.被打開的WebView的界面如何控制關閉側滑菜單：
（1）先要找到主頁面，main = plus.webview.currentWebview().opener();
（2）激發主頁面的某個事件，例如：mui.fire(main,"menu:swipeleft");

㈧ 跪求一個html5支持滑動的，效果類似於建設銀行app的旋轉菜單效果

我都想要呢，誰有這個啊？

㈨ html5 浮動側滑菜單欄怎樣實現

一共有4種側滑動畫特效。這款CSS3菜單的特點是滑鼠劃過時即可以各種動畫方式展開和隱藏菜單項，該動畫方式由CSS3中的transition-delay屬性來完成
<style type="text/css">

/*Fontawesome Iconfont*/

@import url(http://libs.useso.com/js/font-awesome/4.0.1/css/font-awesome.min.css);

@import url(http://fonts.useso.com/css?family=Montserrat);

* {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);}

.grid>li section {position: relative; transition: all 0.25s; width: 100%;}

.grid>li 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*/

.grid>li:hover .sidenav {width: 150px;}

.grid>li:hover section {margin-left: 150px;}

.grid>li: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="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></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">

<li><a><i class="fa fa-check"></i><span class="w"><b>Tasks</b></span></a></li>

<li><a><i class="fa fa-inbox"></i><span class="w"><b>Messages</b></span></a></li>

<li><a><i class="fa fa-pencil"></i><span class="w"><b>New Post</b></span></a></li>

<li><a><i class="fa fa-cog"></i><span class="w"><b>Settings</b></span></a></li>

<li><a><i class="fa fa-star"></i><span class="w"><b>Starred</b></span></a></li>

<li><a><i class="fa fa-power-off"></i><span class="w"><b>Logout</b></span></a></li>

</ul>

<section>

<h2>Door Opening</h2>

<img src="img/mb1.png"/>

</section>

</li>

<li class="two">

<ul class="sidenav">

<li><a><i class="fa fa-check"></i><span class="w"><b>Tasks</b></span></a></li>

<li><a><i class="fa fa-inbox"></i><span class="w"><b>Messages</b></span></a></li>

<li><a><i class="fa fa-pencil"></i><span class="w"><b>New Post</b></span></a></li>

<li><a><i class="fa fa-cog"></i><span class="w"><b>Settings</b></span></a></li>

<li><a><i class="fa fa-star"></i><span class="w"><b>Starred</b></span></a></li>

<li><a><i class="fa fa-power-off"></i><span class="w"><b>Logout</b></span></a></li>

</ul>

<section>

<h2>Flip Down</h2>

<img src="img/mb2.png"/>

</section>

</li>

<li class="three">

<ul class="sidenav">

<li><a><i class="fa fa-check"></i><span class="w"><b>Tasks</b></span></a></li>

<li><a><i class="fa fa-inbox"></i><span class="w"><b>Messages</b></span></a></li>

<li><a><i class="fa fa-pencil"></i><span class="w"><b>New Post</b></span></a></li>

<li><a><i class="fa fa-cog"></i><span class="w"><b>Settings</b></span></a></li>

<li><a><i class="fa fa-star"></i><span class="w"><b>Starred</b></span></a></li>

<li><a><i class="fa fa-power-off"></i><span class="w"><b>Logout</b></span></a></li>

</ul>