JSFiddle - React, Tailwind, and code Playground

by Jon Eyrick

HTML

<nav class="nav">
    <a href="" class="nav__toggle">Menu</a>
    <ul data-state="closed">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</nav>

CSS

/* current */
:hover {
    
}
:active {
    
}

/* wouldn't it be wonderful */
:closed {
    
}
:open {
    
}
:toggled {
    
}
:current {
    
}

/* boom */
[data-state=open] {
    
}
[data-state=toggled] {
    
}
[data-state=current] {
    
}

/* extending */

myElem[data-state=open] {
    /* easy... */
}

/* demo */

.nav {
    background: #2284B5;
    color: #fff;
    border-radius: 3px;
}
.nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav ul li {
    padding: 5px 10px;
}
.nav a {
    padding: 5px 10px;
    display: block;
    color: #fff;
    text-decoration: none;
}
.nav ul[data-state=closed] {
    display: none;
}
.nav ul[data-state=open] {
    display: inherit;
}

JavaScript

(function () {
    
    var nav = document.querySelector('.nav__toggle');
    var toggleState = function (elem, one, two) {
        var elem = document.querySelector(elem);
        elem.setAttribute('data-state', elem.getAttribute('data-state') === one ? two : one);
    };
    
    nav.onclick = function (e) {
        toggleState('.nav ul', 'closed', 'open');
        e.preventDefault();
    };
    
    // ES5
    // nav.addEventListener('click', toggleState.bind(null, '.nav ul', 'closed', 'open'), false);
    
})();