CSS menu animation

by Kheema Pandey

HTML

<div id="header-buttons">
    <div class="button ">
        <div class="container">
            <div class="button-stripe" style="background-color: rgb(200, 113, 55); bottom: -41px;"></div> <a class="button-text" href="#" style="bottom: -41px;">
            First
        </a>

        </div>
    </div>
    <div class="button ">
        <div class="container">
            <div class="button-stripe" style="background-color: #0069ff"></div> <a class="button-text" href="#">
            Second
        </a>

        </div>
    </div>
    <div class="button ">
        <div class="container">
            <div class="button-stripe" style="background-color: rgb(55, 200, 55); bottom: -41px;"></div> <a class="button-text" href="#" style="bottom: -41px;">
            Third
        </a>

        </div>
    </div>
</div>

CSS

#header-buttons {
    position: relative;
    top:15px;
    height: 45px;
    background-color: #333;
    overflow: hidden;
    font-family:"Open Sans Condensed";
    display: table;
    width: 100%;
}
.button a.button-text {
    position: relative;
    top: 0;
    left:0;
    color: #fff;
    text-transform: uppercase;
    font-size: 19px;
    text-align: center;
    display: block;
    padding-left: 15px;
    padding-right: 15px;
    text-decoration: none;
}
.button .button-stripe {
    position: absolute;
    bottom: -41px;
    left: 0px;
    width: 100%;
    height: 45px;
}
.button {
    position: relative;
    display: table-cell;
    height: 100%;
    line-height: 45px;
}
.container {
    position: relative;
}

JavaScript

$(function () {
    $(".button").each(function (index) {
        var me = $(this);
        if (me.hasClass("selected")) {
            me.css('backgroundColor', me.find('div.button-stripe').css('backgroundColor'));
            return;
        }
        var children1 = me.find('div.button-stripe');
        me.mouseenter(function () {
            children1.stop().animate({
                bottom: 0
            }, 250);
        });
        me.mouseleave(function () {
            children1.stop().animate({
                bottom: -41
            }, 250);
        });
    });
});