CSS3 Flexbox Sample1-3

by FiNGAHOLiC

HTML

<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<nav>
    <ul class="js-docknav">
        <li><a href="#">nav1</a></li>
        <li><a href="#">nav2</a></li>
        <li><a href="#">nav3</a></li>
        <li><a href="#">nav4</a></li>
        <li><a href="#">nav5</a></li>
        <li><a href="#">nav6</a></li>
        <li><a href="#">nav7</a></li>
    </ul>
</nav>

CSS

html, body, ul {
    margin: 0;
    padding: 0;
}

body {
    padding: 10px;
}

ul {
    list-style: none;
    overflow: hidden;
}

ul li {
    float: left;
    text-align: center;
}

ul li:hover a {
    background: rgba(56, 56, 56, 1);
}

ul li a {
    background: rgba(48, 48, 48, 1);
    border-right: 1px solid rgba(44, 44, 44, 1);
    box-sizing: border-box;
    color: white;
    display: block;
    font-size: 12px;
    line-height: 16px;
    padding: 10px;
    text-decoration: none;
}

ul li:last-child a {
    border-right: 0;
}

JavaScript

$.widget('ui.docknav', {
    options: {
        hoverScale: 2,
        hoverDuration: 100,
        hoverEasing: 'linear'
    },
    _create: function () {
        this._setupElements();
        this._setupProps();
        this._setNavWidth();
        this._setEvents();
    },
    _setupProps: function () {
        this._navsLength = this._$nav.length;
        this._navsWidth = this.element.width();
        this._navWidth = Math.floor(this._navsWidth / this._navsLength);
        this._navHoverWidth = this._navWidth * this.options.hoverScale;
        this._navNotHoverWidth = Math.floor((this._navsWidth - this._navHoverWidth) / (this._navsLength - 1));
    },
    _setupElements: function () {
        this._$nav = this.element.children();
    },
    _setNavWidth: function () {
        this._$nav.css('width', this._navWidth);
    },
    _setEvents: function () {
        this._$nav
            .on('mouseenter', $.proxy(this._onMouseEnterHandler, this))
            .on('mouseleave', $.proxy(this._onMouseLeaveHandler, this));
    },
    _onMouseEnterHandler: function (e){
        var o = this.options;
        var navIndex = $(e.currentTarget).index();
        this._$nav.eq(navIndex).stop().animate({
            width: this._navHoverWidth
        }, o.hoverDuration, o.hoverEasing);
        this._$nav.not(':eq(' + navIndex + ')').stop().animate({
            width: this._navNotHoverWidth
        }, o.hoverDuration, o.hoverEasing);
    },
    _onMouseLeaveHandler: function (e){
        var o = this.options;
        this._$nav.stop().animate({
            width: this._navWidth
        }, o.hoverDuration, o.hoverEasing);
    }
});

$(function () {
    $('.js-docknav').docknav();
});