<h2 style="margin-left:20px;">Lava Lamp Style Menu using GSAP - Click Event</h2>

<p style="margin-left:20px;">click a menu item to see the animated underline:</p>

<div id="box">
<ul id="menu">
  <li><a href="javascript:;">menu</a></li>
  <li><a href="javascript:;">long menu</a></li>
  <li><a href="javascript:;">even longer menu</a></li>
  <li><a href="javascript:;">short menu</a></li>
</ul>
</div>
body {
  color:#555;
  margin:20px 0 0 0;
}

#box {
  position:relative;
  height:100px;
  margin:15px 0 0 0;
}

ul{
  margin:0;
  padding:0;
  display:block;
}

li {
  float:left;
  margin:0 0 0 10px;
  padding:10px;
  list-style-type:none; 
  font-family:Arial;
}

li a {
  display:block;
  text-decoration:none;
  font-weight:bold;
  color:#222;
}

#menu li.slide-line {
  display: block;
  padding:0;
  margin:0;
  background: none #CC0000;
  z-index: 0;
  position: absolute;
  top: 0;
  border-radius:3px;
  width: 47px; 
  height: 5px; 
  left: 0; 
  top: 0;
}
// adds sliding underline HTML
jQuery('#menu').append('<li class="slide-line"></li>');

// set initial position of slide line
TweenMax.set('#menu .slide-line', {
  css:{width: 43, x: 20, y: 30}
});

// animate slide-line on click
jQuery(document).on('click', '#menu li a', function () {
  
        var $this = jQuery(this),
            offset = $this.offset(),
            //find the offset of the wrapping div  
            offsetBody = jQuery('#box').offset();

        // GSAP animate to clicked menu item
        TweenMax.to('#menu .slide-line', 1.7, {
          css:{
            width: $this.outerWidth()+'px',
            x: (offset.left-offsetBody.left)+'px',
            y: (offset.top-offsetBody.top+$this.height())+'px',
            rotation: 0.01
          },
          ease: Elastic.easeOut.config(1,0.5)
        });

        return false;
});

jQuery('#menu > li a').first().trigger("click");

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js