JSFiddle - React, Tailwind, and code Playground

by raviolicode

HTML

<div id ="header-status" data-role="header" data-position="fixed" data-theme="a">
     <img id="menu" src="img/menu.png" /> <h2>Pas.si</h2>
</div>

 <ul id="listamenu" class="classmenua">
     <li> <a href="index.html"> Percorsi </a> </li>
     <li>  <a href="info.html"> Info </a> </li>
     <li> <a href="ARworld.html"> World </a> </li>
 </ul>

<div class="content">
     [....]
</div>
 
<div id="menu">
    <a href="#">Change menu</a>
</div>

CSS

#listamenu{ width:80%;
        height:100%;
        background-color:#0CF;
        margin:0;
        position:absolute;
        padding:0;
}
#listamenu li{ list-style:none;
            padding:10px;
            color:#fff;
}
#listamenu li a{ color:#fff;
            font-weight:normal;
}
#listamenu li:active{ color:#0CF;
            background-color:#fff;
}
.classmenua{ visibility:hidden;
        z-index:-1;
}
.classmenub{ visibility:visible;
       // z-index:1;
}

JavaScript

$('#menu a').click(function() {
   $('#listamenu').toggleClass('classmenub', 'classmenua');
   
   return false;
 });