JSFiddle - React, Tailwind, and code Playground

by Mikel

HTML

<button onclick="MenuVisible()">Click</button>
<div id="menuR">
    <nav>
        <ul>
            <li><a href="#">A</a>
            </li>
            <li><a href="#">B</a>
            </li>
            <li><a href="#">C</a>
            </li>
        </ul>
    </nav>
</div>

CSS

#menuR {
    display:none;
    clear:both;
    width:60%;
    min-width:300px;
    margin-left:-36px;
    background:#99B59F;
}
#menuR.open{
    display:block;
}
#menuR nav ul {
    list-style:none;
}
#menuR nav ul li {
    height:30px;
    border:1px solid #FFFCD8;
    padding-top:6px;
    padding-left:5px;
    /*background:url('../imatges/fletxeta.png') no-repeat;*/
    background-position:right center;
}
#menuR nav ul li a {
    text-decoration:none;
    color:#FFFCD8;
    font:bold 1em Helvetica, Arial;
}
@media screen and (min-width:700px) {
    #menuR, #menuR.open {
        display:none;
    }
}

JavaScript

function MenuVisible() {
    document.getElementById("menuR").classList.toggle('open');
}