membuat menu Bubbles dengan CSS3

Assalamualaikum Wr. Wb.

Hai, Sobat Blogger. Akhirnya saya selesai juga USnya tinggal UN ni,, Hari ni saya akan mengasih anda sedikit Ilmu yang saya dapatkan dari bang JOHANES. Yaitu tentang membuat menu Bubbles dengan CSS3. Oke sobat, langsung aja saya mulai :

(Demonya gan kalau masih ada yang belum mengerti)



Rancangan =>Edit HTML =>lalu letakan css'a di template sobat di atas kode ]]></b:skin>

.bubbles {
margin: 100px 0 0;
padding: 0;
list-style: none;
}
.bubbles li {
padding: 0;
margin: 0 2px;
float: left;
position: relative;
text-align: center;
}
.bubbles a {
padding: 15px 10px;
display: block;
color: #000000;
width: 140px;
text-decoration: none;
font-weight: bold;
background: -moz-linear-gradient(top, #e0f3fa 0%, #d8f0fc 50%, #b8e2f6 51%, #b6dffd 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0f3fa), color-stop(50%,#d8f0fc), color-stop(51%,#b8e2f6), color-stop(100%,#b6dffd));
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
opacity:0.9;
-webkit-transition: all 0.6s ease-in-out;
}
.bubbles a:hover {opacity:1;}
.bubbles li em {
font-weight: normal;
background: -moz-linear-gradient(top, #feffe8 0%, #d6dbbf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffe8), color-stop(100%,#d6dbbf));
width: 130px;
height: 25px;
position: absolute;
top: -85px;
left: 3px;
text-align: center;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}
.bubbles li em:after {
content:"";
display:block;
position:absolute;
bottom:-20px;
left:50px;
width:0;
height:0;
border-width:20px 0 0 20px;
border-style:solid;
border-color:#d6dbbf transparent;
}

catatan:
-warna gradient tombol bisa sobat ganti pada css tag ".bubbles a"
-untuk mengganti warna bubble,ganti warna gradient pada css tag ".bubbles li em" dan border-color:#d6dbbf pada css tag ".bubbles li em:after"

di bawah kode ]]></b:skin>

<script src="https://sites.google.com/site/djogzs/js/jquery.js" type="text/javascript">
</script>
<script type="text/javascript">

$(document).ready(function(){

$(".bubbles a").append("<em></em>");

$(".bubbles a").hover(function() {
$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText);
}, function() {
$(this).find("em").animate({opacity: "hide", top: "-15"}, "slow");
});


});
</script>

Rancangan=>Elemen Laman=>tambah gadget=>HTML/JavaScript lalu letakan kode html'a ,lalu disimpan.

<li>
<a href="#" title="Home sweet home">Home</a>
</li>
<li>
<a href="#" title="siapa aku?">About</a>
</li>
<li>
<a href="#" title="Johanes">Contact</a>
</li>
</ul>

Selesai dah..

Terima kasih atas Ilmunya (Johanes)

Wassalam

Related Post