Forked from Virgil Pana's Pen Menu 2.
Forked from Virgil Pana's Pen Menu 2.
A Pen by Captain Anonymous on CodePen.
-
-
Save jmanalus/7706bf751f3c8a55ad76 to your computer and use it in GitHub Desktop.
This file contains 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='http://fonts.googleapis.com/css?family=Open Sans:400,700' rel='stylesheet' type='text/css'> | |
| <a id="view-code" href="http://codepen.io/virgilpana/pen/wBXNJM">VIEW CODE</a> | |
| <div class="screen"> | |
| <div class="navbar"></div> | |
| <div class="list"> | |
| <div class="item"> | |
| <div class="img"></div> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| <div class="item"> | |
| <div class="img"></div> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| <div class="item"> | |
| <div class="img"></div> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| <div class="item"> | |
| <div class="img"></div> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| <div class="menu-bg"></div> | |
| <div class="menu"> | |
| <ul class="menu-splitL"> | |
| <li><a href="">About</a></li> | |
| <li><a href="">Share</a></li> | |
| <li><a href="">Activity</a></li> | |
| <li><a href="">Settings</a></li> | |
| <li><a href="">Contact</a></li> | |
| </ul> | |
| <ul class="menu-splitR"> | |
| <li><a href="">About</a></li> | |
| <li><a href="">Share</a></li> | |
| <li><a href="">Activity</a></li> | |
| <li><a href="">Settings</a></li> | |
| <li><a href="">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div class="burger"> | |
| <div class="x"></div> | |
| <div class="y"></div> | |
| <div class="z"></div> | |
| </div> | |
| </div> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> |
This file contains 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
| if( 'ontouchstart' in window ){ var click = 'touchstart'; } | |
| else { var click = 'click'; } | |
| $('div.burger').on(click, function(){ | |
| if( !$(this).hasClass('open') ){ openMenu(); } | |
| else { closeMenu(); } | |
| }); | |
| $('div.menu ul li a').on(click, function(e){ | |
| e.preventDefault(); | |
| closeMenu(); | |
| }); | |
| function openMenu(){ | |
| $('div.menu-bg').addClass('animate'); | |
| $('div.burger').addClass('open'); | |
| $('div.x, div.z').addClass('collapse'); | |
| $('.menu li').addClass('animate'); | |
| setTimeout(function(){ | |
| $('div.y').hide(); | |
| $('div.x').addClass('rotate30'); | |
| $('div.z').addClass('rotate150'); | |
| }, 70); | |
| setTimeout(function(){ | |
| $('div.x').addClass('rotate45'); | |
| $('div.z').addClass('rotate135'); | |
| }, 120); | |
| } | |
| function closeMenu(){ | |
| $('.menu li').removeClass('animate'); | |
| setTimeout(function(){ | |
| $('div.burger').removeClass('open'); | |
| $('div.x').removeClass('rotate45').addClass('rotate30'); | |
| $('div.z').removeClass('rotate135').addClass('rotate150'); | |
| $('div.menu-bg').removeClass('animate'); | |
| setTimeout(function(){ | |
| $('div.x').removeClass('rotate30'); | |
| $('div.z').removeClass('rotate150'); | |
| }, 50); | |
| setTimeout(function(){ | |
| $('div.y').show(); | |
| $('div.x, div.z').removeClass('collapse'); | |
| }, 70); | |
| }, 100); | |
| } |
This file contains 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
| * { margin: 0px; padding: 0px; } | |
| body { | |
| background: #383c55; | |
| width: 100%; | |
| height: 100%; | |
| font:12px "Open Sans", sans-serif; | |
| } | |
| #view-code{ | |
| color:#4183d7; | |
| font-size:13px; | |
| text-transform:uppercase; | |
| font-weight:700; | |
| text-decoration:none; | |
| position:absolute;top:640px; left:50%;margin-left:-35px; | |
| } | |
| div.screen{ | |
| width:320px; | |
| height:560px; | |
| overflow:hidden; | |
| position:absolute; | |
| top:50px; | |
| left:50%; | |
| margin-left:-160px; | |
| background:#31558a; | |
| } | |
| .list{margin-top:36px; text-align:left;} | |
| .item{ | |
| height:115px;.menu-splitR li:nth-of-type(3) | |
| margin-top:30px 0; | |
| padding-left:115px; | |
| clear:both; | |
| } | |
| .item .img, .item span{background:#214273; border-radius:3px;} | |
| .item .img{float:left; width:71px; height:71px; margin-left:-93px;} | |
| .item span{height:11px; width:180px; margin-bottom:19px; float:left;} | |
| .item span:nth-of-type(3){width:75px; margin-botom:0;} | |
| div.burger { | |
| height: 30px; | |
| width: 40px; | |
| position: absolute; | |
| top: 11px; | |
| left: 21px; | |
| cursor: pointer; | |
| } | |
| div.x, | |
| div.y, | |
| div.z { | |
| position: absolute; margin: auto; | |
| top: 0px; bottom: 0px; | |
| background: #fff; | |
| border-radius:2px; | |
| -webkit-transition: all 200ms ease-out; | |
| -moz-transition: all 200ms ease-out; | |
| -ms-transition: all 200ms ease-out; | |
| -o-transition: all 200ms ease-out; | |
| transition: all 200ms ease-out; | |
| } | |
| div.x, div.y, div.z { height: 3px; width: 26px; } | |
| div.y{top: 18px;} | |
| div.z{top: 37px;} | |
| div.collapse{ | |
| top: 20px; | |
| -webkit-transition: all 70ms ease-out; | |
| -moz-transition: all 70ms ease-out; | |
| -ms-transition: all 70ms ease-out; | |
| -o-transition: all 70ms ease-out; | |
| transition: all 70ms ease-out; | |
| } | |
| div.rotate30{ | |
| -ms-transform: rotate(30deg); | |
| -webkit-transform: rotate(30deg); | |
| transform: rotate(30deg); | |
| -webkit-transition: all 50ms ease-out; | |
| -moz-transition: all 50ms ease-out; | |
| -ms-transition: all 50ms ease-out; | |
| -o-transition: all 50ms ease-out; | |
| transition: all 50ms ease-out; | |
| } | |
| div.rotate150{ | |
| -ms-transform: rotate(150deg); | |
| -webkit-transform: rotate(150deg); | |
| transform: rotate(150deg); | |
| -webkit-transition: all 50ms ease-out; | |
| -moz-transition: all 50ms ease-out; | |
| -ms-transition: all 50ms ease-out; | |
| -o-transition: all 50ms ease-out; | |
| transition: all 50ms ease-out; | |
| } | |
| div.rotate45{ | |
| -ms-transform: rotate(45deg); | |
| -webkit-transform: rotate(45deg); | |
| transform: rotate(45deg); | |
| -webkit-transition: all 100ms ease-out; | |
| -moz-transition: all 100ms ease-out; | |
| -ms-transition: all 100ms ease-out; | |
| -o-transition: all 100ms ease-out; | |
| transition: all 100ms ease-out; | |
| } | |
| div.rotate135{ | |
| -ms-transform: rotate(135deg); | |
| -webkit-transform: rotate(135deg); | |
| transform: rotate(135deg); | |
| -webkit-transition: all 100ms ease-out; | |
| -moz-transition: all 100ms ease-out; | |
| -ms-transition: all 100ms ease-out; | |
| -o-transition: all 100ms ease-out; | |
| transition: all 100ms ease-out; | |
| } | |
| div.navbar{height:73px;background:#385e97;} | |
| div.menu-bg{ | |
| width: 320px; | |
| height: 568px; | |
| position:absolute; | |
| top:0; | |
| left:0; | |
| background:#40435b; | |
| opacity:0; | |
| -webkit-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| -moz-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| -ms-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| -o-transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| transition: all 300ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| } | |
| div.menu-bg.animate{ | |
| opacity:0.9; | |
| -webkit-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| -moz-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| -ms-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| -o-transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| transition: all 400ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| } | |
| div.menu { | |
| height: 568px; | |
| width: 160px; | |
| } | |
| .menu-splitL, .menu-splitR{ | |
| overflow:hidden; | |
| position: absolute; | |
| top: 90px; | |
| left: 0px; | |
| width:160px; | |
| } | |
| .menu-splitR{left:160px;} | |
| div.menu ul li { | |
| list-style: none; | |
| width:320px; | |
| margin-top:40px; | |
| text-align:center; | |
| font-size:19px; | |
| -webkit-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| -moz-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| -ms-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| -o-transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| transition: all 150ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| } | |
| div.menu ul li a { | |
| color:#fff; | |
| text-transform:uppercase; | |
| text-decoration:none; | |
| letter-spacing:3px; | |
| } | |
| section > div { | |
| transition: transform 1s; | |
| transform: translateX(0px); | |
| } | |
| div.menu li.animate{ | |
| font-size:19px; | |
| opacity:1; | |
| -webkit-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| -moz-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| -ms-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| -o-transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| transition: all 200ms cubic-bezier(0.000, 0.995, 0.990, 1.000); | |
| } | |
| .menu-splitL li:nth-of-type(1){ margin-left:44px;transition-delay: 0.12s;} | |
| .menu-splitL li.animate:nth-of-type(1){ margin-left:0; transition-delay: 0.0s; } | |
| .menu-splitL li:nth-of-type(2){ margin-left:41px; transition-delay: 0.09s;} | |
| .menu-splitL li.animate:nth-of-type(2){ margin-left:0; transition-delay: 0.05s;} | |
| .menu-splitL li:nth-of-type(3){ margin-left:57px; transition-delay: 0.046s;} | |
| .menu-splitL li.animate:nth-of-type(3){ margin-left:0; transition-delay: 0.1s;} | |
| .menu-splitL li:nth-of-type(4){ margin-left:61px;transition-delay: 0.03s;} | |
| .menu-splitL li.animate:nth-of-type(4){ margin-left:0; transition-delay: 0.15s;} | |
| .menu-splitL li:nth-of-type(5){ margin-left:59px; transition-delay: 0.0s; } | |
| .menu-splitL li.animate:nth-of-type(5){ margin-left:0; transition-delay: 0.2s; } | |
| .menu-splitR li:nth-of-type(1){ margin-left:-201px;transition-delay: 0.12s;} | |
| .menu-splitR li.animate:nth-of-type(1){ margin-left:-160px; transition-delay: 0.0s; } | |
| .menu-splitR li:nth-of-type(2){ margin-left:-203px; transition-delay: 0.069s;} | |
| .menu-splitR li.animate:nth-of-type(2){ margin-left:-160px; transition-delay: 0.05s;} | |
| .menu-splitR li:nth-of-type(3){ margin-left:-214px; transition-delay: 0.06s;} | |
| .menu-splitR li.animate:nth-of-type(3){ margin-left:-160px; transition-delay: 0.1s;} | |
| .menu-splitR li:nth-of-type(4){ margin-left:-217px;transition-delay: 0.03s;} | |
| .menu-splitR li.animate:nth-of-type(4){ margin-left:-160px; transition-delay: 0.15s;} | |
| .menu-splitR li:nth-of-type(5){ margin-left:-217px; transition-delay: 0.0s; } | |
| .menu-splitR li.animate:nth-of-type(5){ margin-left:-160px; transition-delay: 0.2s; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment