JSFiddle - React, Tailwind, and code Playground

by jseppi

HTML

<body>
    <div id="content">Some Content and Stuff...</div>
    <div id="nav">
        <div id="d" class="mitm"><a href="#">Default</a>
        </div>
        <div class="mitm"><a href="#">Link1</a>
        </div>
        <div class="mitm"><a href="#">Link2</a>
        </div>
        <div class="mitm"><a href="#">Link3</a>
        </div>
        <div id="nav_arrow"></div>
    </div>
</body>

CSS

#nav {
    height: 80px;
    background: #000;
    width: 440px;
    overflow: hidden;
}
#content {
    font-family: Calibri;
    font-size: 15px;
    padding: 20px;
    height: 200px;
    background: #fff;
    width: 400px;
    border-top: 1px solid #ccc;
}
#nav_arrow {
    position: relative;
    background: transparent;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid #000;
    border-bottom: none;
    width: 0px;
    height: 0px;
    font-size: 1px;
    margin: 20px 0 0 44px;
    transition: margin 0.2s;
    -moz-transition: margin 0.2s;
    /* Firefox 4 */
    -webkit-transition: margin 0.2s;
    /* Safari and Chrome */
    -o-transition: margin 0.2s;
    /* Opera */
}
a {
    color: #000;
    text-decoration: none;
    font-family: Calibri;
    font-size: 20px;
}
a:hover {
    color: red;
}
#d {
    margin: 20px 0px 0px 0px;
    font-weight: bold;
    float: left;
    display: inline;
    width: 180px;
    height: 60px;
    background: #fff;
    padding: 20px 0 0 20px;
    text-align: left;
}
.mitm {
    margin: 20px 0px 0px 0px;
    float: left;
    display: inline;
    width: 60px;
    height: 60px;
    background: #fff;
    padding: 20px 0 0 20px;
    text-align: center;
}

JavaScript

window.onload = function () {
    var fine = [36, 34, 34, 34];
    var mitms = document.getElementsByClassName('mitm');
    var l0 = (mitms[0].offsetLeft + fine[0]);
    document.getElementById("nav_arrow").style.marginLeft = l0 + "px";
    
    for (var i = 0; i < mitms.length; i++) {
        mitms[i].default = false;
        mitms[i].fine = fine[i];
        mitms[i].onmouseover = function () {arr(this);};
        mitms[i].onmouseout = function () {
            var tmp = document.getElementsByClassName('mitm');
            for (var j=0; j<tmp.length; j++) {
                if (tmp[j].default === true) {arr(tmp[j]); break;}
            }
        };
        mitms[i].onclick = function() {
            var tmp = document.getElementsByClassName('mitm');
            for (var j=0; j<tmp.length; j++) {tmp[j].default = false;}
            this.default = true;
        }
    }
    mitms[0].default = true;
};

function arr(el) {
    var mitms = document.getElementsByClassName('mitm');
    var l = el.offsetLeft + el.fine;
    document.getElementById("nav_arrow").style.marginLeft = l + "px";
}