Menu Animasi Hover Sliding

Menu Animasi Hover Sliding - Untuk mengisi kekosongan update posting di blog ini yang hampir sebulan lebih ga ada aktivitas blogging karena terbatasnya waktu yang saya miliki. Kali ini saya mencoba menghadirkan menu hover sederhana atraktif dengan menggunakan efek transisi css3 untuk membuat hover sliding agar menu terlihat bergerak saat di sentuh cursor. Pada dasarnya menu ini hanyalah menggunakan rasio lebar widget pada hover dari 65 px ke 220 px seperti Simple Menu Drop Down Hover Animasi dan Flat Ui Menu Animasi CSS3

DEMO

CSS

@import url(http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css);
.menu {
  position: fixed;
  height: auto;
  width: 65px;
  background: #2c3e50;
  color:#fff;
  transition:width 1s;
  overflow: hidden;
  font-family: 'Michroma', sans-serif;
  z-index: 99;
}

.menu:hover {
  width: 220px;
}

.menuItem span {
  position: absolute;
  left:80px;
  top:20px;
  transition:color 1s;
  color:rgba(255,255,255,0);
}

.menu:hover .menuItem  span {
 color:rgba(255,255,255,1);
}

.menuItem {
  position: relative;
  padding: 20px;
  transition:border .5s, background .2s;
}

.menuItem:hover {
  background: #34495e;
  cursor: pointer;
}

.satu {
  border-left:5px solid #16a085;border-bottom:2px solid #16a085;
}

.satu:hover{
  border-left:20px solid #16a085;
}

.dua {
 border-left:5px solid #2980b9; border-bottom:2px solid #2980b9;
}

.dua:hover {
 border-left:20px solid #2980b9;
}

.tiga {
  border-left:5px solid #8e44ad; border-bottom:2px solid #8e44ad;
}

.tiga:hover {
  border-left:20px solid #8e44ad;
}

.empat {
  border-left:5px solid #e67e22;border-bottom:2px solid #e67e22;
}

.empat:hover {
  border-left:20px solid #e67e22;
}

.lima {
 border-left:5px solid #e74c3c;border-bottom:2px solid #e74c3c;
}

.lima:hover {
 border-left:20px solid #e74c3c;
}

HTML

<div class="menu">
  <div class="menuItem satu"><i class="fa fa-cogs"></i><span>Satu</span></div>
  <div class="menuItem dua"><i class="fa fa-bars"></i><span>Dua</span></div>
  <div class="menuItem tiga"><i class="fa fa-envelope-o"></i><span>Tiga</span></div>
  <div class="menuItem empat"><i class="fa fa-paper-plane-o"></i><span>Empat</span></div>
  <div class="menuItem lima"><i class="fa fa-search"></i><span>Lima</span></div>
</div>

Untuk konsep diatas hanyalah sederhananya, so untuk pengembangan silakan anda kresaikan sendiri dan semoga bermanfaat. Happy Blogging