1、3種CSS3移動(dòng)隱藏菜單UI界面設(shè)計(jì)源碼這是一款效果非常酷的jQuery和CSS3移動(dòng)隱藏菜單UI界面設(shè)計(jì)。這個(gè)UI設(shè)計(jì)共有三種不同的打開隱藏菜單的效果，分別為滑動(dòng)顯示，MaterialDesign風(fēng)格效果和展開式效果。=xAfcOUtShareActivitySettingsCofttact使用方法HTML 吉構(gòu)這三種不同的隱藏菜單的HTML吉構(gòu)大致基本相同。第一種滑動(dòng)效果菜單的HTML吉構(gòu)如下:1.2.3.4.5.6. v/spa n7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.32.33.3

2、4.35. v/spa n v/spa n v/spa n v/spa n v/spa nvdiv class=itemvdiv class=imgv/divvspa n v/spa nvspa n v/spa nvspa n v/spa nv/divvdiv class=itemvdiv class=imgv/divvspa n v/spa nvspa n v/spa nvspa n v/spa nv/divv/divvdiv class=burgervdiv class=xv/divvdiv class=yv/divcsS羊式第一種隱藏菜單的滑動(dòng)效果的 CSS實(shí)現(xiàn)代碼非常簡(jiǎn)單。整個(gè)菜單設(shè)置

3、了固 定的寬度和高度，并設(shè)置指定貝茲曲線的動(dòng)畫過渡效果。div.menu height: 568px;width: 320px;margi n-left:-190px;opacity:。；positi on:relative;-webkit-tra nsitio n:all 500ms cubic-bezier(0.000, 0.995,0.990, 1.000);-moz-tra nsitio n: all 500ms cubic-bezier(0.000, 0.995,0.990, 1.000);-ms-tra nsitio n: all 500ms cubic-bezier(0.000,

4、 0.995,0.990, 1.000);-o-tra nsitio n: all 500ms cubic-bezier(0.000, 0.995,0.990, 1.000);tran sitio n: all 500ms cubic-bezier(0.000, 0.995,0.990, 1.000);在菜單按鈕被點(diǎn)擊的時(shí)候，背景圖片會(huì)輕微的移動(dòng)一些，制作出一點(diǎn)視覺 差效果。#menu-bgpositi on: absolute;left: -10px;top: -120px;opacity: 0.3;-webkit-tra nsiti on: all 500ms cubic-bezier(0

5、.000, 0.995,0.990, 1.000);-moz-tra nsitio n: all 500ms cubic-bezier(0.000, 0.995,0.990, 1.000);-ms-tra nsitio n: all 500ms cubic-bezier(0.000, 0.995,0.990, 1.000);-o-tra nsitio n: all 500ms cubic-bezier(0.000, 0.995,0.990, 1.000);tran sitio n: all 500ms cubic-bezier(0.000, 0.995,0.990, 1.000);div.me

6、 nu.a nimate #me nu-bgleft:-23px;-webkit-tra nsitio n: all 500ms cubic-bezier(0.000, 0.995,0.990, 1.000);-moz-tra nsitio n: all 500ms cubic-bezier(0.000, 0.995,0.990, 1.000);-ms-tra nsitio n: all 500ms cubic-bezier(0.000, 0.995,0.990, 1.000);-o-tra nsitio n: all 500ms cubic-bezier(0.000, 0.995,0.990

7、, 1.000);tran sitio n: all 500ms cubic-bezier(0.000, 0.995,0.990, 1.000);采單項(xiàng)使用margin-left 值來制作動(dòng)畫效果，每一個(gè)采單項(xiàng)都設(shè)置了不同的延遲時(shí)間,使它們有依次進(jìn)入的效果。1.div.menu ulmargin-top:110px;position:relative;2.div.me nu ul li 3.list-style: none;4.width: 320px;5.margin-top: 40px;6.text-alig n: left;7.paddi ng-left: 100px;8.fon t-s

8、ize: 23px;9.10.div.me nu ul li a 11.color:#fff;12.text-decorati on:none;13.letter-spaci ng:1px;14.15.div.me nu.a ni mate ul li 16.margin-left:80px;17.-webkit-tra nsitio n: all 800ms cubic-bezier(0.000, 0.995,0.990, 1.000);18.-moz-tra nsitio n: all 800ms cubic-bezier(0.000, 0.995,0.990, 1.000);19.-ms

9、-tra nsitio n: all 800ms cubic-bezier(0.000, 0.995,0.990, 1.000);-o-tra nsitio n: all 800ms cubic-bezier(0.000, 0.995,0.990, 1.000);tran sitio n: all 800ms cubic-bezier(0.000, 0.995,0.990, 1.000);div.menu.animate li:nth-of-type(1)transition-delay: 0.0s;div.menu.animate li:nth-of-type(2)transition-de

10、lay:0.06s;div.menu.animate li:nth-of-type(3)transition-delay:0.12s;div.menu.animate li:nth-of-type(4)transition-delay:0.18s;div.menu.animate li:nth-of-type(5)transition-delay:0.24s;另外在菜單按鈕被點(diǎn)擊的時(shí)候，屏幕層 screen被推到屏幕的右邊，這個(gè)效 果通過修改它的left屬性來完成。1.div.scree n2.width:320px;3.height:560px;4.overflow:hidde n;5.po

11、siti on: absolute;6.top:0px;7.left:0px;8.backgrou nd:#31558a;9.-webkit-tra nsitio n: all 500ms cubic-bezier(0.000, 0.995,0.990, 1.000);10.-moz-tra nsitio n: all 500ms cubic-bezier(0.000, 0.995,0.990, 1.000);-ms-tra nsitio n: all 500ms cubic-bezier(0.000, 0.995,0.990, 1.000);-o-tra nsitio n: all 500m

12、s cubic-bezier(0.000, 0.995,0.990, 1.000);tran sitio n: all 500ms cubic-bezier(0.000, 0.995,0.990, 1.000);div.scree n.a nimateIeft:254px;-webkit-tra nsitio n: all 500ms cubic-bezier(0.000, 0.995,0.990, 1.000);-moz-tra nsitio n: all 500ms cubic-bezier(0.000, 0.995,0.990, 1.000);-ms-tra nsitio n: all 500ms