Make Social Menu with Fixed Position

Serupa tetapi berbeda penampilan. Sebelumnya menyertakan gambar, sekarang dihilangkan. Dulu panjang dibikin full dari ujung mentok, sekarang kita buat di tengah keberadaannya. Update artikel biar variatif five popular browsers theme menu! Membuat menu mirip dengan itu, tetapi seperti yg dibilang pada awal postingan, kita hilangkan gambar and kita ketengahkan posisi.
Nanti kalian bisa memasukan link berbagi pada konten yang telah tersedia. Judul pos saat ini adalah membuat sosial menu :)Seperti itulah pokoknya social menu, serupa kan dengan popular browsers theme menu!

#wrapsos {
width: 55%;
max-width: 800px;
margin: auto
}
.social {
width: 100%;
top: -16px;
position: fixed;
}
.social > div {
text-align: center;
padding-top: 9px;
width: 9%;
float: left;
height: 25px;
position: relative;
}
.social .front {
opacity: 0;
position: absolute;
width: 100%;
height: 29px;
margin-top: -25px;
padding-top: 15px;
background: #f5f5f5;
-moz-transition: opacity 0.3s, margin-top 0.3s;
-webkit-transition: opacity 0.3s, margin-top 0.3s;
-o-transition: opacity 0.3s, margin-top 0.3s;
transition: opacity 0.3s, margin-top 0.3s;
}
.social .back {
width: 100%;
height: 25px;
position: absolute;
top: 0;
}
.social > div:hover .back { margin-top: -25px; }
.social > div:hover .front { opacity: 1; margin-top: 0px;}
.social .google .back { background: #c4302b }
.social .facebook .back { background: #3b5998 }
.social .twitter .back { background: #00a0d1 }
.social .flattr .back { background: #aad450 }
.social .donate .back { background: #fa9b39 }
.social .github .back { background: #34526f }

Planning HTML

<div id="wrapsos">
<div class="social">
<div class="google">
<div class="back"></div>
<div class="front">
TITLE 1
</div>
</div>
<div class="twitter">
<div class="back"></div>
<div class="front">
TITLE 2
</div>
</div>
<div class="facebook">
<div class="back"></div>
<div class="front">
TITLE 3
</div>
</div>
<div class="donate">
<div class="back"></div>
<div class="front">
TITLE 4
</div>
</div>
<div class="flattr">
<div class="back"></div>
<div class="front">
TITLE 5
</div>
</div>
<div class="github">
<div class="back"></div>
<div class="front">
TITLE 6
</div>
</div>
</div>
</div>

Resource & demo www.canvasquery.com
Happy menu \m/