Dynamic-FX Slide-In Menu

Side menu yang saya maksud adalah slide menu yang jika didekatkan mouse akan muncul, seperti yang ada di samping kiri blog saya.

Disini saya menggunakan Dynamic-FX Slide-In Menu versi 6.5
Berikut ini saya akan menjelaskan bagaimana cara membuatnya

Pertama download dahulu scriptnya

Setelah di unzip, terdapat 2 file yaitu ssm.js dan ssmItems.js,
Buka ssmItems.js dengan Notepad (klik kanan>open with>notepad), file ssm.js tidak usah dibuka.

Setelah dibuka akan ada kode seperti ini

<!--

/*
Configure menu styles below
NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors
*/
YOffset=150; // no quotes!!
XOffset=0;
staticYOffset=30; // no quotes!!
slideSpeed=20 // no quotes!!
waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
menuBGColor="black";
menuIsStatic="yes"; //this sets whether menu should stay static on the screen
menuWidth=150; // Must be a multiple of 10! no quotes!!
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#170088";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="15";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="white";
linkOverBGColor="#FFFF99";
linkTarget="_top";
linkAlign="Left";
barBGColor="#444444";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="white";
barVAlign="center";
barWidth=20; // no quotes!!
barText="SIDE MENU"; // <IMG> tag supported. Put exact html for an image to show.

Kode selanjutntya jangan diperhatikan dahulu.

Keterangan :

-Kode warna merah adalah warna header (no 4)

-Kode warna ungu adalah warna yang akan muncul jika didekatkan mouse (no 2)

-Kode warna hijau adalah warna background yang akan muncul di no 1

-Teks warna biru adalah judul yang akan muncul di no 1

Untuk mempermudah mencari kode warna, klik disini

Kita lanjut ke kode berikutnya

///////////////////////////

// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
ssmItems[0]=["Menu"] //create header
ssmItems[1]=["Dynamic Drive", "http://www.dynamicdrive.com", ""]
ssmItems[2]=["What's New", "http://www.dynamicdrive.com/new.htm",""]
ssmItems[3]=["What's Hot", "http://www.dynamicdrive.com/hot.htm", ""]
ssmItems[4]=["Message Forum", "http://www.codingforums.com", "_new"]
ssmItems[5]=["Submit Script", "http://www.dynamicdrive.com/submitscript.htm", ""]
ssmItems[6]=["Link to Us", "http://www.dynamicdrive.com/link.htm", ""]

ssmItems[7]=["FAQ", "http://www.dynamicdrive.com/faqs.htm", "", 1, "no"] //create two column row
ssmItems[8]=["Email", "http://www.dynamicdrive.com/contact.htm", "",1]

ssmItems[9]=["External Links", "", ""] //create header
ssmItems[10]=["JavaScript Kit", "http://www.javascriptkit.com", ""]
ssmItems[11]=["Freewarejava", "http://www.freewarejava.com", ""]
ssmItems[12]=["Coding Forums", "http://www.codingforums.com", ""]

buildMenu();

//-->

Jika kode tersebuat tidak diganti, tampilannya seperti gambar disamping.

Sedangkan kode milik saya seperti ini

///////////////////////////

// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
ssmItems[0]=["Menu"] //create header
ssmItems[1]=["Home", "http://www.orazatachi.co.cc/", ""]
ssmItems[2]=["Kategori", "", ""] //create header
ssmItems[3]=["Tips", "http://www.orazatachi.co.cc/search/label/Tips", ""]
ssmItems[4]=["Pengetahuan Umum", "http://www.orazatachi.co.cc/search/label/Pengetahuan%20Umum",""]
ssmItems[5]=["Gambar Unik", "http://www.orazatachi.co.cc/search/label/Gambar%20Unik",""]


buildMenu();

//-->

Ingat, jika ingin menambah atau mengurangi item yang terdapat di menu hitungannya dari 0 bukan dari 1


Setelah ssmItems.js selesai di edit, save dan upload ssm.js dan ssmItems.js ke situs tempat hosting file (saya menggunakan www.ripway.com)

Lalu, taruh script ini dibawah tag ]]></b:skin>

<style type="text/css">
<!--
A.ssmItems:link {color:black;text-decoration:none;}
A.ssmItems:hover {color:black;text-decoration:none;}
A.ssmItems:active {color:black;text-decoration:none;}
A.ssmItems:visited {color:black;text-decoration:none;}
//-->
</style>

<SCRIPT SRC="URL ssm.js" language="JavaScript1.2">

//Dynamic-FX slide in menu v6.5 (By maXimus, http://maximus.ravecore.com/)
//Updated July 8th, 03' for doctype bug
//For full source, and 100's more DHTML scripts, visit http://www.dynamicdrive.com

</SCRIPT>

<SCRIPT SRC="URL ssmItems.js" language="JavaScript1.2"></SCRIPT>

Jika masih bingung silahkan hubungi saya di akatsukileader96@yahoo.com

Baca juga :