Membuat Menu Navigasi Melayang Dengan Animasi

Saya sudah pernah menjelaskan tentang cara Membuat Menu Navigasi Melayang sebelumnya. Tapi kali ini kita menggunakan animasi dan tidak perlu bermain HTML karena hanya perlu tambah gadget saja. Untuk lebih mudah perhatikan contoh di bawah ini ....



Ini adalah gabungan dari 2 gadget yang saya pelajari dan modifikasi sendiri. Untuk membuatnya ikuti langkah-langkah di bawah ini :

1. Silahkan kunjungi http://www.flashvortex.com/menus.php
2. Silahkan pilih menu yang anda inginkan dengan cara klik "CLICK HERE TO EDIT THIS" pada menu yang anda inginkan.
3. Ikuti langkah-langkah pembuatan menu, bagi yang tidak mengerti akan saya jelaskan.

• Step 1 tidak begitu penting, lewati saja
• Step 2 kolom pertama, isi dengan judul menu anda (setiap judul pisahkan menggunakan ENTER)
• Masih pada Step 2, di kolom yang kedua isi dengan alamat link judul menu (setiap link pisahkan menggunakan ENTER, urutan di sesuaikan dengan judulnya)
• Lewati Step 3 & 4
• Klik Generate Animation
• Copy code yang ada di kolom "Copy / paste this code into your site"

4. Login ke blog anda > Layout (tata letak) > Page Elements (Laman Elemen) > Add a Gadget (Tambah Gadget) > HTML/JavaScript
5. letakan code berikut di kotak konten (ganti yang berwarna merah dengan code menu anda)

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:right;
cursor:pointer;
background:url('http://i953.photobucket.com/albums/ae17/abi-galoga/Untitled-1-16.jpg') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #000;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<script src="http://h1.flashvortex.com/display.php?id=3_1259075124_65300_151_0_131_137_6_34" type="text/javascript"></script>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.left = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

6. Save dan lihat hasilnya

Selamat mencoba dan jangan lupa tinggalkan komentar