Swanky PureDrop

Çok havalı ve sitenize renk katacak olan bir çalışma. Örneğimizde herhangi bir js  dosyası kullanılmadığı gibi ikonları da küçük boyutta png dosyalarından oluşuyor. Bu sayede sitenize fazladan framework yükleyip ikon desteklemesi için uğraşmayacaksınız.

Stil:

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300);
ul {
  padding: 0;
  margin: 0;
}

li {
  list-style-type: none;
}

input[type='radio'] {
  display: none;
}

label {
  cursor: pointer;
}

::-webkit-scrollbar {
  display: none;
}

body .genel-cerceve {
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

body {
  height: 100vh;
  font-weight: 500;
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 12px;
}
body .genel-cerceve {
  -webkit-perspective: 600px;
          perspective: 600px;
  width: 230px;
  position: absolute;
  margin: 10px auto;
  height: 360px;
}

body .cerceve-dikey {
  width: 225px;
  height: auto;
  overflow: hidden;
  border-radius: 4px;
  background: #2a394f;
}
body .cerceve-dikey label {
  padding: 25px;
  float: left;
  height: 72px;
  border-bottom: 1px solid #293649;
  position: relative;
  width: 100%;
  color: #eff4fa;
  -webkit-transition: text-indent .15s, height .3s;
  transition: text-indent .15s, height .3s;
  box-sizing: border-box;
}
body .cerceve-dikey label img {
  margin-right: 10px;
  position: relative;
  top: 2px;
  width: 16px;
}
body .cerceve-dikey label span {
  position: relative;
  top: -3px;
}
body .cerceve-dikey label:hover {
  background: #212e41;
  border-bottom: 1px solid #2A394F;
  text-indent: 4px;
}
body .cerceve-dikey label:hover .bar {
  width: 100%;
}
body .cerceve-dikey label .bar {
  width: 0px;
  -webkit-transition: width .15s;
  transition: width .15s;
  height: 2px;
  position: absolute;
  display: block;
  background: #355789;
  bottom: 0;
  left: 0;
}
body .cerceve-dikey label .ok-isareti {
  width: 5px;
  height: 5px;
  -webkit-transition: transform 0.8s;
  -webkit-transition: -webkit-transform 0.8s;
  transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  transition: transform 0.8s, -webkit-transform 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  border-top: 2px solid white;
  border-right: 2px solid white;
  float: right;
  position: relative;
  top: 6px;
  right: 2px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
body .acilanPanel {
  position: absolute;
  display: none;
  overflow: hidden;
  left: 0;
  width: 100%;
}
body .acilanPanel li {
  width: 100%;
  opacity: 0;
  left: -100%;
  background: #15a4fa;
  padding: 25px 0px;
  text-indent: 25px;
  box-shadow: 0px 0px #126CA1  inset;
  -webkit-transition: box-shadow .3s,text-indent .3s;
  transition: box-shadow .3s,text-indent .3s;
  position: relative;
}
body .acilanPanel li:hover {
  background: #0c93e4;
  box-shadow: 3px 0px #126CA1  inset;
  -webkit-transition: box-shadow .3s linear,text-indent .3s linear;
  transition: box-shadow .3s linear,text-indent .3s linear;
  text-indent: 31px;
}
body .acilanPanel .clear {
  clear: both;
}

input[type='radio']:checked + label .acilanPanel {
  display: block;
  top: 68px;
  border-bottom: 1px solid #212e41;
}

input[type="radio"]:checked + label > .ok-isareti {
  -webkit-transition: -webkit-transform 0.8s;
  transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  transition: transform 0.8s, -webkit-transform 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  border-top: 2px solid #14a3f9;
  border-right: 2px solid #14a3f9;
}

input[type='radio']:checked + label {
  height: 325px;
  background: #212e41;
  text-indent: 4px;
  -webkit-transition-property: height;
  transition-property: height;
  -webkit-transition-duration: .6s;
          transition-duration: .6s;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

input[type='radio']:checked + label .bar {
  width: 0;
}

input[type='radio']:checked + label li:nth-of-type(1) {
  -webkit-animation: in 0.15s 0.575s forwards;
          animation: in 0.15s 0.575s forwards;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-animation: in 0.15s 0.575s forwards;
  -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='radio']:checked + label li:nth-of-type(2) {
  -webkit-animation: in 0.15s 0.7s forwards;
          animation: in 0.15s 0.7s forwards;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-animation: in 0.15s 0.7s forwards;
  -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='radio']:checked + label li:nth-of-type(3) {
  -webkit-animation: in 0.15s 0.825s forwards;
          animation: in 0.15s 0.825s forwards;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-animation: in 0.15s 0.825s forwards;
  -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
input[type='radio']:checked + label li:nth-of-type(4) {
  -webkit-animation: in 0.15s 0.95s forwards;
          animation: in 0.15s 0.95s forwards;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-animation: in 0.15s 0.95s forwards;
  -moz-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@-webkit-keyframes in {
  from {
    left: -100%;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}

@keyframes in {
  from {
    left: -100%;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}

Html:

<div class='genel-cerceve'>
  <div class='cerceve-dikey'>
    <input id='Baslangic' name='radio' type='radio'>
    <label for='Baslangic'>
      <img src='dosyalar/dash.png'>
      <span>Başlangıç</span>
      <div class='ok-isareti'></div>
      <div class='bar'></div>
      <div class='acilanPanel'>
        <ul>
          <li>Araçlar</li>
          <li>Raporlar</li>
          <li>Analiz</li>
          <li>Etkinlik</li>
        </ul>
      </div>
    </label>
    <input id='Satislar' name='radio' type='radio'>
    <label for='Satislar'>
      <img src='dosyalar/del.png'>
      <span>Satışlar</span>
      <div class='ok-isareti'></div>
      <div class='bar'></div>
      <div class='acilanPanel'>
        <ul>
          <li>Yeni Satışlar</li>
          <li>Eski Satışlar</li>
          <li>Satış Raporları</li>
          <li>Gönderiler</li>
        </ul>
      </div>
    </label>
    <input id='Mesajlar' name='radio' type='radio'>
    <label for='Mesajlar'>
      <img src='dosyalar/mess.png'>
      <span>Mesajlar</span>
      <div class='ok-isareti'></div>
      <div class='bar'></div>
      <div class='acilanPanel'>
        <ul>
          <li>Gelen Kutusu</li>
          <li>Giden Kutusu</li>
          <li>Gönderilenler</li>
          <li>Arşiv</li>
        </ul>
      </div>
    </label>
    <input id='uyeler' name='radio' type='radio'>
    <label for='uyeler'>
      <img src='dosyalar/users.png'>
      <span>Üyeler</span>
      <div class='ok-isareti'></div>
      <div class='bar'></div>
      <div class='acilanPanel'>
        <ul>
          <li>Yeni Üyeler</li>
          <li>Üye Grupları</li>
          <li>İzinler</li>
          <li>Şifreler</li>
        </ul>
      </div>
    </label>
    <input id='ayarlar' name='radio' type='radio'>
    <label for='ayarlar'>
      <img src='dosyalar/set.png'>
      <span>Ayarlar</span>
      <div class='ok-isareti'></div>
      <div class='bar'></div>
      <div class='acilanPanel'>
        <ul>
          <li>Veritabanları</li>
          <li>Tasarım</li>
          <li>Kullanıcı değiştir</li>
          <li>Çıkış yap</li>
        </ul>
      </div>
    </label>
  </div>
</div>