html5 浮动侧滑菜单栏怎样实现 | 您所在的位置:网站首页 › muipreload › 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: 0padding: 0} li {list-style-type: none} .grid {float: leftwidth:980pxmargin: 0 auto} .grid li { width: 285pxheight: 500pxoverflow: hiddenfloat: leftmargin: 20px 0 20px 30pxposition: relative} .grid li:hover {box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5)} .gridli section {position: relativetransition: all 0.25swidth: 100%} .gridli h2 {font: bold 14px montserratcolor: #ffftext-transform: uppercaseposition: absolutetext-align: centerwidth: 60%left: 20%top: 100pxpadding: 10px 0border: 2px solid whiteborder-radius: 4px} .sidenav { position: absolutetop: 0left: 0bottom: 0background: linear-gradient(rgba(50,60,60, 1), rgba(50,60,60, 0.7))width: 50pxtransition: all 0.25soverflow: hiddenpadding-top: 100px} .sidenav li { _overflow: hiddenwidth: 150px} .sidenav a { text-decoration: nonecolor: #eee display: blockline-height: 48px } .sidenav span {display: block} .sidenav b { padding-left 10pxdisplay: blockcolor: whitefont-family: Montserratfont-size: 12pxline-height: 4opacity: 0} .sidenav a i { display: blockfloat: leftfont-size: 16pxline-height: 48pxwidth: 50pxtext-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 .4sopacity: 1} .two .sidenav {width: 150px} /*One*/ .one .w {transform: perspective(100px)} .one b {transform: perspective(100px) rotateY(90deg)_opacity: 0transform-origin: left center_border: 1px solid white} .one:hover b {transform: perspective(100px) rotateX(0)transition: all .4sopacity: 1} .one .sidenav {width: 150px} .one .sidenav span {float: leftwidth: 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:centerclear: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 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, duration, 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:{ duration:150 } }) }) (2)关闭侧滑菜单,实际就是设置main的样式了,比如: main.setStyle({ left: '0', transition: { duration: 150 } }) 另外注意窗体切换完成后要关掉menu //等窗体动画结束后,隐藏菜单webview,节省资源; setTimeout(function() { menu.hide() }, 200) 5.被打开的WebView的界面如何控制关闭侧滑菜单: (1)先要找到主页面,main = plus.webview.currentWebview().opener() (2)激发主页面的某个事件,例如:mui.fire(main,"menu:swipeleft") 这个可以通过绝对定位,配合left设置 或者translate去实现left的方法: 比如让class为menu的元素宽为300px,高100%的,设置left为-300px;在这期间可以加一个过渡transition:left 0.3s ...; 然后让class为menu active的元素设置 left设置为0就可以了 ,在这期间可以加一个过渡transition:left 0.3s ...; 然后可以通过Jquery的toggleClass('active')来实现切换 translate 比如让class为menu的元素宽为300px,高100%的,设置left为-300px;在这期间可以加一个过渡transition:left 0.3s ...; 然后让class为menu active的元素设置 transform:translate3d(-300px,0,0) ,在这期间可以加一个过渡transition:left 0.3s ...; 然后可以通过Jquery的toggleClass('active')来实现切换 这个过程中 需要注意 body需要overflow:hidden(不然会有滚动条,可设置overflow-x即可) left 和 translate 最好用translate ,translate3d可以开启GPU硬件加速,性能会更好,体验会更流畅 我github有类似小组件样式 github: IFmiss 希望能解决你的问题 欢迎分享,转载请注明来源:内存溢出 原文地址:https://outofmemory.cn/zaji/6192888.html |
CopyRight 2018-2019 实验室设备网 版权所有 |