Skip to content

Instantly share code, notes, and snippets.

/Menu-2.markdown

Created March 9, 2015 05:06
Show Gist options
  • Save anonymous/50e6ccf027def744765f to your computer and use it in GitHub Desktop.
Save anonymous/50e6ccf027def744765f to your computer and use it in GitHub Desktop.
Download ZIP
Menu 2
Raw
index.html
<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>
Raw
Menu-2.markdown
Raw
script.js
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);
}
Raw
style.css
* { 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