JSFiddle - React, Tailwind, and code Playground

by Nick Iaconis

HTML

<!-- offscreen tab navigation menu example -->

<div><a class='nav-tab' href='javascript:void(0);'><img src="http://dummyimage.com/120x38/000/000.png" /><span class='nav-title'>MENU</span></a><span class='nav-menu'></span>
    <a href='http://jsfiddle.net'>link</a>
    <div><a href='#'>link</a></div>
    <div><a href='#'>link</a></div>
    <div><a href='#'>link</a></div>
</div>

<div><a class='nav-tab' href='#' onclick='return false;'><img src="http://dummyimage.com/120x38/000/000.png" /><span class='nav-title'>HOME</span><span class='nav-menu'>
    <div>link</div>
    <div>link</div>
    <div>link</div>
    <div>link</div>
</span></a></div>

<div><a class='nav-tab' href='#' onclick='return false;'><img src="http://dummyimage.com/120x38/000/000.png" /><span class='nav-title'>HOME</span><span class='nav-menu'>
    <div>link</div>
    <div>link</div>
    <div>link</div>
    <div>link</div>
</span></a></div>

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

CSS

a.nav-tab {
    border: none;
    background-color: red;
    width: 120px;
    height: 38px;
    position: relative;
    left: -100px;
    transition:         left 0.3s ease-out;
    border-radius: 0 3px 3px 0;
}

a.nav-tab:hover {
    background-color:cyan;
    left: -94px;
}

a.nav-tab:focus,
a:focus ~ a.nav-tab {
    background-color: violet;
    left: 0px;
}

a.nav-tab:focus:hover {
    background-color: yellow;
}

a.nav-tab > img {
    border-radius: 0 3px 3px 0;
}

span.nav-menu {
    position: absolute;
    top: 42px;
    left: -80px;
    width: 60px;
    padding: 4px;
    background-color: #000;
    border-radius: 0 0 3px 3px;
    transition: left 0.3s ease-out;
}

a.nav-tab:focus + .nav-menu {
    left: 30px;
}

span.nav-title {
    position: absolute;
    color: #fff;
    transition: 0.3s ease-out;
    font-size: 0.75em;
    top: -10px;
    left: 92px;
    transform: rotate(270deg);
}

a:focus > span.nav-title {
    font-size: 1.25em;
    top: -15px;
    left: 57px;
    transform: rotate(360deg);
}

JavaScript

// (re-deprecated?) offscreen tab navigation menu example