Membuat Navigasi Menu Ala Google Plus

Apa hendak di kata mau tak gelem tema kali ini akan berbicara tentang tema menu lagi. Sebelumnya gue sudah berbagi tutorial membuat lists toc menu! Sekarang berbagi cara membuat menu ala google plus punya :-B Bagi kalian yang sering bermain jejaring web google+, pasti tidak akan asing dengan keberadaan menu navigasi sebelah kiri, yg akan muncul setiap kali kita sorot!Tidak mirip 100% dengan apa yg tampak pada screenshot :"> Gaya, teknik and hasil jadi bisa dikatakan serupa ;)) Main menu diposisikan diam di kanan pojok dengan tinggi height: 4em; Perlu digarisbawahi, menu ini menggunakan trick CSS content

• www.w3schools.com/cssref/pr_gen_content.asp
• developer.mozilla.org/en-US/docs/Web/CSS/content
• www.w3.org/TR/CSS21/generate.html#content
• dev.opera.com/articles/view/css-generated-content-techniques/

#main-navigation {
top: 0px;
left: 0px;
height: 4em;
position: fixed;
max-width: 130px;
overflow: hidden;
background-color: #4b67a1;
-webkit-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
#main-navigation:hover {
height: 100%;
max-width: 200px;
-webkit-box-shadow: 5px 0 10px #999;
box-shadow: 5px 0 10px #999;
}
#main-navigation ul {
padding: 0px;
list-style: none;
}
#main-navigation ul li {
white-space: nowrap;
}
#main-navigation ul li a {
color: #ddd;
width: 100%;
height: 50px;
line-height: 50px;
padding-right: 10px;
display: inline-block;
text-decoration: none;
font: 25px "Times New Roman", Times, serif;
}
#main-navigation ul li a:before {
color: #eee;
width: 55px;
font-size: 30px;
text-align: center;
display: inline-block;
-webkit-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
#main-navigation ul li a:hover {
color: #fff;
background-color: #3b5998;
}
#main-navigation ul li a:hover:before {
color: #f03d25;
}
.entypo-home:before {
content: "\2630";
}
.entypo-1:before {
content: "\2620";
}
.entypo-2:before {
content: "\2117";
}
.entypo-3:before {
content: "\2603";
}
.entypo-4:before {
content: "\263c";
}
.entypo-5:before {
content: "\270c";
}
.entypo-6:before {
content: "\272f";
}
.entypo-mail:before {
content: "\2709";
}

Planning HTML

<div id='main-navigation'>
<ul>
<li><a class='entypo-home' href='#'>Home</a></li>
<li><a class='entypo-1' href='#'>Title 1</a></li>
<li><a class='entypo-2' href='#'>Title 2</a></li>
<li><a class='entypo-3' href='#'>Title 3</a></li>
<li><a class='entypo-4' href='#'>Title 4</a></li>
<li><a class='entypo-5' href='#'>Title 5</a></li>
<li><a class='entypo-6' href='#'>Title 6</a></li>
<li><a class='entypo-mail' href='#'>Title 7</a></li>
</ul>
</div>

Source coded by: codepen.io/joshumax/full/asIfy

Semoga bermanfaat :)
Bonus:
cssdeck.com/labs/full/skyrim-inspired-drop-down-menu - cssdeck.com/labs/full/dropdown-menu - cdpn.io/HdJtv
Happy coding \m/