Sola Sabit Sağa Açılır Menü (Metro)

anamenu.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<ul class="anamenu">
  <li>
    <a href="#">
      <i class="fa fa-info-circle"></i>
      <span>Bilgi</span>
    </a>
    <ul>
      <li>
        <a href="https://www.premium-turk.net" target="_blank">
          <i class="fa fa-folder-open"></i>
          <span>Dosyalar</span>
        </a>
      </li>
      <li>
        <a href="#" target="_blank">
          <i class="fa fa-question-circle"></i>
          <span>Hakkımızda</span>
        </a>
      </li>
      <li>
        <a href="https://ticket.premium-turk.net" target="_blank" rel="external noopener noreferrer">
          <i class="fa fa-phone-square"></i>
          <span>İletişim</span>
        </a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">
      <i class="fa fa-folder"></i>
      <span>Veriler</span>
    </a>
    <ul>
      <li>
        <a href="#" target="_blank">
          <i class="fa fa-flash"></i>
          <span>Yüksek Hız</span>
        </a>
      </li>
      <li>
        <a href="#" target="_blank">
          <i class="fa fa-ellipsis-h"></i>
          <span>Minimum Boyut</span>
        </a>
      </li>
      <li>
        <a href="#" target="_blank">
          <i class="fa fa-dot-circle-o"></i>
          <span>Oto Lokasyon</span>
        </a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">
      <i class="fa fa-share-alt"></i>
      <span>Sosyal Ağlar</span>
    </a>
    <ul>
      <li>
        <a href="https://plus.google.com/u/1/116870225311549824385" target="_blank" rel="external noopener noreferrer">
          <i class="fa fa-google-plus"></i>
          <span>Google(+)</span>
        </a>
      </li>
      <li>
        <a href="https://twitter.com/PremiumTurk" target="_blank" rel="external noopener noreferrer">
          <i class="fa fa-twitter"></i>
          <span>Twitter</span>
        </a>
      </li>
      <li>
        <a href="https://facebook.com/PremiumturkOffical" target="_blank" rel="external noopener noreferrer">
          <i class="fa fa-facebook-official"></i>
          <span>Facebook</span>
        </a>
      </li>
      <li>
        <a href="https://www.premium-turk.net" target="_blank">
          <i class="fa fa-globe"></i>
          <span>Sayfa</span>
        </a>
      </li>
    </ul>
  </li>
</ul>
<style class='pt-pen-css'>
/*************************
* Yapımcı: Cesur
* Yapım Tarihi: 2017-07-08 16:08:21
* Link: https://www.premium-turk.net/86-sola-sabit-saga-acilir-menu-tasarimi-metro.html
* Lisans: PremiumTurk Licanced
* Kopyalanan adresi paylaşmamak emek hırsızlığı ve yasal bir suçtur !
**************************/
body, ul {
  margin: 0;
  padding: 0;
}
body {
  background: #f93e59;
}
.anamenu {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  height: 100%;
  padding: .4em 0;
  background: #ff485b;
  color: white;
  text-align: center;
  font-size: 0;
}
.anamenu li {
  pointer-events: none;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  list-style: none;
  line-height: 100%;
  transform: translateZ(0);
}
.anamenu a {
  pointer-events: auto;
  position: relative;
  display: block;
  min-width: 5em;
  margin-bottom: .4em;
  padding: .4em;
  line-height: 100%;
  font-size: 16px;
  text-decoration: none;
  color: white;
  transition: background 0.3s;
}
.anamenu a:active, .anamenu a:focus {
  background: #e83043;
}
.anamenu i {
  display: block;
  margin-bottom: .2em;
  font-size: 2em;
}
.anamenu span {
  font-size: .625em;
  font-family: sans-serif;
  text-transform: uppercase;
}
.anamenu li:hover ul {
  transform: translateX(0);
  background: #e83043;
}
.anamenu > li {
  display: block;
}
.anamenu > li > a {
  background: #ff485b;
}
.anamenu > li:hover {
  z-index: 100;
}
.anamenu > li:hover a {
  background: #e83043;
}
.anamenu > li a:hover {
  background: #F56356;
}
.anamenu > li > a:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 4px;
  opacity: 0;
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.65)), color-stop(100%, transparent));
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
  background: -o-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
  background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
  background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 );
  transition: opacity 0.5s;
}
.anamenu > li:hover a:after {
  opacity: 1;
}
.anamenu > li ul {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 100%;
  height: 100%;
  width: auto;
  white-space: nowrap;
  transform: translateX(-100%);
  background: #B44659;
  transition: 0.5s transform;
}
@keyframes circle {
  50% {
    transform: scale(1.26923);
  }
}
@keyframes initials {
  50% {
    transform: translateY(-8px) translateZ(0);
  }
}
.ild-ident {
  position: absolute;
  right: 20px;
  bottom: 20px;
}
.ild-ident svg {
  overflow: visible;
  transform: translateZ(0);
}
.ild-ident svg .circle-holder {
  transform: translate(-7px, -7px);
}
.ild-ident svg .circle {
  transform: translate(7px, 7px);
  fill: #ff485b;
}
.ild-ident svg.active .i {
  animation: initials .4s ease-in-out;
}
.ild-ident svg.active .l {
  animation: initials .4s .2s ease-in-out;
}
.ild-ident svg.active .circle {
  animation: circle .5s .1s ease-in-out;
}
</style>