JSFiddle - React, Tailwind, and code Playground

by brianflanagan

HTML

<ul id="navigation">
    <li class="standard">
        <span class="logo"></span>
        <span class="navigation-text">Home</span>
    </li>
    <li class="standard">
        <span class="logo"></span>
        <span class="navigation-text">Gallery</span>
    </li>
    <li class="standard">
        <span class="logo"></span>
        <span class="navigation-text">Gallery</span>
    </li>
    <li class="standard">
        <span class="logo"></span>
        <span class="navigation-text">GalleryGallery123</span>
    </li>
    <li class="standard"></li>
</ul>

CSS

body {
    background:#383838;
    margin:0;
    padding:0;
}
ul, li {
    list-style-type:none;
}
#navigation {
    float: left;
    overflow:hidden;
}

#navigation li {
    overflow:hidden;
    float:left; 
    display:inline-block;
    background: #19181D;
    width: 45px;
    height: 37px;
    box-shadow: 0px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    border-left:1px dashed #383838;
}

#navigation li:hover {
    background: #141317;
}

#navigation li:first-child {
    background: #6E9B40;
    min-width: 45px;
    height: 37px;
    border-radius:5px 0 0 5px;
    border-left:none;
}

#navigation li:first-child:hover {
    background: #8CB942;
}

#navigation li:last-child {
    min-width: 45px;
    height: 37px;
    border-radius:0 5px 5px 0;
}

.logo {
    background: #fff; 
    height: 17px;
    width: 17px;
    margin: 10px 0 0 14px;
    float:left;
}

.navigation-text {
    margin: 11px 0 0 14px;
    font-family: verdana;
    font-size: 12px;
    color: #FFF;
    opacity: 0;
    float:left;
}

JavaScript

var minWidth = 45;
var padding = 15;
var duration = 300;

$('#navigation li').on('mouseenter', function(){
    // Calculate the width.
    var width = $(this).find('span.navigation-text').width();
    
    // Animate the element to the full width.
    $(this).stop().animate({
        width: width + padding + minWidth
    }, duration);
    
    // Show the contents.
    $(this).find('.navigation-text').animate({
        opacity: .999
    }, duration);
});

$('#navigation li').on('mouseleave', function(){
    // Hide out the contents.
    $(this).stop().find('.navigation-text').animate({
        opacity: 0
    }, duration);
    
    // Set the element to the minimum width.
    $(this).animate({ 
        width: minWidth
    }, duration);
});