Menu Windows Metro UI Gambar diatas adalah demo dari menu navigasi sebelum dan sesudah dihover/sentuh, Untuk "Live Demo"nya bisa a...
Menu Windows Metro UI
Tambahkan kode Dibawah Ini, tepat diatasnya ]]></b:skin>
- Cari Kode ]]></b:skin>
.menu {text-shadow:none;position: fixed;height: 100%;width: 65px;background: #2c3e50;transition:width 1s;overflow: hidden;font-family: 'Offside', sans-serif;z-index: 99;left:0;top:0}
.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 {color:#fff;position: relative;padding: 20px;transition:border .5s, background .2s;}
.menuItem a {color:#fff;}
.menuItem:hover {background: #34495e;cursor: pointer;}
.satu {border-left:5px solid #16a085;}
.satu:hover{border-left:20px solid #16a085;}
.dua {border-left:5px solid #2980b9;}
.dua:hover {border-left:20px solid #2980b9;}
.tiga {border-left:5px solid #8e44ad;}
.tiga:hover {border-left:20px solid #8e44ad;}
.empat {border-left:5px solid #e67e22;}
.empat:hover {border-left:20px solid #e67e22;}
.lima {border-left:5px solid #e74c3c;}
.lima:hover {border-left:20px solid #e74c3c;}
Dan tambahkan kode Dibawah Ini, tepat diatasnya </body>
- Selanjutnya Cari kode </body>
<div class="menu">
<div class="menuItem satu">1<span><a href="#">Beranda</a></span></div>
<div class="menuItem dua">2<span><a href="#>Menu 2</a></span></div>
<div class="menuItem tiga">3<span><a href="#">Menu 3</a></span></div>
<div class="menuItem empat">4<span><a href="#">Menu 4</a></span></div>
<div class="menuItem lima">5<span><a href="#">Menu 5</a></span></div>
</div>
Klik Pratinjau terlebih dahulu sebelum disimpan/save, Jika tidak terdapat error klik save/simpan.
Tutor lengkapnya : http://jsfiddle.net/PalmaHutabarat92/rWKQj/3/
