http://www.dglives.com/effect/%E5%8F%B3%E4%B8%8B%E8%A7%92%E5%9B%BA%E5%AE%9A%E5%AF%BC%E8%88%AA%E6%98%BE%E7%A4%BA%E7%89%B9%E6%95%88.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Smart Fixed Navigation</title> <link href="http://cdn.bootcss.com/minireset.css/0.0.2/minireset.min.css" rel="stylesheet"> <style type="text/css"> /* -------------------------------- Primary style -------------------------------- */ html * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font-size: 100%; font-family: "Source Sans Pro", sans-serif; color: #2c3e51; background-color: #2c3e51; } a { color: #e84a64; text-decoration: none; } #cd-nav ul { /* mobile first */ position: fixed; width: 90%; max-width: 400px; right: 5%; bottom: 20px; border-radius: 0.25em; box-shadow: 0 0 10px rgba(232, 74, 100, 0.4); background: white; visibility: hidden; /* remove overflow:hidden if you want to create a drop-down menu - but then remember to fix/eliminate the list items animation */ overflow: hidden; z-index: 1; /* Force Hardware Acceleration in WebKit */ -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s; -moz-transition: -moz-transform 0.3s, visibility 0s 0.3s; transition: transform 0.3s, visibility 0s 0.3s; } #cd-nav ul li { /* Force Hardware Acceleration in WebKit */ -webkit-backface-visibility: hidden; backface-visibility: hidden; } #cd-nav ul.is-visible { visibility: visible; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.3s, visibility 0s 0s; -moz-transition: -moz-transform 0.3s, visibility 0s 0s; transition: transform 0.3s, visibility 0s 0s; } #cd-nav ul.is-visible li:nth-child(1) { /* list items animation */ -webkit-animation: cd-slide-in 0.2s; -moz-animation: cd-slide-in 0.2s; animation: cd-slide-in 0.2s; } #cd-nav ul.is-visible li:nth-child(2) { -webkit-animation: cd-slide-in 0.3s; -moz-animation: cd-slide-in 0.3s; animation: cd-slide-in 0.3s; } #cd-nav ul.is-visible li:nth-child(3) { -webkit-animation: cd-slide-in 0.4s; -moz-animation: cd-slide-in 0.4s; animation: cd-slide-in 0.4s; } #cd-nav ul.is-visible li:nth-child(4) { -webkit-animation: cd-slide-in 0.5s; -moz-animation: cd-slide-in 0.5s; animation: cd-slide-in 0.5s; } #cd-nav ul.is-visible li:nth-child(5) { -webkit-animation: cd-slide-in 0.6s; -moz-animation: cd-slide-in 0.6s; animation: cd-slide-in 0.6s; } #cd-nav li a { display: block; padding: 1.6em; border-bottom: 1px solid #eff2f6; } #cd-nav li:last-child a { border-bottom: none; } @media only screen and (min-width: 1170px) { #cd-nav ul { /* the navigation moves to the top */ position: absolute; width: auto; max-width: none; bottom: auto; top: 36px; background: transparent; visibility: visible; box-shadow: none; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 0s; -moz-transition: all 0s; transition: all 0s; } #cd-nav li { display: inline-block; } #cd-nav li a { opacity: 1; padding: .4em; margin-left: 1.6em; border-bottom: none; } #cd-nav li a:hover { color: #00bd9b; } #cd-nav.is-fixed ul { /* when the user scrolls down, the navigation moves to the bottom right in Fixed position - as on touch devices */ position: fixed; width: 90%; max-width: 400px; bottom: 20px; top: auto; background: white; visibility: hidden; box-shadow: 0 0 10px rgba(232, 74, 100, 0.4); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } #cd-nav.is-fixed ul li { display: block; } #cd-nav.is-fixed ul li a { padding: 1.6em; margin-left: 0; border-bottom: 1px solid #eff2f6; } #cd-nav ul.has-transitions { /* this class is used to bring back transitions when the navigation moves at the bottom right */ -webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s; -moz-transition: -moz-transform 0.3s, visibility 0s 0.3s; transition: transform 0.3s, visibility 0s 0.3s; } #cd-nav ul.is-visible { /* this class is used to bring back the navigation animation - as on touch devices */ visibility: visible; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 0.3s, visibility 0s 0s; -moz-transition: -moz-transform 0.3s, visibility 0s 0s; transition: transform 0.3s, visibility 0s 0s; } #cd-nav ul.is-hidden { /* this class is used to animate the scale down the navigation when the user scrolls down with the navigation still open */ -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; } } .cd-nav-trigger { position: fixed; bottom: 20px; right: 5%; width: 44px; height: 44px; background: white; border-radius: 0.25em; box-shadow: 0 0 10px rgba(232, 74, 100, 0.4); /* image replacement */ overflow: hidden; text-indent: 100%; white-space: nowrap; z-index: 2; } .cd-nav-trigger span { /* the span element is used to create the menu icon */ position: absolute; display: block; width: 20px; height: 2px; background: #e84a64; top: 50%; margin-top: -1px; left: 50%; margin-left: -10px; -webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s; } .cd-nav-trigger span::before, .cd-nav-trigger span::after { content: ''; position: absolute; left: 0; background: inherit; width: 100%; height: 100%; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.3s, background 0s; -moz-transition: -moz-transform 0.3s, background 0s; transition: transform 0.3s, background 0s; } .cd-nav-trigger span::before { top: -6px; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } .cd-nav-trigger span::after { bottom: -6px; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } .cd-nav-trigger.menu-is-open { box-shadow: none; } .cd-nav-trigger.menu-is-open span { background: rgba(232, 74, 100, 0); } .cd-nav-trigger.menu-is-open span::before, .cd-nav-trigger.menu-is-open span::after { background: #e84a64; } .cd-nav-trigger.menu-is-open span::before { top: 0; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } .cd-nav-trigger.menu-is-open span::after { bottom: 0; -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -ms-transform: rotate(225deg); -o-transform: rotate(225deg); transform: rotate(225deg); } @media only screen and (min-width: 1170px) { .cd-nav-trigger { /* the the menu triger is hidden by default on desktop devices */ visibility: hidden; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: -webkit-transform 0.3s, visibility 0s 0.3s; -moz-transition: -moz-transform 0.3s, visibility 0s 0.3s; transition: transform 0.3s, visibility 0s 0.3s; } .is-fixed .cd-nav-trigger { visibility: visible; -webkit-transition: all 0s; -moz-transition: all 0s; transition: all 0s; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-animation: cd-bounce-in 0.3s linear; -moz-animation: cd-bounce-in 0.3s linear; animation: cd-bounce-in 0.3s linear; } } @-webkit-keyframes cd-slide-in { 0% { -webkit-transform: translateX(100px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes cd-slide-in { 0% { -moz-transform: translateX(100px); } 100% { -moz-transform: translateY(0); } } @keyframes cd-slide-in { 0% { -webkit-transform: translateX(100px); -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); transform: translateX(100px); } 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes cd-bounce-in { 0% { -webkit-transform: scale(0); } 60% { -webkit-transform: scale(1.2); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes cd-bounce-in { 0% { -moz-transform: scale(0); } 60% { -moz-transform: scale(1.2); } 100% { -moz-transform: scale(1); } } @keyframes cd-bounce-in { 0% { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } 60% { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } </style> </head> <body style="height: 2000px"> <div id="cd-nav" class="is-fixed"> <a href="#0" class="cd-nav-trigger">Menu<span></span></a> <nav id="cd-main-nav"> <ul class="has-transitions"> <li><a href="#0">Homepage</a></li> <li><a href="#0">Services</a></li> <li><a href="#0">Portfolio</a></li> <li><a href="#0">Pricing</a></li> <li><a href="#0">Contact</a></li> </ul> </nav> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function($){ // browser window scroll (in pixels) after which the "menu" link is shown var offset = 300; var navigationContainer = $('#cd-nav'), mainNavigation = navigationContainer.find('#cd-main-nav ul'); //hide or show the "menu" link checkMenu(); $(window).scroll(function(){ checkMenu(); }); //open or close the menu clicking on the bottom "menu" link $('.cd-nav-trigger').on('click', function(){ $(this).toggleClass('menu-is-open'); //we need to remove the transitionEnd event handler (we add it when scolling up with the menu open) mainNavigation.off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend').toggleClass('is-visible'); }); function checkMenu() { if( $(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) { navigationContainer.addClass('is-fixed').find('.cd-nav-trigger').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){ mainNavigation.addClass('has-transitions'); }); } else if ($(window).scrollTop() <= offset) { //check if the menu is open when scrolling up if( mainNavigation.hasClass('is-visible') && !$('html').hasClass('no-csstransitions') ) { //close the menu with animation mainNavigation.addClass('is-hidden').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){ //wait for the menu to be closed and do the rest mainNavigation.removeClass('is-visible is-hidden has-transitions'); navigationContainer.removeClass('is-fixed'); $('.cd-nav-trigger').removeClass('menu-is-open'); }); //check if the menu is open when scrolling up - fallback if transitions are not supported } else if( mainNavigation.hasClass('is-visible') && $('html').hasClass('no-csstransitions') ) { mainNavigation.removeClass('is-visible has-transitions'); navigationContainer.removeClass('is-fixed'); $('.cd-nav-trigger').removeClass('menu-is-open'); //scrolling up with menu closed } else { navigationContainer.removeClass('is-fixed'); mainNavigation.removeClass('has-transitions'); } } } }); </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 右下角固定导航显示特效 喜欢 (0)or分享 (0)
