0 Buat Menu Navigation Efek Tooltip & Popup Bubble !

Sekarang kita akan membuat menu navigasi dengan efek Tooltip & Popup Bubble !. yang tetap menggunakan framework jQuery. Menu ini mempunyai efek yang sangat halus, saat kita mengarahkan pointer mouse (mouse hover) pada menu, maka menu akan mengeluarkan toltip/popup bubble secara perlahan.baiklah kita ktp aja, tapi sebelum itu anda dapat melihat Demo Navigation Tooltip tersebut.

DEMO

Giman?? keren ngga tuh..hehe OK!
Jika anda tertarik untuk memasangnya, langsung saja ikuti langkah berikut :

1. Login ke Blogger

2. Masuk ke "Tata Letak - Edit HTML"

3. Klik "Expand Template Widget"

4. Lalu cari kode ]]></b:skin>

5. Masukan (copypaste) kode CSS dibawah ini diatas kode  ]]></b:skin>

ul.sidenav {
    float: left;
    margin: 0;
    padding: 0;
    width: 200px;
    list-style: none;
    border-bottom: 1px solid #3373a9; /*--Bevel Effect--*/
    border-top: 1px solid #003867; /*--Bevel Effect--*/
    font-size: 1.2em;
}
ul.sidenav li {
    position: relative; /*--Add a relative positioning--*/
    float: left;
    margin: 0;
    padding: 0;
}
ul.sidenav li a{
    border-top: 1px solid #3373a9; /*--Bevel Effect--*/
    border-bottom: 1px solid #003867; /*--Bevel Effect--*/
    padding: 10px 10px 10px 25px;
    display: block;
    color: #fff;
    text-decoration: none;
    width: 165px;
    background: #005094 url(sidenav_li_a.gif) no-repeat 5px 10px;
    position: relative; /*--Add a relative positioning--*/
    z-index: 2; /*--z-index allows the popup to tuck underneath the nav--*/
}
ul.sidenav li a:hover {
    background-color: #004c8d;
    border-top: 1px solid #1a4c76;
}
ul.sidenav li div {
    display: none;
    position: absolute;
    top: 2px;
    left: 0;
    width: 225px;
    font-size: 0.9em;
    background: url(bubble_top.gif) no-repeat right top;
}
ul.sidenav li div p {
    margin: 7px 0;
    line-height: 1.6em;
    padding: 0 5px 10px 30px;
    background: url(bubble_btm.gif) no-repeat right bottom;
}

6. Selanjutnya copy paste lagi code script dibawah ini, tepat dibawah code ]]></b:skin>

<script type='text/javascript'>
$(document).ready(function(){

    $(&quot;ul.sidenav li&quot;).hover(function() {
        $(this).find(&quot;div&quot;).stop()
        .animate({left: &quot;210&quot;, opacity:1}, &quot;fast&quot;)
        .css(&quot;display&quot;,&quot;block&quot;)

    }, function() {
        $(this).find(&quot;div&quot;).stop()
        .animate({left: &quot;0&quot;, opacity: 0}, &quot;fast&quot;)
    });

});
</script>

7. Lalu  save template.

Langkah terakhir tinggal Masukkan code HTML nya :

1. Login Blogger
2. Klik ==>Rancangan =>Elemen Laman
3. Tambah Gadget HTML/Java Script
4. Copas kode berikut :

<ul class="sidenav">
    <li>
       <a href="#">Home</a>
       <div style="left: 0px; opacity: 0; display: block;"><p>Go home!</p></div>
    </li>
    <li>
       <a href="#">About Me</a>
       <div style="left: 0px; opacity: 0; display: block;"><p>Get to know our team!</p></div>
    </li>
    <li>
       <a href="#">Portfolio</a>
       <div style="left: 0px; opacity: 0; display: block;"><p>Wanna see what we are cookin up in the lab? Come check out our featured work!</p></div>
    </li>
    <li>
       <a href="#">Blog</a>
       <div style="left: 0px; opacity: 0; display: block;"><p>Weekly updates, tutorials, and resources.</p></div>
    </li>
    <li>
       <a href="#">Testimonials</a>
       <div style="left: 0px; opacity: 0; display: block;"><p>See what the other clients say about us.</p></div>
    </li>
    <li>
       <a href="#">Contact</a>
       <div style="left: 0px; opacity: 0; display: block;"><p>Hit us up!</p></div>
    </li>
</ul>

5. terakhir Save. lalu lihat hasilnya. gmn??

Keterangan :
Baca keterangan untuk memodifikasi Menu.