Minimalist Responsive Side 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;
}
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="menu">
        <div>
          <ul>
            <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="#">Setting</a></li>
          </ul>
        </div>
      </div>
    </div>
    
    <main>
    <h1>Side Menu Overlay Navigation</h1>
    <p>A minimal 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 */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
:root {
  --menu-speed: 0.75s;
}
.menu-wrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  background: #405a83;
  height: 60px;
  font-family: arial,sans-serif;
}
.menu-wrap .toggler {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  height: 50px;
  width: 50px;
  cursor: pointer;
  z-index: 2;
}
.menu-wrap .nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 60px;
  width: 60px;
  background: transparent;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* Navigation line */.menu-wrap .nav > div {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fafafa;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.4s;
}

/* Navigation top & bottom line */.menu-wrap .nav > div:before,
.menu-wrap .nav > div:after {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  background: inherit;
  height: 2px;
  width: 100%;
  z-index: 1;
}
.menu-wrap .nav > div:after {
  top: -10px;
}

/* Toggler Animate */.menu-wrap .toggler:checked + .nav > div {
  transform: rotate(135deg);
}
.menu-wrap .toggler:checked + .nav > div:before,
.menu-wrap .toggler:checked + .nav > div:after {
  top: 0;
  transform: rotate(90deg);
}

/* Rotate on hover when checked */.menu-wrap .toggler:checked:hover + .nav > div {
  transform: rotate(225deg);
}
.menu {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(44, 42, 42, 0.8);
  height: 100vh;
  width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transition: all var(--menu-speed) ease;
}
.menu > div {
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  flex: none;
  display: flex;
  text-align: left;
  opacity: 0;
  transition: opacity 0.4s ease-in;
  padding: 70px 0 0 30px;
}
.menu ul {
  list-style: none;
}
.menu li {
  padding: .8rem 0;
}
.menu > div a {
  text-decoration: none;
  color: #fafafa;
  font-size: 1.3rem;
  opacity: 0;
  transition: opacity 1s ease-in;
}
.menu a:hover {
  color: #3fddd5;
  transition: color 0.3s ease-in;
}

/* Show Menu */.menu-wrap .toggler:checked ~ .menu {
  opacity: 1;
  width: 30%;
  transition: all var(--menu-speed) ease;
}
.menu-wrap .toggler:checked ~ .menu > div {
  opacity: 1;
  transition: opacity 0.4s ease-in;
}
.menu-wrap .toggler:checked ~ .menu > div a {
  opacity: 1;
  transition: opacity 1s ease-in;
}

@media (max-width: 800px) {
  .menu-wrap .toggler:checked ~ .menu {
    width: 80%;
  }
}

This is a Minimalist Side Menu with Pure CSS, complete preview with syntax highlighting of html, css source code.