Skip to content

Instantly share code, notes, and snippets.

@rafialikhan
Created August 6, 2015 17:51
Show Gist options
  • Save rafialikhan/53f6abbf1f0ce7cb0320 to your computer and use it in GitHub Desktop.
Save rafialikhan/53f6abbf1f0ce7cb0320 to your computer and use it in GitHub Desktop.
JdwPBm
<div class="menu-block menu-small">
<div class="bar">
<div class="bar-i bar-1"></div>
<div class="bar-i bar-2"></div>
<div class="bar-i bar-3"></div>
</div>
<ul>
<div class="menu">
<ul>
<li class="page_item page-item-2"><a href="#">Love Radio</a></li>
<li class="page_item page-item-21 current_page_item"><a href="#">Dance</a></li>
<li class="page_item page-item-14"><a href="#">Russian</a></li>
<li class="page_item page-item-33"><a href="#">Bollywood</a></li>
<li class="page_item page-item-14"><a href="#">Summer</a></li>
<li class="page_item page-item-33"><a href="#">Gold</a></li>
<li class="page_item page-item-14"><a href="#">R&B</a></li>
<li class="page_item page-item-33"><a href="#">Chill</a></li>
<li class="page_item page-item-14"><a href="#">R&B</a></li>
<li class="page_item page-item-33"><a href="#">Teen</a></li>
</ul>
</div>
</ul>
</div>
tlMenu = new TimelineLite({
paused: true
});
el = $(".menu-block");
tlMenu.to(el, .5, {
margin: 0,
padding: 20,
width: '100%',
height: '100%',
borderRadius: 4,
ease: Back.easeInOut,
opacity: 0.4
})
.to(el, 0, {
opacity: 0.8,
backgroundColor: '#000'
})
.to(el.find('.page_item'), .1, {
marginTop: 0,
marginRight: 0,
autoAlpha: 1
}, .1, '-=.5')
.to($('.bar'), 1, {margin:40, rotation:365, ease:Power1.easeInOut }, '-=.8')
.to($('.bar-i'), 1, { width:18 , margin:3, ease:Back.easeIn }, '-=1')
.to($('.bar-i.bar-1'), 1, { rotation:'-45deg' , ease:Back.easeIn }, '-=1')
.to($('.bar-i.bar-2'), 1, {autoAlpha:0 , ease:Back.easeIn }, '-=1')
.to($('.bar-i.bar-3'), 1, {rotation:'45deg' , ease:Back.easeIn }, '-=1');
$('.menu-block').on('mouseenter', function() {
tlMenu.play();
$(this).addClass('.menu-active');
});
$('.menu-block').on('click', function() {
tlMenu.reverse();
$(this).removeClass('.menu-active');
});
$('.menu-block').on('mouseleave', function() {
tlMenu.reverse();
$(this).removeClass('.menu-active');
});
$('.page_item').on('click', function() {
tlMenu.reverse();
$(this).removeClass('.menu-active');
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/jquery.gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/utils/Draggable.min.js"></script>
body{
font-family: Helvetica, Arial;
background-image: url(http://browseideas.com/wp-content/uploads/2012/02/Cool-and-Beautiful-Music-Wallpaper-22.jpg);
background-size: cover;
overflow-x:hidden;
}
/*////////////////////// MENU ////////////////////////*/
.menu-block {
cursor: pointer;
position: absolute;
bottom: 0%;
right: 0%;
width: 30px;
height: 30px;
background: #ff0000;
margin: 20px;
border-radius: 50%;
z-index: 6000;
max-width: 100%;
max-height: 100%;
-webkit-box-shadow: 0px 2px 5px 0px rgba(50, 50, 50, 0.6);
-moz-box-shadow: 0px 2px 5px 0px rgba(50, 50, 50, 0.6);
box-shadow: 0px 2px 5px 0px rgba(50, 50, 50, 0.6);
overflow: hidden;
padding: 10px;
}
.menu-block .bar {
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
margin: 7px 0 0 2px;
width: 25px;
height: 20px;
}
.menu-block .bar .bar-i {
width: 25px;
height: 3px;
background: #ffffff;
margin-bottom: 4px;
}
.menu-block ul,
.menu-block li {
list-style: none;
margin: 10px;
padding: 0;
text-align:right;
}
.menu-block ul {
margin-top: 20px;
}
.menu-block li {
font-size: 16px;
font-weight: 400;
color: #ffffff;
}
.menu-block li a {
color: #ffffff;
line-height: 180%;
text-decoration:none;
}
.menu-block li.page_item {
margin-top: 25px;
margin-right:-200px;
opacity: 0;
}
.page_item {
margin-top: 25px;
opacity: 0;
}
.copy{
position:absolute;
left:20px;
bottom:20px;
color:white;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment