<nav>
  <button></button>
  <div class="bg"></div>
  <ul class="dl-menu">
    <li><a href="/">Ana Sayfa</a></li>
    <li><a href="/posts/" title="Şimdiye kadar yazdığım tüm yazıların listesi">Tüm Yazılar</a></li>
    <li><a href="/css-dersleri" title="CSS Dersleri">CSS Dersleri</a></li>
    <li><a href="/git" title="Git">Git</a></li>
    <li><a href="/kitap" title="Kitap">Kitap</a></li>
    <li><a href="/sass" title="Sass">Sass</a></li>
    <li><a href="/iletisim" title="İletişim">İletişim</a></li>
  </ul>
</nav>

@import url("https://fonts.googleapis.com/css2?family=Viaoda+Libre&display=swap");

:root {
  --primary-color: #1f2029;
  --secondary-color: #2a2b38;
  --text-color: #c4c3ca;
  --form-bg-color: #2a2b38;
  --focus-bg-color: hsl(200deg, 55%, 92%);
  --white: #fff;
}

body {
  font-family: "Lato", sans-serif;
}

button {
  border-radius: 3px;
  background-clip: padding-box;
  display: block;
  width: 48px;
  height: 45px;
  overflow: hidden;
  cursor: pointer;
  background: #424242;
  border: none;
  position: relative;
}

button:after {
  position: absolute;
  top: 10px;
  left: 16%;
  width: 68%;
  height: 5px;
  background: #fff;
  content: '';
  box-shadow: 0 10px 0 #fff,0 20px 0 #fff;
}

nav .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  visibility: hidden;
  opacity: 0;
  transition: .3s;
  background: #000;
}

nav:focus-within .bg {
  visibility: visible;
  opacity: .4;
}

.dl-menu {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(-45px);
  position: absolute;
  width: 100%;
  max-width: 400px;
  max-height: 600px;
  margin: 0;
  overflow-y: auto;
  transform: translateY(10px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.35);
  backface-visibility: hidden;
  padding: 0;
  list-style: none;
  background-color: #424242;
  transition: all .1s linear;
  transform-style: preserve-3d;
  transform: translateX(-100%);
  transition: transform .3s;
  will-change: transform;
  contain: paint;
  margin-top: -45px;
}

.dl-menu a {
  position: relative;
  display: block;
  padding: 15px 20px;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
}

.dl-menu a:hover{
  background-color: #404090;
}

nav:focus-within .dl-menu {
  transform: none;
}