Demo for https://codyhouse.co/demo/smart-fixed-navigation/index.html
A Pen by Saijo George on CodePen.
Created
April 26, 2022 01:46
-
-
Save HeNy007/8ef7a4b6c25e3a928be2dbc4b371f1b0 to your computer and use it in GitHub Desktop.
sdfgdfsgdsfg
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <header> | |
| <div id="cd-logo"><a href="#0"><img src="https://unsplash.it/50" alt="Logo"></a></div> | |
| <h1>Smart Fixed Navigation</h1> | |
| </header> | |
| <div id="cd-nav"> | |
| <a href="#0" class="cd-nav-trigger">Menu<span></span></a> | |
| <nav id="cd-main-nav"> | |
| <ul> | |
| <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> | |
| <main> | |
| <ul id="cd-gallery-items" class="cd-container"> | |
| <li> | |
| <img src="https://unsplash.it/200" alt="Preview image"> | |
| </li> | |
| <li> | |
| <img src="https://unsplash.it/200" alt="Preview image"> | |
| </li> | |
| <li> | |
| <img src="https://unsplash.it/200" alt="Preview image"> | |
| </li> | |
| <li> | |
| <img src="https://unsplash.it/200" alt="Preview image"> | |
| </li> | |
| <li> | |
| <img src="https://unsplash.it/200" alt="Preview image"> | |
| </li> | |
| <li> | |
| <img src="https://unsplash.it/200" alt="Preview image"> | |
| </li> | |
| <li> | |
| <img src="https://unsplash.it/200" alt="Preview image"> | |
| </li> | |
| <li> | |
| <img src="https://unsplash.it/200" alt="Preview image"> | |
| </li> | |
| <li> | |
| <img src="https://unsplash.it/200" alt="Preview image"> | |
| </li> | |
| <li> | |
| <img src="https://unsplash.it/200" alt="Preview image"> | |
| </li> | |
| <li> | |
| <img src="https://unsplash.it/200" alt="Preview image"> | |
| </li> | |
| <li> | |
| <img src="https://unsplash.it/200" alt="Preview image"> | |
| </li> | |
| </ul> <!-- cd-gallery-items --> | |
| </main> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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'); | |
| } | |
| } | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* -------------------------------- | |
| 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; | |
| } | |
| img { | |
| max-width: 100%; | |
| } | |
| /* -------------------------------- | |
| Modules - reusable parts of our design | |
| -------------------------------- */ | |
| .cd-container { | |
| /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */ | |
| width: 90%; | |
| max-width: 1170px; | |
| margin: 0 auto; | |
| } | |
| .cd-container::after { | |
| /* clearfix */ | |
| content: ''; | |
| display: table; | |
| clear: both; | |
| } | |
| /* -------------------------------- | |
| Main components | |
| -------------------------------- */ | |
| header { | |
| position: relative; | |
| height: 200px; | |
| background: white; | |
| text-align: center; | |
| margin-bottom: 1em; | |
| padding-top: 3em; | |
| } | |
| header #cd-logo { | |
| margin-bottom: 3em; | |
| } | |
| header h1 { | |
| font-size: 20px; | |
| font-size: 1.25rem; | |
| } | |
| @media only screen and (min-width: 768px) { | |
| header { | |
| margin-bottom: 4em; | |
| } | |
| } | |
| @media only screen and (min-width: 1170px) { | |
| header { | |
| height: 400px; | |
| padding-top: 11em; | |
| } | |
| header #cd-logo { | |
| position: absolute; | |
| top: 40px; | |
| left: 5%; | |
| } | |
| header h1 { | |
| font-size: 40px; | |
| font-size: 2.5rem; | |
| font-weight: 300; | |
| } | |
| } | |
| #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; | |
| } | |
| } | |
| #cd-gallery-items li { | |
| margin-bottom: 1.5em; | |
| box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); | |
| border-radius: 0.25em; | |
| } | |
| #cd-gallery-items li img { | |
| width: 100%; | |
| display: block; | |
| border-radius: 0.25em; | |
| } | |
| @media only screen and (min-width: 768px) { | |
| #cd-gallery-items li { | |
| width: 48%; | |
| float: left; | |
| margin-bottom: 2em; | |
| margin-right: 4%; | |
| } | |
| #cd-gallery-items li:nth-child(2n) { | |
| margin-right: 0; | |
| } | |
| } | |
| @media only screen and (min-width: 1170px) { | |
| #cd-gallery-items li { | |
| width: 31%; | |
| float: left; | |
| margin-bottom: 2.5em; | |
| margin-right: 3.5%; | |
| } | |
| #cd-gallery-items li:nth-child(2n) { | |
| margin-right: 3.5%; | |
| } | |
| #cd-gallery-items li:nth-child(3n) { | |
| margin-right: 0; | |
| } | |
| } | |
| @-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); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment