JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<div id="navigation">
    <div id="lava">
        <div id="lava-cursor"></div>
    </div>
    <ul>
        <li><a href="">Home</a></li>
        <li class="current"><a href="">Archives</a></li>
        <li><a href="">Contact</a></li>
    </ul>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body {
    margin: 0 auto;
    padding: 2em 0;
    width: 50%;
    max-width: 600px;
}

#navigation {
    height: 3em;
    background: #f0f0f0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    position: relative;
}

#navigation ul {
    margin: 0.4em 0 0 0;
    padding: 0;
    list-style: none;
    height: 2.6em;
    font: 90% 'Open Sans', sans-serif;
}

#navigation li {
    float: left;
    width: 6em;
    height: 100%;
    display: block;
    margin-right: 1em;
}

#navigation a {
    float: left;
    width: 100%;
    height: 100%;
    color: #333;
    text-transform: uppercase;
    text-align: center;
    line-height: 2.6;
    text-decoration: none;
    display: block;
}

#navigation a:hover {
    color: #d34545;
}

#lava {
    width: 100%;
    height: 0.2em;
    background: #ccc;
    position: relative;
}

#lava-cursor {
    width: 5.4em;
    height: 100%;
    background: #d34545;
    display: none;
    position: relative;
}

JavaScript

(function($) {


    $.fn.lava = function(options) {
    
        var that = this;
        
        var settings = {
        
            container: 'ul',
            cursor: '#lava-cursor',
            current: '.current',
            speed: 800
        
        
        };
        
        options = $.extend(settings, options);
        
        return that.each(function() {
        
            $(options.cursor).css('left', $(options.container).find(options.current).position().left).fadeIn(options.speed);
            
            $('li', $(options.container)).each(function() {
            
                var $li = $(this);
                
                $li.mouseover(function() {
                
                    $(options.cursor).animate({
                        left: $li.position().left
                    }, options.speed);
                
                
                });
            
            
            });
        
        
        });
    
    
    };


})(jQuery);

$(function() {

    $('#navigation').lava();

});