Vertikal Menu UI Awesome

Vertikal Menu UI Awesome - Berbagai konsep ui yang dapat kita aplikasikan dalam design blog, mungkin akan sedikit mempercantik tampilan blog itu sendiri dengan nuansa yang berbeda sesuai gaya flat ui yang sedang berkembang saat ini. Sebagai contoh vertikal Menu Ui Awesome ini yang memakai sedikit balutan warna flat ui yang lebih berani seperti flat menu ui efek flip css3 dan kombinasi menu metro ui dan font awesome serta simple flat ui navigasi menu

• DEMO

Komposisi yang kita gunakan :

CSS

@import url(http://weloveiconfonts.com/api/?family=entypo);
@import url(http://fonts.googleapis.com/css?family=ABeeZee);

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

.nav-list {
  list-style: none;
}

.nav-item {
  position: relative;
  perspective: 1000px;
  margin-bottom: 1px;
}

.nav-item:hover {
  cursor:pointer;
}

.nav-label,
.nav-icon {
  line-height: 3.5rem;
  color: #fff;
}

.nav-label {
  display: inline-block;
  position: absolute;
  left: 3.5rem;
  transform-origin: 0% 50%;
  padding-left: 1rem;
  opacity: 0;
  visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  font-family: ABeeZee;
}

.nav-item:hover .nav-label {
  visibility: visible;
  opacity:1;
  width: 175px;
  animation-name: swing;
  animation-duration: .7s;
  animation-timing-function: ease;
}

.nav-icon {
  display: inline-block;
  padding: 0 ;
  width: 3.5rem;
  text-align: center;
}

.yellow .nav-icon {
  background: #A200FF;
}

.yellow .nav-label {
  background: #9300e8;
}

.sun .nav-icon {
  background: #1BA1E2;
}

.sun .nav-label{
  background: #1a99d7;
}

.blood .nav-icon {
  background: #F09609;
}

.blood .nav-label {
  background: #df8b08;
}

.purple .nav-icon {
  background: #FF0097;
}

.purple .nav-label {
  background: #e70089;
}

.blue .nav-icon {
  background: #339933;
}

.blue .nav-label {
  background: #2c852c;
}

@keyframes swing {

  0% {
    transform: rotateY(-90deg);
  }

  30% {
    transform: rotateY(35deg);
  }

  65% {
    transform: rotateY(-10deg);
  }

  100% {
    transform: rotateY(0deg);
  }
}

HTML

<nav>
  <ul class="nav-list">
    <li class="nav-item yellow">
      <span class="nav-icon entypo-home"></span>
      <span class="nav-label">Home</span>
    </li>
    <li class="nav-item sun">
      <span class="nav-icon entypo-megaphone"></span>
      <span class="nav-label">Announcements</span>
    </li>
    <li class="nav-item blood">
      <span class="nav-icon entypo-docs"></span>
      <span class="nav-label">Documents</span>
    </li>
    <li class="nav-item purple">
      <span class="nav-icon entypo-cog"></span>
      <span class="nav-label">Settings</span>
    </li>
    <li class="nav-item blue">
      <span class="nav-icon entypo-lifebuoy"></span>
      <span class="nav-label">Support</span>
    </li>
  </ul>
</nav>

Silakan bermain main dan berkreasi sesuai selera anda..!!!