Cara Membuat Menu Horizontal dengan Efek jQuery

Seperti Apa Menu Horizontal dengan Efek jQuery Ini?

Mengingat waktu yang sudah malam gan,saya share langsung kepermasalahannya aja ya.

Yup,membuat menu dengan efek memanjang ke kanan menggunakan jQuery.
Contoh sebelum di eksekusi akan tampil seperti ini:

1


2


3

Nah,untuk contoh fisiknya,sobat lihat aja di SINI

Gimana sob? tertarik,yuk intip cara membuatnya.

Langkah dan Cara Membuat Menu Horisontal dengan jQuery

Pertama,sobat pergilah ke Dashboard lalu pilih Tata Letak (gb1) kemudian pilih tab Edit HTML (gb2) dan jangan lupa contreng checklist 'Expand Widget Templates' (gb3)


(1)


(2)


(3)

Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):

</head>

Setelah sobat ketemukan kode </head> tersebut,tepat diatasnya letakkan script berikut:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;.memanjang&#39;).click(function() {
$(&#39;#menuguegitu&#39;).animate({width:&quot;100%&quot;}, 400);
$(this).hide();$(&#39;.menyusut&#39;).show();
});

$(&#39;.menyusut&#39;).click(function() {
$(&#39;#menuguegitu&#39;).animate({width:&quot;200px&quot;}, 400);
$(this).hide();$(&#39;.memanjang&#39;).show();
});
});
</script>

**Kode berwarna hijau,jika ditemplate sobat sudah tersedia,maka kode tersebut tak perlu dicantumkan kembali.

Kemudian cari lagi kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):

]]></b:skin>

Setelah kode tadi sobat ketemukan,kini tepat diATASnya letakkan barisan kode css berikut:

#menuguegitu {
width:200px;
height:50px;
background:#999999;
}

.membuatbordermelengkungroundedcorner {border: 3px solid #EFF0F1;
padding: 5px;
background: #ffffff;-moz-border-radius:5px;}

.membuatbordermelengkungroundedcorner a {background:none;}
img.float-right {margin: 5px 0px 0 10px;}
img.float-left {margin: 5px 10px 0 0px;
}

Setelah itu simpan template sobat.Untuk langkah terakhir ikuti berikut gan:

Pergilah ke Dashboard lalu pilih Tata Letak (gb1) dan klik Add Gadget (gb5) kemudian pilih HTML/Javascript (gb6),lihat gambar:


(5)


(6)

Setelah itu pilih HTML/Javascript (gb6) dan letakkan kode berikut:

<div id='menuguegitu'><div class='membuatbordermelengkungroundedcorner'>
<center><a style="font-weight: bold; color: rgb(204, 0, 0);" href="http://luar-biasa-gan.blogspot.com/">Home</a><span style="font-weight: bold; color: rgb(204, 0, 0);"> | </span><a style="font-weight: bold; color: rgb(204, 0, 0);" href="http://luar-biasa-gan.blogspot.com/search">Index</a><span style="font-weight: bold; color: rgb(204, 0, 0);"> | </span><a style="font-weight: bold; color: rgb(204, 0, 0);" href="http://luar-biasa-gan.blogspot.com/feeds/posts/default">New!</a> | <a style="font-weight: bold; color: rgb(204, 0, 0);" href="http://luar-biasa-gan.blogspot.com/#">Facebook</a><span style="font-weight: bold; color: rgb(204, 0, 0);"> | </span><a style="font-weight: bold; color: rgb(204, 0, 0);" href="http://luar-biasa-gan.blogspot.com/#">Twitter</a><span style="font-weight: bold; color: rgb(204, 0, 0);"> | </span><a style="font-weight: bold; color: rgb(204, 0, 0);" href="http://luar-biasa-gan.blogspot.com/#">Google+</a></center></div></div>
<br/><br/>
<div id='button-wrapper'>
<button class='memanjang'>Tampilkan Menu Horizontal</button>
<button class='menyusut' style='display:none;'>Kembalikan</button>
</div>

Simpan dan lihat hasilnya