Stylish Sidebar Menu (Pure CSS)

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  
<style>
body {
  font-family: arial;
  font-size:18px;
  background: #2d6565;
  padding: 0;
  margin: 0;
}
main {
  margin: 150px auto;
  max-width: 800px;
  padding: 2rem;
  background-color: #fafafa;
  border-radius: 3px;
  text-align: center;
}
h1 {
  margin: 0 0 30px;
}
@media (max-width: 800px) {
  body {
    font-size:15px;
  }
  main {
    max-width: 500px;
  }
}
</style>

</head>
<body>

<div class="headermenu"></div>
  <input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
  <label for="openSidebarMenu" class="sidebarIconToggle">
    <div class="spinner diagonal part-1"></div>
    <div class="spinner horizontal"></div>
    <div class="spinner diagonal part-2"></div>
  </label>
  <div id="sidebarMenu">
    <ul class="sidebarMenuInner">
      <li><a href="#">Home</a></li>
      <li><a href="#">Categories</a></li>
      <li><a href="#">Tag</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
    
    <main>
    <h1>Stylish Sidebar Menu</h1>
    <p>A Stylish and responsive with Pure CSS sidebar menu that slides out from the left side of the screen and covers part of your main content when you click the Menu button.</p>
    </main>

</body>
</html>

/* CSS Source Code */
.headermenu {
    display: block;
    margin: 0;
    width: 100%;
    max-width: 100%;
    box-shadow: none;
    background-color: #BD2CAD;
    height: 60px!important;
    overflow: hidden;
    z-index: 10;
}
#sidebarMenu {
    height: 100%;
    position: fixed;
    left: 0;
    width: 270px;
    margin: 0;
    transform: translateX(-270px);
    transition: transform 270ms ease-in-out;
    background: linear-gradient(180deg, #D02BAE 0%, #3F5EFB 100%);
}
.sidebarMenuInner{
    margin:0;
    padding:0;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li{
    list-style: none;
    font-size: 17px;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    padding: 14px 0 14px 24px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span{
    display: block;
    color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
    transform: translateX(0);
}
input[type=checkbox] {
    transition: all 0.3s;
    box-sizing: border-box;
    display: none;
}
.sidebarIconToggle {
    transition: all 0.3s;
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
    z-index: 99;
    height: 100%;
    width: 100%;
    top: 22px;
    left: 20px;
    height: 22px;
    width: 22px;
}
.spinner {
    transition: all 0.3s;
    box-sizing: border-box;
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: #fff;
}
.horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
}
.diagonal.part-1 {
    position: relative;
    transition: all 0.3s;
    box-sizing: border-box;
    float: left;
}
.diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(135deg);
    margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(-135deg);
    margin-top: -9px;
}

This is A Stylish Sidebar Menu with Pure CSS, complete preview with syntax highlighting of html, css source code.