JSFiddle - React, Tailwind, and code Playground
HTML
<header>
<button class="hamburger">☰</button>
<button class="cross">˟</button>
</header>
<div class="mobilemenu">
<ul>
<a href="#" class="clickham"><li>Test</li></a>
<a href="#" class="clickham"><li>Test2</li></a>
</ul>
</div>
CSS
header{
width:100%;
background:#fff;
height:60px;
line-height:60px;
border-bottom:1px solid #dddddd;
display:block;
z-index:99999;
}
.hamburger{
background:none;
position:absolute;
top:0;
right:0;
line-height:45px;
padding:5px 15px 0px 15px;
color:#000;
border:0;
font-size:1.4em;
font-weight:bold;
cursor:pointer;
outline:none;
z-index:10000000000000;
}
.cross{
background:none;
position:absolute;
top:0px;
right:0;
padding:7px 15px 0px 15px;
color:#000;
border:0;
font-size:3em;
line-height:65px;
font-weight:bold;
cursor:pointer;
outline:none;
z-index:10000000000000;
}
.mobilemenu{z-index:1000000; font-weight:bold; font-size:0.8em; width:100%; background:#f1f1f1; position:fixed; text-align:left; font-size:12px;display:none;top:60px;}
.mobilemenu ul {margin: 0; padding: 0; list-style-type: none; list-style-image: none;}
.mobilemenu li {display: block; padding:8px 0 8px 10px; border-bottom:#dddddd 1px solid;}
.mobilemenu li:hover{ background:#ffffff; }
.mobilemenu ul li a { text-decoration:none; margin: 0px; color:#666;}
.mobilemenu ul li a:hover { color: #666; text-decoration:none;}
.mobilemenu a{text-decoration:none; color:#666;}
.mobilemenu a:hover{text-decoration:none; color:#666;}
JavaScript
$( ".cross" ).hide();
$( ".mobilemenu" ).hide();
$( ".hamburger" ).click(function() {
$( ".mobilemenu" ).slideToggle( "slow", function() {
$( ".hamburger" ).hide();
$( ".cross" ).show();
});
});
$( ".cross" ).click(function() {
$( ".mobilemenu" ).slideToggle( "slow", function() {
$( ".cross" ).hide();
$( ".hamburger" ).show();
});
});
$( ".clickham" ).click(function() {
$( ".mobilemenu" ).slideToggle( "slow", function() {
$( ".cross" ).hide();
$( ".hamburger" ).show();
});
});