Tab Bar Transitions

These are simple line transitions that take place when a link is clicked. These animations can be incorporated into tab-based content. They are not recommended for navbars that link to other pages as the animation will not be visible to the user.

Requires some JavaScript to toggle the current class when a link is clicked. Example JavaScript is included in the source code below.

Simple Line

HTML

<nav class="menu-animated menu-simple-lines">
    <ul class="menu">
        <li class="menu-item current">
            <a href="#">Article 1</a>
        </li>
        <li class="menu-item">
            <a href="#">Article 2</a>
        </li>
        <li class="menu-item">
            <a href="#">Article 3</a>
        <li class="menu-item">
            <a href="#">Article 4</a>
        </li>
        <li class="menu-item">
            <a href="#">Article 5</a>
        </li>
        <li class="menu-line"></li>
    </ul>
</nav>

Sass

.menu-animated { @include menu-animated(); }
.menu-simple-lines { @include menu-simple-lines(); }

JavaScript

$('.menu-animated .menu-item').on('click', function(e) {
    e.preventDefault();
    let $that = $(this);

    $that.parent('ul').find('.current').removeClass('current');
    $that.addClass('current');
});

HTML

<nav class="menu-animated menu-double-lines">
    <ul class="menu">
        <li class="menu-item current">
            <a href="#">Article 1</a>
        </li>
        <li class="menu-item">
            <a href="#">Article 2</a>
        </li>
        <li class="menu-item">
            <a href="#">Article 3</a>
        <li class="menu-item">
            <a href="#">Article 4</a>
        </li>
        <li class="menu-item">
            <a href="#">Article 5</a>
        </li>
    </ul>
</nav>

Sass

.menu-animated { @include menu-animated(); }

JavaScript

$('.menu-animated .menu-item').on('click', function(e) {
    e.preventDefault();
    let $that = $(this);

    $that.parent('ul').find('.current').removeClass('current');
    $that.addClass('current');
});