<!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 left</title>
<style>
#leftMenu {
position:fixed;
width:600px; /* for screen */
max-width:80%; /* for mobile */
height:90vh;
left:-700px; top: 5vh;
padding:10px;
border:1px #888 solid; border-radius:10px;
transition:left 1s ease;
}
</style>
<script>
function showhideMenu()
{
menu = document.getElementById("leftMenu");
if (menu.style.left != "5%")
menu.style.left = "5%"
else
menu.style.left = "-700px"
}
</script>
</head>
<body>
<input type="button" value="Menu" onclick="showhideMenu()">
<div id="leftMenu">
<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>