<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");
This Pen doesn't use any external CSS resources.