Forked from Captain Anonymous's Pen wBQdwx.
A Pen by Rafi Ali Khan on CodePen.
<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> |
Forked from Captain Anonymous's Pen wBQdwx.
A Pen by Rafi Ali Khan on CodePen.
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; | |
} |