Make Stylish Navigation Menu Circles

Buat tutorial menu navigasi lagi ah ;)) Navigation menu yang sekarang akan kita buat dengan kondisi fixed. Jadi kita sebut saja menu fixed :D Karena keberadaan navigasi yg berjejer, maka di kasih bumbu opacity agar terlihat kabur remeng² :P Menu jenis ini gue temukan di css3-magic.brunoscopelliti.com/index.html Bagus apa tidaknya terserah kalian... Karena di kondisikan fixed, maka jika menu terlalu banyak add, akan terlihat deretan lingkaran-lingkaran! Lagi gak emmot mosting >_<'

#nav {
left: 5px;
opacity: .25;
position: fixed;
text-align: center;
}
#nav:hover {
opacity: 1;
}
#nav ul {
padding: 0;
width: 50px;
display: block;
margin: 0 auto;
list-style: none;
overflow: visible;
}
#nav ul li {
padding: 0;
width: 30px;
height: 30px;
display: block;
line-height: 0;
font-size: 15px;
margin: 7px auto;
position: relative;
text-align: center;
background: #36c;
border-radius: 25px;
-webkit-transition: background .3s linear, height .25s ease-out, width .25s ease-out;
-o-transition: background .3s linear, height .25s ease-out, width .25s ease-out;
transition: background .3s linear, height .25s ease-out, width .25s ease-out;
}
#nav ul li:hover {
width: 50px;
height: 50px;
background: #313131;
}
#nav ul li .nav-title {
top: 0;
left: 0;
border: 0;
opacity: 0;
color: #36c;
font-size: 15px;
text-align: left;
position: absolute;
display: inline-block;
padding: 15px 0 14px 10px;
border-bottom: 1px solid #f5f5f5;
-webkit-transition: top .25s linear, left .25s ease-out, opacity .2s ease-out;
-o-transition: top .25s linear, left .25s ease-out, opacity .2s ease-out;
transition: top .25s linear, left .25s ease-out, opacity .2s ease-out;
}
#nav ul li:hover .nav-title {
top: 12px;
left: 45px;
opacity: 1;
overflow: hidden;
white-space: nowrap;
}
#nav a {
color: #FFF;
width: 100%;
height: 100%;
margin: 0;
opacity: 1;
line-height: 0;
padding: 16px 0 0;
display: inline-block;
-webkit-transition: padding-top .25s ease-out;
-o-transition: padding-top .25s ease-out;
transition: padding-top .25s ease-out;
}
#nav a:hover {
padding-top: 25px;
}

Planning HTML

<div id="nav">
<ul>
<li class="itemicon"><a href="#">&#8801;<span class="nav-title">Home</span></a></li>
<li class="item"><a href="#">&#9786;<span class="nav-title">Daftar Isi</span></a></li>
<li class="item"><a href="#">&#9787;<span class="nav-title">Typography</span></a></li>
<li class="item"><a href="#">&#9992;<span class="nav-title">Tiket</span></a></li>
<li class="item"><a href="#">&#9996;<span class="nav-title">Peace</span></a></li>
<li class="item"><a href="#">&#9774;<span class="nav-title">Metal</span></a></li>
<li class="item"><a href="#">&#9997;<span class="nav-title">Buku Tamu</span></a></li>
<li class="item"><a href="#">&#9742;<span class="nav-title">Phone</span></a></li>
<li class="item"><a href="#">&#169;<span class="nav-title">Privasi</span></a></li>
<li class="item"><a href="#">&#9835;<span class="nav-title">Music</span></a></li>
<li class="item"><a href="#">&#9993;<span class="nav-title">Email</span></a></li>
</ul>
</div>

Sebelah kiri menunya, semoga bermanfaat :)
Bonus:
tympanus.net/Tutorials/GoogleNexusWebsiteMenu
Happy blogging \m/