Cara Menu Navigasi Melayang

Written by RA_Syihan on Friday, October 01, 2010 | Category: Networking, Trick, Tutorial

Setelah banyak mencari Menu Navigasi yang unik ,akhirnya saya menemukan Menu yang cantik dan simple .Biasanya Navigasi itu berupa header saja ,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

Terima kasih ,dan jangan lupa tinggalkan komentar .