◄ Min  Size Fonts: + | - | ± Color: Max ►

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/
Loading...
XMake Social Menu with Fixed Position
Membuat sosial menu simpel dengan posisi fixed di tengah.
Subscribe my posts Register For Free!

4 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE