<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>menu from right</title>
<style>
#rightMenu {
position:fixed;
width:600px; /* for screen */
max-width:80%; /* for mobile */
height:90vh;
right:-700px; top: 5vh;
padding:10px;
border:1px #888 solid; border-radius:10px;
transition:right 1s ease;
text-align:right;
}
</style>
<script>
function showhideMenu()
{
menu = document.getElementById("rightMenu");
if (menu.style.right != "5%")
menu.style.right = "5%"
else
menu.style.right = "-700px"
}
</script>
</head>
<body>
<input type="button" value="Menu" onclick="showhideMenu()">
<div id="rightMenu">
<p>Item menu 1</p>
<p>Item menu 2</p>
<p>Item menu 3</p>
<p>Item menu 4</p>
<p>Item menu 5</p>
</div>
</body>
</html>