html side menu

HTML
<! HTML, later CSS, then Javascript>

<!DOCTYPE html>
<html>
<head>
  <script src="YourScript.js"></script>
  <link href="YourCSSDocument.css" rel="stylesheet" type="text/css" media="screen" />
  <style>
  	body {font-family: "Lato", sans-serif;}
		.sidenav {height: 100%;width: 200px;position: fixed;z-index: 1;top: 0;left: 0;background-color: #464850;overflow-x: hidden;padding-top: 20px;}
		.sidenav a {padding: 6px 8px 6px 16px;text-decoration: none;font-size: 25px;color: #818181;display: block;}
		.sidenav a:hover {color: #f1f1f1;}
		.main {margin-left: 200px; /* Same as the width of the sidenav */font-size: 20px; /* Increased text to enable scrolling */padding: 0px 10px;}
		@media screen and (max-height: 450px) {
  		.sidenav {padding-top: 15px;}
        .sidenav a {font-size: 18px;}}
  </style>
</head>
  
<body>
	<div class="sidenav">
      <button onclick="Link1()" class="buttonActivMenu"><h3>Link 1</h3></a></button>
  	  <button onclick="Link2()" class="buttonMenuWithUndercategory"><h3>link2</h3></a></button>
	  <button onclick="Link2.1()" class="buttonSecondMenu">link2.1</a></button>
	  <button onclick="Link2.2()" class="buttonLastSecondMenu">link2.2</a></button>
	</div>

	<div class="main">
      Your text and images here
</div>
</body>
</html>

<! Now the CSS part:>

.buttonMenu {
  background-color: #464850;
  border: none;
  border-bottom: 1px solid lightgrey;
  color: lightgrey;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.2s;
  font-family:Arial;
  width: 200px;
  height: 50px;
}
.buttonMenu:hover {
  background-color: grey;
  color: black;
}
.buttonMenuWithUndercategory {
  background-color: #464850;
  border: none;
  border-bottom: 1px dashed lightgrey;
  color: lightgrey;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.2s;
  font-family:Arial;
  width: 200px;
  height: 50px;
}
.buttonMenuWithUndercategory:hover {
  background-color: grey;
  color: black;
}
.buttonSecondMenu {
  background-color: #464850;
  border: none;
  border-bottom: 1px dashed lightgrey;
  color: lightgrey;
  text-align: right;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.2s;
  font-family:Arial;
  width: 200px;
  height: 30px;
}
.buttonSecondMenu:hover {
  background-color: grey;
  color: black;
}
.buttonLastSecondMenu {
  background-color: #464850;
  border: none;
  border-bottom: 2px solid lightgrey;
  color: lightgrey;
  text-align: right;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.2s;
  font-family:Arial;
  width: 200px;
  height: 30px;
}
.buttonLastSecondMenu:hover {
  background-color: grey;
  color: black;
}
.buttonActivMenu {
  background-color: #797c88;
  border: none;
  border-bottom: 1px solid lightgrey;
  color: lightgrey;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition-duration: 0.2s;
  font-family:Arial;
  width: 200px;
  height: 50px;
}

<! Now javascript:>
  

function Link1(){
	window.location.href = "Link1";
}
function Link2(){
	window.location.href = "Link2";
}
function Link2.1(){
	window.location.href = "Link2.1";
}
function Link2.2(){
	window.location.href = "Link2.2";
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 160px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.main {
  margin-left: 160px; /* Same as the width of the sidenav */
  font-size: 28px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>
</head>
<body>

<div class="sidenav">
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#clients">Clients</a>
  <a href="#contact">Contact</a>
</div>

<div class="main">
  <h2>Sidebar</h2>
  <p>This sidebar is of full height (100%) and always shown.</p>
  <p>Scroll down the page to see the result.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
   
</body>
</html>
Source

Also in HTML: