JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="menu">
<p id="menuText">Menu</p>
<div id="othermenu">
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5</li>
<li>menu 6</li>
<li>menu 7</li>
<li>menu 8</li>
</ul>
</div>
</div>
<div id="header">
<h1 id="heading">Hello There!</h1>
</div>
<div id="body">
<p>This is a line on my website.</p>
<p>This is another line on my website.</p>
<p>I want to make a game like Super Mario.</p>
<p>I alo want to make a Brick Breaker game.</p>
<h3>Below is an unfinished American Flag.</h3>
<p>The dimensions of the flag are exact. All the flag needs is some stars.</p>
<canvas id="myCanvas" width="190" height="100" style="border:2px solid black"> </canvas>
<canvas id="circle" width="500" height="250" style="border:2px solid black"> </canvas>
<p id="date"> </p>
</div>
CSS
body {
background-color:white;
}
#header {
width:1024px;
height:100px;
margin-top:-25px;
border:2px solid black;
border-radius:20px;
background-color:lightblue;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
}
#menu {
position:absolute;
height:auto;
width:200px;
background-color:blue;
border:2px solid black;
border-radius:15px;
margin-left:850px;
margin-top:-0px;
text-align:center;
z-index:100;
}
#othermenu{
display:none;
border-radius:15px;
background:blue;
width:100%;
border:0px solid black;
}
#menuText {
padding-top:5px;
font-family:Verdana;
font-size:30px;
font-weight:bold;
color:#fffff;
margin:5px;
}
#heading {
font-family:Verdana;
text-align:center;
margin-top:35px;
}
#myCanvas {
background-color:white;
}
canvas {
display:block;
margin:2px;
}
#body {
height:768px;
width:1024px;
margin-left:auto;
margin-right:auto;
border: 2px solid black;
border-radius:20px;
background-color:lightblu
JavaScript
$(document).ready(function(){
$("#menuText").click(function(){
$("#othermenu").slideToggle('slow');
});
});