JSFiddle - React, Tailwind, and code Playground

by Chace

HTML

<div id="left-icons"><a class="show" style="color:#999;">DUH!</a>
</div>
<div id="left-navi-designers">
    <div id="topNavigation">
        <ul class="topLevelNavigation">
<a href=".topLevelNavigation" class="button"><li>DESIGNERS</li></a>

<a href=".topLevelNavigation2" class="button"><li>EMERGING</li></a>

<a href=".topLevelNavigation3" class="button"><li>STUDIOS</li></a>

<a href=".topLevelNavigation4" class="button"><li>NEW FACES</li></a>

<a href=".topLevelNavigation5" class="button"><li>EDITORS</li></a>

<a href="#box1" class="button"><li>MEDIA KIT</li></a>

<a href="#box1" class="button"><li>BEAUTY</li></a>

<a href="#box1" class="button"><li>BRANDS</li></a>

<a href="#box1" class="button"><li>MODELS</li></a>

<a href="#box1" class="button"><li>PARTIES</li></a>

        </ul>
    </div>

CSS

#left-navi-designers {
    height: 100%;
    position: fixed;
    background: #fff;
    width: 100%;
    display: none;
}

JavaScript

$('a.show').on('click', function () {
    $('#left-navi-designers').toggle("slide", { direction: "left" }, 1000);
});