JSFiddle - React, Tailwind, and code Playground

by agconti

HTML

<nav>
    <div class="group">
        <img class="thing" src="http://placekitten.com/100/50" alt="Icon"> <span class="js--menu-toggle">menu</span>

    </div>
    <ul class="js--menu">
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
</nav>

CSS

img {
    float:left;
}
span {
    float: right;
}
div {
    height:100%;
}
ul {
    padding:0;
    margin:0;
    display: none;
}
.group:after {
    content:"";
    display: table;
    clear: both;
}
ul li {
    display:block;
    padding: 1em;
    border-bottom: 1px solid black;
    background: gray;
    text-align: center;
}
.js--menu-toggle {
}
.js--menu {
}

JavaScript

$(function () {
    $(".js--menu-toggle").on("click", function() {
        console.log("hello");
        $(".js--menu").slideToggle();
    });
});