jQuery: vertically animated sliding menu

by lovromar

HTML

<ul id="test" class="slide-menu">
    <li>
        <div class="box-top">
            Lorem ipsum dolor
        </div>
        <div class="box-hover">
            Sit amet nescio
        </div>
    </li>
    <li>
        <div class="box-top">
            Lorem ipsum dolor
        </div>
        <div class="box-hover">
            Sit amet nescio
        </div>
    </li>
    <li>
        <div class="box-top">
            Lorem ipsum dolor
        </div>
        <div class="box-hover">
            Sit amet nescio
        </div>
    </li>
</ul>

CSS

ul.slide-menu {
    width: 90%;
    height: 10em;
    margin: 1em auto;
    padding: 0;
    list-style: none;
}

ul.slide-menu li {
    float: left;
    width: 30%;
    margin-right: 1em;
    height: 100%;
    background: #ccc;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

ul.slide-menu div.box-top {
    width: 100%;
    height: 100%;
    line-height: 10;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
}

ul.slide-menu div.box-hover {
    width: 100%;
    height: 100%;
    line-height: 10;
    text-align: center;
    position: absolute;
    top: 10em;
    left: 0;
    background: #000;
    color: #f96;
}

JavaScript

var SlideMenu = new

function() {

    var menu = $('#test'),
        items = $('li', menu);

    var hoverize = function() {
        items.each(function() {

            var $li = $(this);
            var boxTop = $('div.box-top', $li);
            var boxHover = $('div.box-hover', $li);

            $li.hover(function() {

                boxTop.stop(true, true).animate({
                    top: -$li.height()


                }, 500, 'easeOutExpo', function() {

                    boxHover.stop(true, true).animate({

                        top: 0
                    }, 500, 'easeOutExpo');

                });

            }, function() {

                boxTop.stop(true, true).animate({
                    top: 0


                }, 500, 'easeOutExpo', function() {

                    boxHover.stop(true, true).animate({

                        top: $li.height()
                    }, 500, 'easeOutExpo');

                });

            });

        });

    };

    this.init = function() {

        hoverize();
    }

}();

SlideMenu.init();