Slide Menu Dengan Dynamic Slide-In Menu

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

Gimana.......

Salam senyum dari ku....

Judul : Slide Menu Dengan Dynamic Slide-In Menu
Rating : 4.5
Ditulis Oleh : sy@ms

Jika mengutip harap berikan link yang menuju ke artikel Slide Menu Dengan Dynamic Slide-In Menu ini. Sesama blogger mari saling menghargai. Terima kasih atas perhatiannya