dx html5怎樣寫(xiě)下拉菜單

1）、普通下拉列表菜單

創(chuàng)新互聯(lián)公司咨詢熱線：18982081108，為您提供成都網(wǎng)站建設(shè)網(wǎng)頁(yè)設(shè)計(jì)及定制高端網(wǎng)站建設(shè)服務(wù)，創(chuàng)新互聯(lián)公司網(wǎng)頁(yè)制作領(lǐng)域十載，包括成都廣告推廣等多個(gè)領(lǐng)域擁有豐富的網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，選擇創(chuàng)新互聯(lián)公司，為網(wǎng)站錦上添花。

html代碼如下：

form?action=""?method="get"?

label1、普通下拉列表菜單/label?

select?name=""?

option?value="0"DIVCSS5/option?

option?value="1"DIVCSS5/option?

/select?

/form?

2）、跳轉(zhuǎn)下拉列表菜單（如常見(jiàn)點(diǎn)擊后跳轉(zhuǎn)到選擇網(wǎng)站）

常常一些網(wǎng)站做友情鏈接，與部門之間使用select下拉標(biāo)簽實(shí)現(xiàn)網(wǎng)址跳轉(zhuǎn)。下面我們通過(guò)代碼與案例接受select跳轉(zhuǎn)菜單應(yīng)用。

跳轉(zhuǎn)菜單html代碼如下：

form?action=""?method="get"?

label2、跳轉(zhuǎn)的下拉列表菜單/label?

select?name="jumpMenu"?id="jumpMenu"

onchange="MM_jumpMenu('parent',this,0)"?

option?value=""Rothur/option?

option?value=""Rothur/option?

/select?

/form?

實(shí)現(xiàn)跳轉(zhuǎn)還需要在head標(biāo)簽內(nèi)加入Js腳本動(dòng)作代碼：

script?type="text/javascript"?!--?function?MM_jumpMenu(targ,selObj,restore){?//v3.0?eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");?if?(restore)?selObj.selectedIndex=0;?}?//--?/script

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

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

left的方法：

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

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

然后可以通過(guò)Jquery的toggleClass('active');來(lái)實(shí)現(xiàn)切換

translate

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

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

然后可以通過(guò)Jquery的toggleClass('active');來(lái)實(shí)現(xiàn)切換

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

left 和 translate 最好用translate ，translate3d可以開(kāi)啟GPU硬件加速，性能會(huì)更好，體驗(yàn)會(huì)更流暢

我github有類似小組件樣式

github： IFmiss

希望能解決你的問(wèn)題

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

一共有4種側(cè)滑動(dòng)畫(huà)特效。這款CSS3菜單的特點(diǎn)是鼠標(biāo)劃過(guò)時(shí)即可以各種動(dòng)畫(huà)方式展開(kāi)和隱藏菜單項(xiàng)，該動(dòng)畫(huà)方式由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