Slide Menu

HTML

<div class="container">

<button id="open" onclick="myfunction()">&#9776;</button>

       <summary>lorem500</summary>

<div id="menu">

<p>Home</p>

<p>Service</p>

<p>Contacts</p>

<p>Works</p>

<p>About</p>

</div>

<button id="close" onclick="functionclose()">&#x2715;</button>

</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:

wght@100&family=Poppins:wght@100&display=swap');

*{

box-sizing: border-box;

margin: 0;

padding: 0;

}

#menu{

position: absolute;

top: 0%;

right: 0%;

width: 0%;

height: 100vh;

overflow-x: hidden;

background-color: #0a0a0a;

font-family: 'JetBrains Mono', monospace;

font-family: 'Poppins', sans-serif;

transition: 0.5s;

}

p{

font-size: 28px;

color: #fff;

cursor: pointer;

margin: 5px;

transition: 0.1s ease-out;

width: 100px;

position: relative;

top: 30%;

left: 50%;

transform: translate(-50%, -50%);

}

p:hover{

border-bottom: 2px solid coral;

}

#close{

width: 40px;

height: 40px;

cursor: pointer;

font-size: 25px;

background: none;

color: #fff;

position: absolute;

top: 0%;

left: 95%;

margin: 10px;

border: none;

display: none;

}

summary{

margin: 30px;

font-size: 18px;

font-family: 'JetBrains Mono', monospace;

}

#open{

width: 40px;

height: 40px;

cursor: pointer;

font-size: 25px;

margin-left: 95%;

border: none;

}

JS

<script>

function myfunction(){

document.getElementById("menu").style.width = "100%";

document.getElementById("close").style.display = "block";

}

function functionclose(){

document.getElementById("menu").style.width = "0%";

document.getElementById("close").style.display = "none";

}

</script>