JSFiddle - React, Tailwind, and code Playground

by Bhushan Kawadkar

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div id='container'>
<div class="click_menu yellow">
<p><a href="#">Hover Me</a></p>
<p class="subtext">The front page</p>
</div>
    <div class="content"> <p>Content</p> </div>
</div>

CSS

body{
    font-family:"Lucida Grande", arial, sans-serif;
    background:#F3F3F3;
}

.click_menu{
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    position: absolute;
    z-index: 100;
}

a{
    color:#FFF;
    text-decoration:none;
}

p{
    padding:0px 5px;
}

.subtext{
    padding-top:15px;
}

/*Menu Color Classes*/
.yellow{background:#FBC798;}

.content {
    margin-top:50px;
    position:absolute;
    clear: both;
    width:100px;
    height:50px;
    background:#D52100;    
}

JavaScript

$(document).ready(function(){

//When mouse rolls over
$(".click_menu").mouseover(function(){
$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});

//When mouse is removed
$(".click_menu").mouseout(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});

});