Lava Lamp Menu Navigation

Lava Lamp Menu Navigation. Bisa dikatakan salah satu Menu Navigasi yang mungkin bisa dikategorikan paling banyak dicari para blogger. Selain terlihat membuat blog menjadi kelihatan menarik, juga tampil dengan elegan. Lava Lamp Menu ini sering digunakan dalam Wordpress, tapi jarang diaplikasikan dalam Blogger. Mungkin karena tutorial ini agak sulit dicari. Tapi jangan khawatir, kali ini saya akan berikan tutorial membuat menu lava lamp. Tutorial ini aku dapatkan dari YUI dan Ganesh waktu blogwalking ke tempat master-master blog :D

Yang paling saya sukai dari navigasi menu ini yaitu animasi dari menu yang apabila kursor kita diarahkan ke menu maka terlihat kotak lava lamp yang mengikuti kursor. Bagaimana cara membuatnya??

Ok, Kita langsung aja membuat tutorialnya.

Login Blogger, terus menuju Layout, Edit HTML
Jangan Lupa centang Expand Widget Template. Cari kode ]]></b:skin>, kemudian copy kode dibawah ini diatas kode tersebut.

/* Generic style for the lava lamp */
/*
.lavaLamp {
    position: relative;
    height: 30px;
    background: url("images/lamp.gif");
    padding: 15px;
    overflow: hidden;
}
    .lavaLamp li {
        float: left;
        list-style: none;
    }
        .lavaLamp li.back {
            background: url("images/lava.gif") no-repeat right -30px;
            width: 9px; height: 30px;
            z-index: 8;
            position: absolute;
        }
            .lavaLamp li.back .left {
               display: block;
                background: url("images/lava.gif") no-repeat top left;
                height: 30px;
                margin-right: 9px;
            }
        .lavaLamp li a {
            position: relative; overflow: hidden;
            text-decoration: none;
            text-transform: uppercase;
            font: bold 14px arial;
            color: #fff; outline: none;
            text-align: center;
            height: 30px; top: 7px;
            z-index: 10; letter-spacing: 0;
            float: left; display: block;
            margin: auto 10px;
        }
*/
#lavalamp .lavaLamp {
    position: relative;
    height: 30px; width: 1024px;
    background: url("images/lamp.gif");
    padding: 15px;
    overflow: hidden;
}
    #lavalamp .lavaLamp li {
        float: left;
        list-style: none;
    }
        #lavalamp .lavaLamp li.back {
            background: url("images/lava.gif") no-repeat right -30px;
            width: 9px; height: 30px;
            z-index: 8;
            position: absolute;
        }
            #lavalamp .lavaLamp li.back .left {
               display: block;
                background: url("images/lava.gif") no-repeat top left;
                height: 30px;
                margin-right: 9px;
            }
        #lavalamp .lavaLamp li a {
            position: relative; overflow: hidden;
            text-decoration: none;
            text-transform: uppercase;
            font: bold 14px arial;
            color: #fff; outline: none;
            text-align: center;
            height: 30px; top: 7px;
            z-index: 10; letter-spacing: 0;
            float: left; display: block;
            margin: auto 10px;
        }




#floatingline .lavaLamp {
    position: relative;
    padding: 10px;
    overflow: hidden;
    background:#eeeeee;
}
    #floatingline .lavaLamp li {
        float: left;
        list-style: none;
    }
        #floatingline .lavaLamp li.back {
            background: #990000;
            height: 2px;
            z-index: 8;
            position: absolute;
           margin:20px 0 0 0;
        }
        #floatingline .lavaLamp li a {
            position: relative; overflow: hidden;
            text-decoration: none;
            color: #333333; outline: none;
            text-align: center;
            z-index: 10; letter-spacing: 0;
            float: left; display: block;
            margin: auto 10px;
        }

Kemudian copy kode dibawah ini persis diatas kode </head>

<script src='http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.6.0/build/animation/animation-min.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.6.0/build/container/container-min.js' type='text/javascript'/>
<script src='http://yui.yahooapis.com/2.6.0/build/menu/menu-min.js' type='text/javascript'/>

<script src='http://www.geocities.com/attintha/Ux.js' type='text/javascript'/>
<script src='http://www.geocities.com/attintha/LavaLamp.js' type='text/javascript'/>

Terakhir anda copy kode dibawah ini diatas kode <div id='content-wrapper'>

<script type="text/javascript">
   YUI.E.onDOMReady((function(){
       var lavalamp = new YUI.Ux.LavaLamp("lavalamp", {
           animFx: YUI.Ea.backOut,
           animSpeed: 1
       });
   }));
</script>

<div id="lavalamp">
    <div class="bd">
        <ul>
            <li><a href="javascript:;">this is item one</a></li>
            <li><a href="javascript:;">two</a></li>
            <li><a href="javascript:;">three</a> </li>
            <li><a href="javascript:;">four</a> </li>
            <li><a href="javascript:;">this is item five</a></li>
        </ul>
    </div>
</div>

Note :

Untuk kode warna pink, ubah dengan alamat image lamp tempat anda menyimpan
Untuk kode warna biru, ubah dengan alamat image lava tempat anda menyimpan
Kode warna hijau menunjukkan panjang dan tinggi menu, anda bisa mengubahnya sesuai template anda