Slide Menu Dengan Dynamic Slide-In Menu

Seperti pada gambar di atas, menu tersebut jika di dekatkan akan keluar dari samping.

Untuk memembuat menu tersebut silakan ikuti langkah berikut :

1. Download duli scriptnya disini

2. Setelah di download extrak file tersebut.

3. Terdapat 2 file javascript (.js) yaitu ssm.js dan ssmitems.js

4. Edit file ssmitems.js dengan notepad

5. Setelah dibuka akan ada kode esperti di bawah 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.

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

// 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();

//-->

6. Setelah file ssmitems.js sudah di edit dan disave, uploadlah file tersebut.

7. Masuk ke akun blog sobat.

8. Edit haml.

9. Cari kode ]]></b:skin>

10. Taruhlah kode ini di bawah kode no.9

<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>

11. Editlah kode yang berwarna biru

12. untuk url ssm.js dan ssmitems.js bisa diganti dengan url file javascript yang sudah sobat upload tadi

13. save dan lihat hasilnya

Selamat mencoba kawan ~_~"

Sumber sahabat : http://syamsmobillex.blogspot.com

Salam senyum dariku untuk semuanya, tetaplah untuk bersemangat.

Jangan lupa Comment atau isi buku tamu ya sob..

---

---

---