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 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 {display:none !important;}
}

JavaScript

function MenuVisible() {
    var menu = document.getElementById("menuR");
    if (menu.style.display == "block") 
        menu.style.display = "none";
    else 
        menu.style.display = "block"; 
}