JSFiddle - React, Tailwind, and code Playground

by painotpi

HTML

<div class="left-sidebar">
    <ul id="objects">
        <li class="active"> <span class='triangle'></span>

            <img src="http://cdn.imghack.se/images/a344aec854cf5210ff33c16780beffbb.png" alt="" />
            <p>Översikt</p>
        </li>
        <li> <span class='triangle'></span>

            <img src="http://cdn.imghack.se/images/a1be1dec8f32b8fc99a032be098e8c67.png" alt="" />
            <p>Ekonomi</p>
        </li>
        <li> <span class='triangle'></span>

            <img src="http://cdn.imghack.se/images/22e97b55e5a4f6b6715ace959d1f58f6.png" alt="" />
            <p>Schema</p>
        </li>
        <li> <span class='triangle'></span>

            <img src="http://cdn.imghack.se/images/d4367c3b0573260dabad83089408a3e7.png" alt="" />
            <p>Bokningar</p>
        </li>
        <li> <span class='triangle'></span>

            <img src="http://cdn.imghack.se/images/4bfaa755d9b6c5ff9d5c8ecd9b2c0103.png" alt="" />
            <p>Hjälp</p>
        </li>
    </ul>
</div>

CSS

body {
    background:#f3f1f2;
    font-family:sans-serif;
}
ul#objects {
    margin-left:-40px;
    list-style-type: none;
}
ul#objects li {
    cursor:pointer;
    text-align:center;
    margin-top:40px;
    position: relative;
}
ul#objects li .triangle {
    display: none;
}
ul#objects li.active {
    cursor:pointer;
    text-align:center;
    margin-top:40px;
    position: relative;
}
ul#objects li p {
    margin-top:0px;
    color:#aaa9a9;
    text-shadow:0px 1px rgba(255, 255, 255, 0.6);
}
.left-sidebar {
    height:609px;
    width:79px;
    position:fixed;
    left:0;
    top:0;
    background:#e8e8e8;
    border-right:solid 1px #d8d6d7;
}
li.active .triangle {
    display: block !important;
    animation: test 1s;
    -webkit-animation: test 1s;
}
@keyframes test {
    from {
        top: -78px;
    }
    to {
        top: 10px;
    }
}
@-webkit-keyframes test {
    from {
        top: -78px;
    }
    to {
        top: 10px;
    }
}

.triangle {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right:10px solid white;
    position: absolute;
    right: -1px;
    top: 10px;
}

JavaScript

var supports = (function () {
    var div = document.createElement('div'),
        vendors = 'Khtml Ms O Moz Webkit'.split(' '),
        len = vendors.length;

    return function (prop) {
        if (prop in div.style) return true;

        prop = prop.replace(/^[a-z]/, function (val) {
            return val.toUpperCase();
        });

        while (len--) {
            if (vendors[len] + prop in div.style) {
                // browser supports box-shadow. Do what you need.  
                // Or use a bang (!) to test if the browser doesn't.  
                return true;
            }
        }
        return false;
    };
})();


$("li").click(function () {
    $this = $(this);
    
    $("li").removeClass("active");
    $this.addClass("active");
    
    if (supports('textShadow')) {
        var elm = this;
        var newone = this.cloneNode(true);

        elm.parentNode.replaceChild(newone, elm);

    }
    
    else{
        $(".triangle").animate({
            top: $this.position().top + "px"
        });
    }
});