.netbar  {  width: 0;  position: fixed;  z-index: 1;  height: 250px;  top: 0;  left: 0;  background-color: #0d0d0d;  overflow-x: hidden;  transition: 0.5s;  padding-top: 60px;border-radius: 0px;border-top: 4px solid #960018;border-bottom: 4px solid #960018;}.netbar a {  padding: 8px 8px 8px 32px;  text-decoration: none;  font-size: 25px;  color: #ccc;  display: block;  transition: 0.3s;border: 1px solid #222;}.netbar a:hover {  color: #555;}.netbar .closenet {  position: absolute;  top: 0;  right: 25px;  font-size: 36px;color: red;border: 0px solid #222;}.opennet{  font-size: 20px;  cursor: pointer;  background-color: #18191b;  color: #fff;  padding: 10px 15px;  border: none;border-radius: 4px;}.opennet:hover {  background-color:gray; color: #000;}
function openNav() {  document.getElementById("netsidebar").style.width = "250px";}function closeNav() {  document.getElementById("netsidebar").style.width = "0";}

Author: Chris Bax

Public: www.netbax.net