// Colors $color-primary: #0c8040; $color-secondary: #626262; $color-border: #ccd7d7; // Media Queries breakpoints $small: 480px; $medium: 768px; $large: 992px; $x-large: 1200px; @mixin hide-menu-items($index) { &:nth-child(n + #{$index + 1}) { display: none; } &:nth-child(#{$index}) .menu__link { border-right: 0; } } body { display: flex; align-items: center; height: 100vh; background: #fefefe; } a { outline: 0; text-decoration: none; } .navigation { width: 100%; border-bottom: 3px solid $color-border; font-family: 'Pathway Gothic One', sans-serif; font-size: 22px; } .menu { display: flex; justify-content: center; max-width: 1150px; margin: 0 auto; padding-left: 0; } .menu__item { display: inline-block; white-space: nowrap; @media screen and (max-width: $small) { @include hide-menu-items(2); } @media screen and (max-width: $medium) { @include hide-menu-items(3); } @media screen and (max-width: $large) { @include hide-menu-items(4); } &:last-child .menu__link { border-right: 0; } } .menu__link { display: block; padding: 6px 30px 3px; border-right: 2px dotted $color-border; &:hover, &:focus { .menu__first-word { transform: translate3d(0, -105%, 0); } .menu__second-word { transform: translate3d(0, 105%, 0); } } @media screen and (min-width: $medium) { padding: 6px 40px 3px; } } .menu__title { display: inline-block; overflow: hidden; } .menu__first-word, .menu__second-word { display: inline-block; position: relative; transition: transform .3s; &::before { position: absolute; content: attr(data-hover); } } .menu__first-word { color: $color-primary; &::before { top: 105%; color: $color-secondary; } } .menu__second-word { color: $color-secondary; &::before { bottom: 105%; color: $color-primary; } }


$(document).ready(function(){ $(".hamburger").click(function(){ $(this).toggleClass("is-active"); }); }); html, body{ width: 100%; height: 100%; margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; } a{ text-decoration: none; } p, li, a{ font-size: 14px; } /* GRID */ .twelve { width: 100%; } .eleven { width: 91.53%; } .ten { width: 83.06%; } .nine { width: 74.6%; } .eight { width: 66.13%; } .seven { width: 57.66%; } .six { width: 49.2%; } .five { width: 40.73%; } .four { width: 32.26%; } .three { width: 23.8%; } .two { width: 15.33%; } .one { width: 6.866%; } /* COLUMNS */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-of-type { margin-left: 0; } .container{ width: 100%; max-width: 940px; margin: 0 auto; position: relative; text-align: center; } /* CLEARFIX */ .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; } /* ALL */ .row .three{ padding: 80px 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #2c3e50; color: #ecf0f1; text-align: center; } .hamburger .line{ width: 50px; height: 5px; background-color: #ecf0f1; display: block; margin: 8px auto; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .hamburger:hover{ cursor: pointer; } /* ONE */ #hamburger-1.is-active .line:nth-child(2){ opacity: 0; } #hamburger-1.is-active .line:nth-child(1){ -webkit-transform: translateY(13px) rotate(45deg); -ms-transform: translateY(13px) rotate(45deg); -o-transform: translateY(13px) rotate(45deg); transform: translateY(13px) rotate(45deg); } #hamburger-1.is-active .line:nth-child(3){ -webkit-transform: translateY(-13px) rotate(-45deg); -ms-transform: translateY(-13px) rotate(-45deg); -o-transform: translateY(-13px) rotate(-45deg); transform: translateY(-13px) rotate(-45deg); } /* TWO */ #hamburger-2.is-active .line:nth-child(1){ -webkit-transform: translateY(13px); -ms-transform: translateY(13px); -o-transform: translateY(13px); transform: translateY(13px); } #hamburger-2.is-active .line:nth-child(3){ -webkit-transform: translateY(-13px); -ms-transform: translateY(-13px); -o-transform: translateY(-13px); transform: translateY(-13px); } /* THREE */ #hamburger-3.is-active .line:nth-child(1), #hamburger-3.is-active .line:nth-child(3){ width: 40px; } #hamburger-3.is-active .line:nth-child(1){ -webkit-transform: translateX(-10px) rotate(-45deg); -ms-transform: translateX(-10px) rotate(-45deg); -o-transform: translateX(-10px) rotate(-45deg); transform: translateX(-10px) rotate(-45deg); } #hamburger-3.is-active .line:nth-child(3){ -webkit-transform: translateX(-10px) rotate(45deg); -ms-transform: translateX(-10px) rotate(45deg); -o-transform: translateX(-10px) rotate(45deg); transform: translateX(-10px) rotate(45deg); } /* FOUR */ #hamburger-4.is-active .line:nth-child(1), #hamburger-4.is-active .line:nth-child(3){ width: 40px; } #hamburger-4.is-active .line:nth-child(1){ -webkit-transform: translateX(10px) rotate(45deg); -ms-transform: translateX(10px) rotate(45deg); -o-transform: translateX(10px) rotate(45deg); transform: translateX(10px) rotate(45deg); } #hamburger-4.is-active .line:nth-child(3){ -webkit-transform: translateX(10px) rotate(-45deg); -ms-transform: translateX(10px) rotate(-45deg); -o-transform: translateX(10px) rotate(-45deg); transform: translateX(10px) rotate(-45deg); } /* FIVE */ #hamburger-5.is-active{ -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } #hamburger-5.is-active .line:nth-child(2){ -webkit-transition: none; -o-transition: none; transition: none; } #hamburger-5 .line:nth-child(2){ -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } #hamburger-5.is-active .line:nth-child(2){ opacity: 0; } #hamburger-5.is-active .line:nth-child(1), #hamburger-5.is-active .line:nth-child(3){ width: 35px; -webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right; } #hamburger-5.is-active .line:nth-child(1){ -webkit-transform: translateY(15px) rotate(45deg); -ms-transform: translateY(15px) rotate(45deg); -o-transform: translateY(15px) rotate(45deg); transform: translateY(15px) rotate(45deg); } #hamburger-5.is-active .line:nth-child(3){ -webkit-transform: translateY(-15px) rotate(-45deg); -ms-transform: translateY(-15px) rotate(-45deg); -o-transform: translateY(-15px) rotate(-45deg); transform: translateY(-15px) rotate(-45deg); } /* SIX */ #hamburger-6.is-active{ -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #hamburger-6.is-active .line:nth-child(2){ width: 0px; } #hamburger-6.is-active .line:nth-child(1), #hamburger-6.is-active .line:nth-child(3){ -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } #hamburger-6.is-active .line:nth-child(1){ -webkit-transform: translateY(13px); -ms-transform: translateY(13px); -o-transform: translateY(13px); transform: translateY(13px); } #hamburger-6.is-active .line:nth-child(3){ -webkit-transform: translateY(-13px) rotate(90deg); -ms-transform: translateY(-13px) rotate(90deg); -o-transform: translateY(-13px) rotate(90deg); transform: translateY(-13px) rotate(90deg); } /* SEVEN */ #hamburger-7.is-active .line:nth-child(1){ width: 30px; } #hamburger-7.is-active .line:nth-child(2){ width: 40px; } #hamburger-7.is-active .line{ -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); } /* EIGHT */ #hamburger-8.is-active .line:nth-child(2){ opacity: 0; } #hamburger-8.is-active .line:nth-child(1){ -webkit-transform: translateY(13px); -ms-transform: translateY(13px); -o-transform: translateY(13px); transform: translateY(13px); } #hamburger-8.is-active .line:nth-child(3){ -webkit-transform: translateY(-13px) rotate(90deg); -ms-transform: translateY(-13px) rotate(90deg); -o-transform: translateY(-13px) rotate(90deg); transform: translateY(-13px) rotate(90deg); } /* NINE */ #hamburger-9{ position: relative; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #hamburger-9.is-active{ -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #hamburger-9:before{ content: ""; position: absolute; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 70px; height: 70px; border: 5px solid transparent; top: calc(50% - 35px); left: calc(50% - 35px); border-radius: 100%; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #hamburger-9.is-active:before{ border: 5px solid #ecf0f1; } #hamburger-9.is-active .line{ width: 35px; } #hamburger-9.is-active .line:nth-child(2){ opacity: 0; } #hamburger-9.is-active .line:nth-child(1){ -webkit-transform: translateY(13px); -ms-transform: translateY(13px); -o-transform: translateY(13px); transform: translateY(13px); } #hamburger-9.is-active .line:nth-child(3){ -webkit-transform: translateY(-13px) rotate(90deg); -ms-transform: translateY(-13px) rotate(90deg); -o-transform: translateY(-13px) rotate(90deg); transform: translateY(-13px) rotate(90deg); } /* TEN */ #hamburger-10{ -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #hamburger-10.is-active{ -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } #hamburger-10.is-active .line:nth-child(1){ width: 30px } #hamburger-10.is-active .line:nth-child(2){ width: 40px } /* ELEVEN */ #hamburger-11{ -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #hamburger-11.is-active{ animation: smallbig 0.6s forwards; } @keyframes smallbig{ 0%, 100%{ -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50%{ -webkit-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } } #hamburger-11.is-active .line:nth-child(1), #hamburger-11.is-active .line:nth-child(2), #hamburger-11.is-active .line:nth-child(3){ -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } #hamburger-11.is-active .line:nth-child(2){ opacity: 0; } #hamburger-11.is-active .line:nth-child(1){ -webkit-transform: translateY(13px) rotate(45deg); -ms-transform: translateY(13px) rotate(45deg); -o-transform: translateY(13px) rotate(45deg); transform: translateY(13px) rotate(45deg); } #hamburger-11.is-active .line:nth-child(3){ -webkit-transform: translateY(-13px) rotate(-45deg); -ms-transform: translateY(-13px) rotate(-45deg); -o-transform: translateY(-13px) rotate(-45deg); transform: translateY(-13px) rotate(-45deg); } /* TWELVE */ #hamburger-12.is-active .line:nth-child(1){ opacity: 0; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); transform: translateX(-100%); } #hamburger-12.is-active .line:nth-child(3){ opacity: 0; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); }

Hamburger Icon Animations





Cera — Mix ㅣ CEO: Tom
Business License: 000-00-00000
Communication Sales Business Report: 0000-Seoul-0000
Address: Seoul, Korea

CS: +82 (0)0-000-0000
(AM10 - PM5, Lunch PM1 - PM2, 
Weedend and Holiday Off)

All Photo by ⓒ Tom Crew on Unsplash view