小屏幕导航 – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小屏幕导航</title> <style type="text/css"> /** * Demo Stuff */ body { background: #1BBC9B; font-family: 'Montserrat', sans-serif; } .container { text-align: center; } h1 { color: #117964; font-weight: 400; font-size: 2em; margin: 1em 0; } /** * iPhone * Credits: Flat, Scaleable CSS iPhone Illustration by Tom Hergenreter * http://codepen.io/TomHergenreter/details/qDywF/ */ .iphone { width: 16.06em; height: 30.6em; border-radius: 1.875em; margin: 2em; position: relative; display: inline-block; background: #fff; } .iphone__item { width: 16.06em; height: 1em; position: absolute; bottom: -2em; color: #158f76; text-align: center; } .iphone__power-btn { width: 2.188em; height: .188em; background: #e0e0e0; position: absolute; right: 2.5em; top: -0.188em; } .iphone__left-btn { width: .188em; height: 1.250em; top: 3.250em; left: -0.188em; position: absolute; background: #e0e0e0; } .iphone__left-btn:before { content: ''; width: .188em; height: .875em; position: absolute; top: 3em; background: #e0e0e0; } .iphone__left-btn:after { content: ''; width: .188em; height: .875em; position: absolute; top: 5.5em; background: #e0e0e0; } .iphone__details { width: .438em; height: .438em; border-radius: 100%; position: relative; top: 1.313em; left: 8em; background: #7c7c7c; } .iphone__details:before { content: ''; width: 2.5em; height: .25em; border-radius: .25em; position: absolute; top: 1em; left: -1em; background: #7c7c7c; } .iphone__home-btn { width: 2.25em; height: 2.25em; border-radius: 100%; position: absolute; bottom: 1em; right: 6.75em; background: #f7f7f7; } .iphone__home-btn:before { content: ''; width: .813em; height: .813em; border: .15em solid #a8a8a8; border-radius: .2em; position: absolute; top: .6em; left: .57em; } .iphone__screen { width: 14.5em; height: 22.938em; position: absolute; top: 3.75em; left: .750em; overflow: hidden; } .iphone__content { position: relative; background-color: #D2527F; width: 100%; height: 100%; } /** * Navigation Defaults */ .nav { position: absolute; z-index: 100; opacity: 0; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: 300ms; transition-duration: 300ms; } .nav--active .nav { opacity: 1; background-color: #333; } .nav__list { margin: 0; padding: 10px; } .nav__item { list-style-type: none; text-align: left; } .nav__link { font-size: 1.3em; text-transform: uppercase; text-decoration: none; color: #FFFFFF; opacity: 1; -webkit-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; } /* Default navigation icon */ .nav__trigger { display: block; position: absolute; width: 30px; height: 25px; right: 10px; top: 10px; z-index: 200; } .nav--active .nav__trigger { opacity: 0.5; } .nav__icon { display: inline-block; position: relative; width: 30px; height: 5px; background-color: #FFFFFF; -webkit-transition-property: background-color, -webkit-transform; transition-property: background-color, -webkit-transform; transition-property: background-color, transform; transition-property: background-color, transform, -webkit-transform; -webkit-transition-duration: 300ms; transition-duration: 300ms; } .nav__icon:before, .nav__icon:after { content: ''; display: block; width: 30px; height: 5px; position: absolute; background: #FFFFFF; -webkit-transition-property: margin, -webkit-transform; transition-property: margin, -webkit-transform; transition-property: margin, transform; transition-property: margin, transform, -webkit-transform; -webkit-transition-duration: 300ms; transition-duration: 300ms; } .nav__icon:before { margin-top: -10px; } .nav__icon:after { margin-top: 10px; } /* Don't nest if you don't have to. */ /** * Style #1 */ .style-1 .nav { -webkit-transform: translateX(-100%); transform: translateX(-100%); width: 100%; height: 100%; } .style-1 .nav__link { opacity: 0; -webkit-transition-delay: 500ms; transition-delay: 500ms; } .style-1 .nav--active .nav__link { opacity: 1; } .style-1 .nav--active .nav { -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; -webkit-transform: translateX(0); transform: translateX(0); } .style-1 .nav--active .nav__icon { background: rgba(0, 0, 0, 0); } .style-1 .nav--active .nav__icon:before { margin-top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .style-1 .nav--active .nav__icon:after { margin-top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } /** * Style #2 */ .style-2 { -webkit-perspective: 1000px; perspective: 1000px; } .style-2 .nav { width: 100%; height: 100%; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .style-2 .nav--active .nav { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } .style-2 .iphone__content { -webkit-transform: rotateY(0); transform: rotateY(0); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .style-2 .nav--active .iphone__content { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .style-2 .navi__icon { background: rgba(0, 0, 0, 0); } .style-2 .navi__icon:before { margin-top: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .style-2 .navi__icon:after { margin-top: 0; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .style-2 .nav--active .nav__icon { background: rgba(0, 0, 0, 0); -webkit-transform: rotate(135deg); transform: rotate(135deg); } .style-2 .nav--active .nav__icon:before { margin-top: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .style-2 .nav--active .nav__icon:after { margin-top: 0; -webkit-transform: rotate(180deg); transform: rotate(180deg); } /** * Style #3 */ .style-3 .nav { width: 100%; height: 100%; -webkit-transform: translateX(100%); transform: translateX(100%); } .style-3 .nav--active .nav { -webkit-transform: translateX(20%); transform: translateX(20%); } .style-3 .iphone__content { -webkit-transform: scale(1) translateX(0); transform: scale(1) translateX(0); -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .style-3 .iphone__screen { background-color: #333; } .style-3 .nav--active .iphone__content { -webkit-transform: scale(0.9) translateX(-90%); transform: scale(0.9) translateX(-90%); } .style-3 .nav__icon { background: rgba(0, 0, 0, 0); } .style-3 .nav__icon:before { margin-top: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .style-3 .nav__icon:after { margin-top: 0; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .style-3 .nav--active .nav__icon { -webkit-transform: rotate(135deg); transform: rotate(135deg); } /** * Style #4 */ .style-4 .nav { width: 100%; height: 100%; -webkit-transform: translateY(-100%); transform: translateY(-100%); } .style-4 .nav--active .nav { -webkit-transform: translateY(0); transform: translateY(0); } .style-4 .nav--active .nav__icon { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .style-4 .nav__link { opacity: 0; -webkit-transition-delay: 500ms; transition-delay: 500ms; } .style-4 .nav--active .nav__link { opacity: 1; } /** * Style #5 */ .style-5 .nav { -webkit-transform: translate(100%, -100%) scale(0.5); transform: translate(100%, -100%) scale(0.5); border-radius: 100%; } .style-5 .nav--active .nav { -webkit-transform: translateY(0) scale(1); transform: translateY(0) scale(1); border-radius: 0; width: 100%; height: 100%; } .style-5 .nav__link { opacity: 0; -webkit-transition-delay: 500ms; transition-delay: 500ms; } .style-5 .nav--active .nav__link { opacity: 1; } .style-5 .nav--active .nav__icon { background: rgba(0, 0, 0, 0); } .style-5 .nav--active .nav__icon:before { margin-top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .style-5 .nav--active .nav__icon:after { margin-top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } /** * Style #6 */ .style-6 .nav { -webkit-transform: rotateZ(-90deg); transform: rotateZ(-90deg); width: 100%; height: 100%; } .style-6 .nav--active .nav { -webkit-transform: rotateZ(0); transform: rotateZ(0); } .style-6 .nav__link { opacity: 0; -webkit-transition-delay: 500ms; transition-delay: 500ms; } .style-6 .nav--active .nav__link { opacity: 1; } .style-6 .nav__icon { background: rgba(0, 0, 0, 0); } .style-6 .nav__icon:before { margin-top: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .style-6 .nav__icon:after { margin-top: 0; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .style-6 .nav--active .nav__icon { -webkit-transform: rotate(135deg); transform: rotate(135deg); } </style> </head> <body> <div class="container"> <h1>Responsive Navigation Ideas</h1>  <div class="iphone style-1"> <div class="iphone__item">#1</div> <div class="iphone__power-btn"></div> <div class="iphone__left-btn"></div> <div class="iphone__details"></div> <div class="iphone__screen"> <a href="#" class="nav__trigger"><span class="nav__icon"></span></a> <nav class="nav"> <ul class="nav__list"> <li class="nav__item"><a class="nav__link" href="#">Home</a></li> <li class="nav__item"><a class="nav__link" href="#">About Us</a></li> <li class="nav__item"><a class="nav__link" href="#">Portfolio</a></li> <li class="nav__item"><a class="nav__link" href="#">Blog</a></li> <li class="nav__item"><a class="nav__link" href="#">Contact Us</a></li> </ul> </nav> <div class="iphone__content"></div> </div> <div class="iphone__home-btn"></div> </div>   <div class="iphone style-2"> <div class="iphone__item">#2</div> <div class="iphone__power-btn"></div> <div class="iphone__left-btn"></div> <div class="iphone__details"></div> <div class="iphone__screen"> <a href="#" class="nav__trigger"><span class="nav__icon"></span></a> <nav class="nav"> <ul class="nav__list"> <li class="nav__item"><a class="nav__link" href="#">Home</a></li> <li class="nav__item"><a class="nav__link" href="#">About Us</a></li> <li class="nav__item"><a class="nav__link" href="#">Portfolio</a></li> <li class="nav__item"><a class="nav__link" href="#">Blog</a></li> <li class="nav__item"><a class="nav__link" href="#">Contact Us</a></li> </ul> </nav> <div class="iphone__content"></div> </div> <div class="iphone__home-btn"></div> </div>   <div class="iphone style-3"> <div class="iphone__item">#3</div> <div class="iphone__power-btn"></div> <div class="iphone__left-btn"></div> <div class="iphone__details"></div> <div class="iphone__screen"> <a href="#" class="nav__trigger"><span class="nav__icon"></span></a> <nav class="nav"> <ul class="nav__list"> <li class="nav__item"><a class="nav__link" href="#">Home</a></li> <li class="nav__item"><a class="nav__link" href="#">About Us</a></li> <li class="nav__item"><a class="nav__link" href="#">Portfolio</a></li> <li class="nav__item"><a class="nav__link" href="#">Blog</a></li> <li class="nav__item"><a class="nav__link" href="#">Contact Us</a></li> </ul> </nav> <div class="iphone__content"></div> </div> <div class="iphone__home-btn"></div> </div>   <div class="iphone style-4"> <div class="iphone__item">#4</div> <div class="iphone__power-btn"></div> <div class="iphone__left-btn"></div> <div class="iphone__details"></div> <div class="iphone__screen"> <a href="#" class="nav__trigger"><span class="nav__icon"></span></a> <nav class="nav"> <ul class="nav__list"> <li class="nav__item"><a class="nav__link" href="#">Home</a></li> <li class="nav__item"><a class="nav__link" href="#">About Us</a></li> <li class="nav__item"><a class="nav__link" href="#">Portfolio</a></li> <li class="nav__item"><a class="nav__link" href="#">Blog</a></li> <li class="nav__item"><a class="nav__link" href="#">Contact Us</a></li> </ul> </nav> <div class="iphone__content"></div> </div> <div class="iphone__home-btn"></div> </div>   <div class="iphone style-5"> <div class="iphone__item">#5</div> <div class="iphone__power-btn"></div> <div class="iphone__left-btn"></div> <div class="iphone__details"></div> <div class="iphone__screen"> <a href="#" class="nav__trigger"><span class="nav__icon"></span></a> <nav class="nav"> <ul class="nav__list"> <li class="nav__item"><a class="nav__link" href="#">Home</a></li> <li class="nav__item"><a class="nav__link" href="#">About Us</a></li> <li class="nav__item"><a class="nav__link" href="#">Portfolio</a></li> <li class="nav__item"><a class="nav__link" href="#">Blog</a></li> <li class="nav__item"><a class="nav__link" href="#">Contact Us</a></li> </ul> </nav> <div class="iphone__content"></div> </div> <div class="iphone__home-btn"></div> </div>   <div class="iphone style-6"> <div class="iphone__item">#6</div> <div class="iphone__power-btn"></div> <div class="iphone__left-btn"></div> <div class="iphone__details"></div> <div class="iphone__screen"> <a href="#" class="nav__trigger"><span class="nav__icon"></span></a> <nav class="nav"> <ul class="nav__list"> <li class="nav__item"><a class="nav__link" href="#">Home</a></li> <li class="nav__item"><a class="nav__link" href="#">About Us</a></li> <li class="nav__item"><a class="nav__link" href="#">Portfolio</a></li> <li class="nav__item"><a class="nav__link" href="#">Blog</a></li> <li class="nav__item"><a class="nav__link" href="#">Contact Us</a></li> </ul> </nav> <div class="iphone__content"></div> </div> <div class="iphone__home-btn"></div> </div>  <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> $('.nav__trigger').on('click', function(e){ e.preventDefault(); $(this).parent().toggleClass('nav--active'); }); </script> </div> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 小屏幕导航