侧边导航过渡效果集
来源：互联网 发布：怎样养淘宝号 编辑：程序博客网 时间：2024/05/30 05:25
看到好的作品，忍不住想要收藏，转载地址：http://www.gbtags.com/gb/rtreplayerpreview/1525.htm
<!doctype html><html lang="zh"><head> <title>14种侧边导航滑出动画效果</title> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta author="极客标签：www.gbtags.com" /> <meta name="Description" content="极客标签是一个基于web的在线极客编程知识分享&学习平台，能够帮助你快速高效地学习代码编程并方便的在线实时分享编程技巧和心得" /> <meta name="Keywords" content="极客,极客标签,轻视频,代码录播,在线调试,前端,前端社区,前端特效,素材,html5,javascript,css3,jquery,bootstrap,bootstrap3" /> <style> @import url(http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css); body { background: #444; color: #48a770; font-weight: 300; font-family: 'Lato', Calibri, Arial, sans-serif; } a { text-decoration: none; color: #48a770; outline: none; } a:hover, a:focus { color: #2c774b; outline: none; } /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ .clearfix:before, .clearfix:after { display: table; content: " "; } .clearfix:after { clear: both; } .codrops-header, .codrops-top { font-family: 'microsoft yahei', Arial, sans-serif; } .codrops-header { margin: 0 auto 3em; padding: 3em; text-align: center; } .codrops-header h1 { margin: 0; font-weight: 300; font-size: 2.625em; line-height: 1.3; } .codrops-header span { display: block; padding: 0 0 0.6em 0.1em; font-size: 60%; color: #aca89a; } /* To Navigation Style */ .codrops-top { width: 100%; text-transform: uppercase; font-size: 0.69em; line-height: 2.2; font-weight: 400; background: rgba(255,255,255,0.3); } .codrops-top a { display: inline-block; padding: 0 1em; text-decoration: none; letter-spacing: 0.1em; } .codrops-top a:hover { background: rgba(255,255,255,0.4); color: #333; } .codrops-top span.right { float: right; } .codrops-top span.right a { display: block; float: left; } .codrops-icon:before { margin: 0 4px; text-transform: none; font-weight: normal; font-style: normal; font-variant: normal; font-family: 'codropsicons'; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; } .codrops-icon-drop:before { content: "\e001"; } .codrops-icon-prev:before { content: "\e004"; } .main { max-width: 69em; margin: 0 auto; } .column { float: left; padding: 0 2em; min-height: 300px; position: relative; text-align: left; } .column:nth-child(2) { box-shadow: -1px 0 0 rgba(0,0,0,0.1); text-align: left; } .column p { font-weight: 300; font-size: 2em; padding: 0 0 0.5em; margin: 0; line-height: 1.5; } button { border: none; padding: 0.6em 1.2em; background: #388a5a; color: #fff; font-family: 'Lato', Calibri, Arial, sans-serif; font-size: 1em; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; display: inline-block; margin: 3px 2px; border-radius: 2px; } button:hover { background: #2c774b; } .info { text-align: center; font-size: 1.5em; margin-top: 3em; clear: both; padding: 3em 0; opacity: 0.7; color: #aca89a; } .info a { font-weight: 700; font-size: 0.9em; } @media screen and (max-width: 46.0625em) { .column { width: 100%; min-width: auto; min-height: auto; padding: 2em; text-align: center; } .column p { font-size: 1.5em; } .column:nth-child(2) { text-align: center; box-shadow: 0 -1px 0 rgba(0,0,0,0.1); } } @media screen and (max-width: 25em) { .codrops-header { font-size: 80%; } .codrops-top { font-size: 120%; } .codrops-icon span { display: none; } } *, *:after, *::before { -moz-box-sizing: border-box; box-sizing: border-box; } html, body, .st-container, .st-pusher, .st-content { height: 100%; } .st-content { overflow-y: scroll; background: #f3efe0; } .st-content, .st-content-inner { position: relative; } .st-container { position: relative; overflow: hidden; } .st-pusher { position: relative; left: 0; z-index: 99; height: 100%; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; } .st-pusher::after { position: absolute; top: 0; right: 0; width: 0; height: 0; background: rgba(0,0,0,0.2); content: ''; opacity: 0; -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; } .st-menu-open .st-pusher::after { width: 100%; height: 100%; opacity: 1; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .st-menu { position: absolute; top: 0; left: 0; z-index: 100; visibility: hidden; width: 300px; height: 100%; background: #48a770; -webkit-transition: all 0.5s; transition: all 0.5s; } .st-menu::after { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2); content: ''; opacity: 1; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .st-menu-open .st-menu::after { width: 0; height: 0; opacity: 0; -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; } /* content style */ .st-menu ul { margin: 0; padding: 0; list-style: none; } .st-menu h2 { margin: 0; padding: 1em; color: rgba(0,0,0,0.4); text-shadow: 0 0 1px rgba(0,0,0,0.1); font-weight: 300; font-size: 2em; } .st-menu ul li a { display: block; padding: 1em 1em 1em 1.2em; outline: none; box-shadow: inset 0 -1px rgba(0,0,0,0.2); color: #f3efe0; text-transform: uppercase; text-shadow: 0 0 1px rgba(255,255,255,0.1); letter-spacing: 1px; font-weight: 400; -webkit-transition: background 0.3s, box-shadow 0.3s; transition: background 0.3s, box-shadow 0.3s; } .st-menu ul li:first-child a { box-shadow: inset 0 -1px rgba(0,0,0,0.2), inset 0 1px rgba(0,0,0,0.2); } .st-menu ul li a:hover { background: rgba(0,0,0,0.2); box-shadow: inset 0 -1px rgba(0,0,0,0); color: #fff; } /* Individual effects */ /* Effect 1: Slide in on top */ .st-effect-1.st-menu { visibility: visible; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .st-effect-1.st-menu-open .st-effect-1.st-menu { visibility: visible; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .st-effect-1.st-menu::after { display: none; } /* Effect 2: Reveal */ .st-effect-2.st-menu-open .st-pusher { -webkit-transform: translate3d(300px, 0, 0); transform: translate3d(300px, 0, 0); } .st-effect-2.st-menu { z-index: 1; } .st-effect-2.st-menu-open .st-effect-2.st-menu { visibility: visible; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; } .st-effect-2.st-menu::after { display: none; } /* Effect 3: Push*/ .st-effect-3.st-menu-open .st-pusher { -webkit-transform: translate3d(300px, 0, 0); transform: translate3d(300px, 0, 0); } .st-effect-3.st-menu { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .st-effect-3.st-menu-open .st-effect-3.st-menu { visibility: visible; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; } .st-effect-3.st-menu::after { display: none; } /* Effect 4: Slide along */ .st-effect-4.st-menu-open .st-pusher { -webkit-transform: translate3d(300px, 0, 0); transform: translate3d(300px, 0, 0); } .st-effect-4.st-menu { z-index: 1; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } .st-effect-4.st-menu-open .st-effect-4.st-menu { visibility: visible; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .st-effect-4.st-menu::after { display: none; } /* Effect 5: Reverse slide out */ .st-effect-5.st-menu-open .st-pusher { -webkit-transform: translate3d(300px, 0, 0); transform: translate3d(300px, 0, 0); } .st-effect-5.st-menu { z-index: 1; -webkit-transform: translate3d(50%, 0, 0); transform: translate3d(50%, 0, 0); } .st-effect-5.st-menu-open .st-effect-5.st-menu { visibility: visible; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* Effect 6: Rotate pusher */ .st-effect-6.st-container { -webkit-perspective: 1500px; perspective: 1500px; } .st-effect-6 .st-pusher { -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .st-effect-6.st-menu-open .st-pusher { -webkit-transform: translate3d(300px, 0, 0) rotateY(-15deg); transform: translate3d(300px, 0, 0) rotateY(-15deg); } .st-effect-6.st-menu { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .st-effect-6.st-menu-open .st-effect-6.st-menu { visibility: visible; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transform: translate3d(-100%, 0, 0) rotateY(15deg); transform: translate3d(-100%, 0, 0) rotateY(15deg); } .st-effect-6.st-menu::after { display: none; } /* Effect 7: 3D rotate in */ .st-effect-7.st-container { -webkit-perspective: 1500px; perspective: 1500px; -webkit-perspective-origin: 0% 50%; perspective-origin: 0% 50%; } .st-effect-7 .st-pusher { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .st-effect-7.st-menu-open .st-pusher { -webkit-transform: translate3d(300px, 0, 0); transform: translate3d(300px, 0, 0); } .st-effect-7.st-menu { -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg); transform: translate3d(-100%, 0, 0) rotateY(-90deg); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .st-effect-7.st-menu-open .st-effect-7.st-menu { visibility: visible; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transform: translate3d(-100%, 0, 0) rotateY(0deg); transform: translate3d(-100%, 0, 0) rotateY(0deg); } /* Effect 8: 3D rotate out */ .st-effect-8.st-container { -webkit-perspective: 1500px; perspective: 1500px; -webkit-perspective-origin: 0% 50%; perspective-origin: 0% 50%; } .st-effect-8 .st-pusher { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .st-effect-8.st-menu-open .st-pusher { -webkit-transform: translate3d(300px, 0, 0); transform: translate3d(300px, 0, 0); } .st-effect-8.st-menu { -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg); transform: translate3d(-100%, 0, 0) rotateY(90deg); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .st-effect-8.st-menu-open .st-effect-8.st-menu { visibility: visible; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transform: translate3d(-100%, 0, 0) rotateY(0deg); transform: translate3d(-100%, 0, 0) rotateY(0deg); } .st-effect-8.st-menu::after { display: none; } /* Effect 9: Scale down pusher */ .st-effect-9.st-container { -webkit-perspective: 1500px; perspective: 1500px; } .st-effect-9 .st-pusher { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .st-effect-9.st-menu-open .st-pusher { -webkit-transform: translate3d(0, 0, -300px); transform: translate3d(0, 0, -300px); } .st-effect-9.st-menu { opacity: 1; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .st-effect-9.st-menu-open .st-effect-9.st-menu { visibility: visible; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .st-effect-9.st-menu::after { display: none; } /* Effect 10: Scale up */ .st-effect-10.st-container { -webkit-perspective: 1500px; perspective: 1500px; -webkit-perspective-origin: 0% 50%; perspective-origin: 0% 50%; } .st-effect-10.st-menu-open .st-pusher { -webkit-transform: translate3d(300px, 0, 0); transform: translate3d(300px, 0, 0); } .st-effect-10.st-menu { z-index: 1; opacity: 1; -webkit-transform: translate3d(0, 0, -300px); transform: translate3d(0, 0, -300px); } .st-effect-10.st-menu-open .st-effect-10.st-menu { visibility: visible; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* Effect 11: Scale and rotate pusher */ .st-effect-11.st-container { -webkit-perspective: 1500px; perspective: 1500px; } .st-effect-11 .st-pusher { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .st-effect-11.st-menu-open .st-pusher { -webkit-transform: translate3d(100px, 0, -600px) rotateY(-20deg); transform: translate3d(100px, 0, -600px) rotateY(-20deg); } .st-effect-11.st-menu { opacity: 1; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .st-effect-11.st-menu-open .st-effect-11.st-menu { visibility: visible; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .st-effect-11.st-menu::after { display: none; } /* Effect 12: Open door */ .st-effect-12.st-container { -webkit-perspective: 1500px; perspective: 1500px; } .st-effect-12 .st-pusher { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .st-effect-12.st-menu-open .st-pusher { -webkit-transform: rotateY(-10deg); transform: rotateY(-10deg); } .st-effect-12.st-menu { opacity: 1; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .st-effect-12.st-menu-open .st-effect-12.st-menu { visibility: visible; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .st-effect-12.st-menu::after { display: none; } /* Effect 13: Fall down */ .st-effect-13.st-container { -webkit-perspective: 1500px; perspective: 1500px; -webkit-perspective-origin: 0% 50%; perspective-origin: 0% 50%; } .st-effect-13.st-menu-open .st-pusher { -webkit-transform: translate3d(300px, 0, 0); transform: translate3d(300px, 0, 0); } .st-effect-13.st-menu { z-index: 1; opacity: 1; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } .st-effect-13.st-menu-open .st-effect-13.st-menu { visibility: visible; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-property: -webkit-transform; transition-property: transform; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition-speed: 0.2s; transition-speed: 0.2s; } /* Effect 14: Delayed 3D rotate */ .st-effect-14.st-container { -webkit-perspective: 1500px; perspective: 1500px; -webkit-perspective-origin: 0% 50%; perspective-origin: 0% 50%; } .st-effect-14 .st-pusher { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .st-effect-14.st-menu-open .st-pusher { -webkit-transform: translate3d(300px, 0, 0); transform: translate3d(300px, 0, 0); } .st-effect-14.st-menu { -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg); transform: translate3d(-100%, 0, 0) rotateY(90deg); -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .st-effect-14.st-menu-open .st-effect-14.st-menu { visibility: visible; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-property: -webkit-transform; transition-property: transform; -webkit-transform: translate3d(-100%, 0, 0) rotateY(0deg); transform: translate3d(-100%, 0, 0) rotateY(0deg); } /* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */ .no-csstransforms3d .st-pusher, .no-js .st-pusher { padding-left: 300px; } </style></head><body><!-- HTML代码片段中请勿添加<body>标签 //--><div id="st-container" class="st-container"> <nav class="st-menu st-effect-1" id="menu-1"> <h2 class="glyphicon glyphicon-home"> 侧边导航</h2> <ul> <li><a class="glyphicon glyphicon-hdd" href="#"> 数据管理</a></li> <li><a class="glyphicon glyphicon-map-marker" href="#"> 定理位置</a></li> <li><a class="glyphicon glyphicon-tasks" href="#"> 学习</a></li> <li><a class="glyphicon glyphicon-bookmark" href="#"> 收藏</a></li> <li><a class="glyphicon glyphicon-tint" href="#"> 信誉</a></li> </ul> </nav> <nav class="st-menu st-effect-2" id="menu-2"> <h2 class="glyphicon glyphicon-home"> 侧边导航</h2> <ul> <li><a class="glyphicon glyphicon-hdd" href="#"> 数据管理</a></li> <li><a class="glyphicon glyphicon-map-marker" href="#"> 定理位置</a></li> <li><a class="glyphicon glyphicon-tasks" href="#"> 学习</a></li> <li><a class="glyphicon glyphicon-bookmark" href="#"> 收藏</a></li> <li><a class="glyphicon glyphicon-tint" href="#"> 信誉</a></li> </ul> </nav> <nav class="st-menu st-effect-4" id="menu-4"> <h2 class="glyphicon glyphicon-home"> 侧边导航</h2> <ul> <li><a class="glyphicon glyphicon-hdd" href="#"> 数据管理</a></li> <li><a class="glyphicon glyphicon-map-marker" href="#"> 定理位置</a></li> <li><a class="glyphicon glyphicon-tasks" href="#"> 学习</a></li> <li><a class="glyphicon glyphicon-bookmark" href="#"> 收藏</a></li> <li><a class="glyphicon glyphicon-tint" href="#"> 信誉</a></li> </ul> </nav> <nav class="st-menu st-effect-5" id="menu-5"> <h2 class="glyphicon glyphicon-home"> 侧边导航</h2> <ul> <li><a class="glyphicon glyphicon-hdd" href="#"> 数据管理</a></li> <li><a class="glyphicon glyphicon-map-marker" href="#"> 定理位置</a></li> <li><a class="glyphicon glyphicon-tasks" href="#"> 学习</a></li> <li><a class="glyphicon glyphicon-bookmark" href="#"> 收藏</a></li> <li><a class="glyphicon glyphicon-tint" href="#"> 信誉</a></li> </ul> </nav> <nav class="st-menu st-effect-9" id="menu-9"> <h2 class="glyphicon glyphicon-home"> 侧边导航</h2> <ul> <li><a class="glyphicon glyphicon-hdd" href="#"> 数据管理</a></li> <li><a class="glyphicon glyphicon-map-marker" href="#"> 定理位置</a></li> <li><a class="glyphicon glyphicon-tasks" href="#"> 学习</a></li> <li><a class="glyphicon glyphicon-bookmark" href="#"> 收藏</a></li> <li><a class="glyphicon glyphicon-tint" href="#"> 信誉</a></li> </ul> </nav> <nav class="st-menu st-effect-10" id="menu-10"> <h2 class="glyphicon glyphicon-home"> 侧边导航</h2> <ul> <li><a class="glyphicon glyphicon-hdd" href="#"> 数据管理</a></li> <li><a class="glyphicon glyphicon-map-marker" href="#"> 定理位置</a></li> <li><a class="glyphicon glyphicon-tasks" href="#"> 学习</a></li> <li><a class="glyphicon glyphicon-bookmark" href="#"> 收藏</a></li> <li><a class="glyphicon glyphicon-tint" href="#"> 信誉</a></li> </ul> </nav> <nav class="st-menu st-effect-11" id="menu-11"> <h2 class="glyphicon glyphicon-home"> 侧边导航</h2> <ul> <li><a class="glyphicon glyphicon-hdd" href="#"> 数据管理</a></li> <li><a class="glyphicon glyphicon-map-marker" href="#"> 定理位置</a></li> <li><a class="glyphicon glyphicon-tasks" href="#"> 学习</a></li> <li><a class="glyphicon glyphicon-bookmark" href="#"> 收藏</a></li> <li><a class="glyphicon glyphicon-tint" href="#"> 信誉</a></li> </ul> </nav> <nav class="st-menu st-effect-12" id="menu-12"> <h2 class="glyphicon glyphicon-home"> 侧边导航</h2> <ul> <li><a class="glyphicon glyphicon-hdd" href="#"> 数据管理</a></li> <li><a class="glyphicon glyphicon-map-marker" href="#"> 定理位置</a></li> <li><a class="glyphicon glyphicon-tasks" href="#"> 学习</a></li> <li><a class="glyphicon glyphicon-bookmark" href="#"> 收藏</a></li> <li><a class="glyphicon glyphicon-tint" href="#"> 信誉</a></li> </ul> </nav> <nav class="st-menu st-effect-13" id="menu-13"> <h2 class="glyphicon glyphicon-home"> 侧边导航</h2> <ul> <li><a class="glyphicon glyphicon-hdd" href="#"> 数据管理</a></li> <li><a class="glyphicon glyphicon-map-marker" href="#"> 定理位置</a></li> <li><a class="glyphicon glyphicon-tasks" href="#"> 学习</a></li> <li><a class="glyphicon glyphicon-bookmark" href="#"> 收藏</a></li> <li><a class="glyphicon glyphicon-tint" href="#"> 信誉</a></li> </ul> </nav> <div class="st-pusher"> <nav class="st-menu st-effect-3" id="menu-3"> <h2 class="glyphicon glyphicon-home"> 侧边导航</h2> <ul> <li><a class="glyphicon glyphicon-hdd" href="#"> 数据管理</a></li> <li><a class="glyphicon glyphicon-map-marker" href="#"> 定理位置</a></li> <li><a class="glyphicon glyphicon-tasks" href="#"> 学习</a></li> <li><a class="glyphicon glyphicon-bookmark" href="#"> 收藏</a></li> <li><a class="glyphicon glyphicon-tint" href="#"> 信誉</a></li> </ul> </nav> <nav class="st-menu st-effect-6" id="menu-6"> <h2 class="glyphicon glyphicon-home"> 侧边导航</h2> <ul> <li><a class="glyphicon glyphicon-hdd" href="#"> 数据管理</a></li> <li><a class="glyphicon glyphicon-map-marker" href="#"> 定理位置</a></li> <li><a class="glyphicon glyphicon-tasks" href="#"> 学习</a></li> <li><a class="glyphicon glyphicon-bookmark" href="#"> 收藏</a></li> <li><a class="glyphicon glyphicon-tint" href="#"> 信誉</a></li> </ul> </nav> <nav class="st-menu st-effect-7" id="menu-7"> <h2 class="icon icon-lab">侧边导航</h2> <ul> <li><a class="icon icon-data" href="#">数据管理</a></li> <li><a class="icon icon-location" href="#">定理位置</a></li> <li><a class="icon icon-study" href="#">学习</a></li> <li><a class="icon icon-photo" href="#">收藏</a></li> <li><a class="icon icon-wallet" href="#">信誉</a></li> </ul> </nav> <nav class="st-menu st-effect-8" id="menu-8"> <h2 class="glyphicon glyphicon-home"> 侧边导航</h2> <ul> <li><a class="glyphicon glyphicon-hdd" href="#"> 数据管理</a></li> <li><a class="glyphicon glyphicon-map-marker" href="#"> 定理位置</a></li> <li><a class="glyphicon glyphicon-tasks" href="#"> 学习</a></li> <li><a class="glyphicon glyphicon-bookmark" href="#"> 收藏</a></li> <li><a class="glyphicon glyphicon-tint" href="#"> 信誉</a></li> </ul> </nav> <nav class="st-menu st-effect-14" id="menu-14"> <h2 class="glyphicon glyphicon-home"> 侧边导航</h2> <ul> <li><a class="glyphicon glyphicon-hdd" href="#"> 数据管理</a></li> <li><a class="glyphicon glyphicon-map-marker" href="#"> 定理位置</a></li> <li><a class="glyphicon glyphicon-tasks" href="#"> 学习</a></li> <li><a class="glyphicon glyphicon-bookmark" href="#"> 收藏</a></li> <li><a class="glyphicon glyphicon-tint" href="#"> 信誉</a></li> </ul> </nav> <div class="st-content"><!-- this is the wrapper for the content --> <div class="st-content-inner"> <header class="codrops-header"> <h1>侧边导航过渡效果集<span>脱离canvas的过渡效果展示</span></h1> </header> <div class="main clearfix"> <div id="st-trigger-effects" class="column"> <button data-effect="st-effect-1">从顶层浮出</button> <button data-effect="st-effect-2">反转</button> <button data-effect="st-effect-3">推出</button> <button data-effect="st-effect-4">侧边导航单独滑出</button> <button data-effect="st-effect-5">侧边导航反方推出</button> <button data-effect="st-effect-6">主页旋转式推出</button> <button data-effect="st-effect-7">3D旋转向里展开</button> <button data-effect="st-effect-8">3D旋转向外展开</button> <button data-effect="st-effect-9">侧边导航缩小滑出</button> <button data-effect="st-effect-10">侧边导航放大滑出</button> <button data-effect="st-effect-11">主页旋转缩放，侧边导航滑出</button> <button data-effect="st-effect-12">开门式滑出</button> <button data-effect="st-effect-13">掉落</button> <button data-effect="st-effect-14">带掩饰效果的旋转展开</button> </div> </div> </div> </div> </div></div><!-- 推荐开源CDN来选取需引用的外部JS //--><script src="http://www.gbtags.com/gb/networks/uploads/f2db9271-c57e-48cf-a3a3-7d37a7f2f186/js/classie.js"></script><script> /*Javascript代码片段*/ var SidebarMenuEffects = (function() { function hasParentClass( e, classname ) { if(e === document) return false; if( classie.has( e, classname ) ) { return true; } return e.parentNode && hasParentClass( e.parentNode, classname ); } // http://coveroverflow.com/a/11381730/989439 function mobilecheck() { var check = false; (function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera); return check; } function init() { var container = document.getElementById( 'st-container' ), buttons = Array.prototype.slice.call( document.querySelectorAll( '#st-trigger-effects > button' ) ), // event type (if mobile use touch events) eventtype = mobilecheck() ? 'touchstart' : 'click', resetMenu = function() { classie.remove( container, 'st-menu-open' ); }, bodyClickFn = function(evt) { if( !hasParentClass( evt.target, 'st-menu' ) ) { resetMenu(); document.removeEventListener( eventtype, bodyClickFn ); } }; buttons.forEach( function( el, i ) { var effect = el.getAttribute( 'data-effect' ); el.addEventListener( eventtype, function( ev ) { ev.stopPropagation(); ev.preventDefault(); container.className = 'st-container'; // clear classie.add( container, effect ); setTimeout( function() { classie.add( container, 'st-menu-open' ); }, 25 ); document.addEventListener( eventtype, bodyClickFn ); }); } ); } init(); })();</script><script type="text/javascript"> var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fac45a0f68a119fbe4d1c4c3ac3044dbd' type='text/javascript'%3E%3C/script%3E"));</script></body></html> 1 0
- 侧边导航过渡效果集
- 侧边导航收缩伸展效果
- jQuery 实现侧边浮动导航菜单效果
- jQuery实现侧边导航手风琴效果
- 鼠标滚动事件，侧边导航js效果
- 动画过渡实现鼠标跟随导航效果
- Android_侧边导航栏
- Notes03:侧边导航菜单
- 侧边固定导航栏
- 侧边固定悬浮导航
- 侧边栏导航
- Toolbar+DrawerLayout侧边导航
- bootstrap侧边栏圆点导航
- 侧边多彩磁铁导航
- bootstrap3 侧边导航栏
- 通过添加类和媒体查询实现侧边导航栏的显示隐藏效果
- 非常漂亮的纯css3实现多彩侧边导航（非常流畅），附效果演示
- sidebarEffects.js 网页侧边栏过渡动画
- #1051 : 补提交卡
- RMQ（区间最值问题）ST算法
- XML入门
- Linux练习题7
- 史上最详细的webpack 讲解2 （DefinePlugin中的淫技巧）
- 侧边导航过渡效果集
- Flash
- Servlet上传文件
- 自定义录音
- XML入门
- compressGOP函数
- Openstack Ocata安装（Networking Option 1: Provider networks）
- 虚拟机算法
- poj 2723 2-SAT
