JSFiddle - React, Tailwind, and code Playground

by Ashish Kasama

HTML

<div class="header">
        
        <!-- current-menu-item -->
        <div class="main-menu">
            
            <div class="menu-main-container">
                <ul id="menu-main" class="menu">
                    <li title="Home" id="menu-item "  class="home" ><a href="#" title="Home" >Home</a></li>
                    <li class="about   current-menu-item"><a href="#">About</a></li> 
                    <li class="faves"><a href="#">Favorites</a></li> 
                    <li class="contact"><a href="#">Contact</a></li> 
                </ul>
            </div>
        </div>
        </div>
        
        <div class="header-divider"></div>

CSS

@charset "utf-8";
/* CSS Document */
@import url('reset.css');

body {background: white; margin: 25px;}

.header {background: #f5f5f5; height: 185px; width: 100%; border-top: 3px solid black;}

.header-divider {
background: url(http://dev.aintyomamasblog.com/wp-content/themes/lefthanded/images/layout/h-line.png) repeat-x;
height: 10px;
margin-top: -2px;
}

.main-menu {width: 500px; margin: 0 auto;}

#menu-main {list-style: none; margin: 0; padding: 0px; float: left; overflow: hidden}
#menu-main li {float: left; margin-right: 10px; font-size: 18px; margin: 0;}
#menu-main a {color: black; text-indent: -9999px; position: relative; top: -36px}


#menu-main .home a {width: 87px; height: 177px; background:url(http://aintyomamasblog.com/dev/jquery-nav/images/menu-sprite3.png) 0 -14px no-repeat; display: block;}
#menu-main .about a {width: 99px; height: 177px; background: url(http://aintyomamasblog.com/dev/jquery-nav/images/menu-sprite3.png) -87px -8px no-repeat; display: block;}
#menu-main .faves a {width: 99px; height: 177px; background: url(http://aintyomamasblog.com/dev/jquery-nav/images/menu-sprite3.png) -186px -3px no-repeat; display: block;}
#menu-main .contact a {width: 126px; height: 177px; background: url(http://aintyomamasblog.com/dev/jquery-nav/images/menu-sprite3.png) -289px 0 no-repeat; display: block;}

/*
#menu-main .home a:hover {background-position: -0px -284px; }
#menu-main .about a:hover {background-position: -87px -278px; }
#menu-main .faves a:hover {background-position: -186px -273px; }
#menu-main .contact a:hover {background-position: -289px -270px; }
*/


#menu-main .current-menu-item a{top: 0}


#menu-main .home.current-menu-item a {background-position: 0 -9px; }
#menu-main .about.current-menu-item a {background-position: -87px -7px; }
#menu-main .faves.current-menu-item a {background-position: -186px -7px; }
#menu-main .contact.current-menu-item a {background-position: -289px -7px; }

/*
.main-menu .home.current-menu-item a:hover...

JavaScript

jQuery.easing['jswing']=jQuery.easing['swing'];jQuery.extend(jQuery.easing,{easeOutBounce:function(x,t,b,c,d){if((t/=d)<(1/2.75)){return c*(7.5625*t*t)+b}else if(t<(2/2.75)){return c*(7.5625*(t-=(1.5/2.75))*t+.75)+b}else if(t<(2.5/2.75)){return c*(7.5625*(t-=(2.25/2.75))*t+.9375)+b}else{return c*(7.5625*(t-=(2.625/2.75))*t+.984375)+b}}});


$('#menu-main').children(':not(.current-menu-item)').children().hover(function(){
    $(this).stop(true, false).animate({top: '0'}, 200, "easeOutBounce");
}, function(){
    $(this).animate({top: '-36px'}, 500, "easeOutBounce");
    });

$('#menu-main .current-menu-item').children().hover(function(){
    $(this).animate({top: '0'}, 100, "easeOutBounce");
}, function(){
    $(this).animate({top: '-3px'}, 100, "easeOutBounce");
});