<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.