JdwPBm

index.html

<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>

JdwPBm.markdown

JdwPBm

Forked from Captain Anonymous's Pen wBQdwx.

A Pen by Rafi Ali Khan on CodePen.

License.

script.js

 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');
 });

scripts

<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>

style.css

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;
}