Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.html

Last active Feb 27, 2017
Embed
What would you like to do?
sdfgdfsgdsfg
<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>
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 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>
/* --------------------------------
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);
}
}
<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