Create A Sliding Side Menu

I think better than words these images will explain you, what this hack/widget is all about:

Create A Sliding Side Menu
Sliding Side-Menu in it’s normal position
 Create A Sliding Side Menu
Sliding Side-Menu expanded on mouse hover

And to see the widget in action, click on this link: Dark Wooden Template

Now if you are impressed with the widget and want to add a similar widget to your blog, then simply follow these steps:

1. Download these two javascript files from DynamicDrive:
ssm.js, and
ssmItems.js [LINK to DynamicDrive]

2. Now open the second file (ssmItems.js) with note/text pad, and edit it :

<!–

/*
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”; //White color behind links
linkOverBGColor=”#FFFF99″; //Blue Color Behind Menu and External Links
linkTarget=”_top”;
linkAlign=”Left”;
barBGColor=”#444444″; //Gray color behind Side Menu
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]=[“BloggerStop”, “https://bloggerstop.net”, “”]
ssmItems[2]=[“Contact Us”, “https://bloggerstop.net/2008/09/contact-us.html”,””]
ssmItems[3]=[“Earn Money”, “http://join-ziddu.co.cc/”, “”]
ssmItems[4]=[“Cheap Domain”, “http://main.bloggerstop.net/contests/1and1/1and1.html”, “_new”]
ssmItems[5]=[“Blogger Templates”, “https://bloggerstop.net/2008/09/blogger-help-free-blogger-templates.html”, “”]
ssmItems[6]=[“Blogger Help”, “https://bloggerstop.net/2008/09/blogger-help.html”, “”]
ssmItems[7]=[“FAQ”, “http://any_FAQ_PAGE”, “”, 1, “no”] //create two column row
ssmItems[8]=[“Email”, “http://Your_Email_Add”, “”,1]
ssmItems[9]=[“External Links”, “”, “”] //create header
ssmItems[10]=[“JavaScript Kit”, “http://www.javascriptkit.com”, “”]
ssmItems[11]=[“Gallery”, “http://gallery.main.bloggerstop.net/image1.htm”, “”]
ssmItems[12]=[“Reviews”, “http://review-the-web.blogspot.com”, “”]

buildMenu();

//–>

Now change everything in RED, GREEN and BLUE as per your requirements.
The code shown in purple color are comments, you can change them to modify the background colors.

Now after editing, save the file.

3. Now upload these two files to MyDataNest.com (You have to register for free as a member to upload files).
4. Then copy the direct links to these files.

5. Finally change the links (in red color) in the following code with your new links from MyDataNest.com

<!–SIDE-MENU-STARTS–>
<STYLE>
<!–
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=’http://dsai.588.googlepages.com/ssm.js’ language=’JavaScript1.2′>

//Dynamic-FX slide in menu v6.5 (By maXimus, maximus@nsimail.com)
//Site: http://maximus.ravecore.com/
//For full source, and 100&#39;s more DHTML scripts, visit http://www.dynamicdrive.com

</SCRIPT>

<SCRIPT SRC=’http://dsai.588.googlepages.com/ssmItems.js’ language=’JavaScript1.2’/>
<!–SIDE-MENU-STOPS–>

Go to your blog template (Log in to Blogger -> Go to Layout -> Edit HTML), and find (CTRL+F) this code:

</head>

And paste the code (obtained from step 5) just BEFORE/ABOVE it.

Credits: DynamicDrive and MaXimus
Feel free to ask your doubts…

Leave a Reply

40 Comments on "Create A Sliding Side Menu"

Notify of
avatar
Sort by:   newest | oldest | most voted
CrakerLo
Guest

Woot! is perfect for my other blog!!!! ty and.. when the javascript slide done?

View Comment
Shilpa shetty
Guest

can you tell me how did you add your home page widget it is great you can see same is here http://bsdirectory.blogspot.com/

View Comment
all softwares
Guest

thanx a lot dude for execpting my request

View Comment
Divya Sai
Guest

@ CrakerLo
I am searching for the best possible slid-show widget for you, with simple coding too…i’ll try to post it ASAP.

@ Shilpa
bsdirectory is still under-construction, the widget is already present in the template…I’ll see if I could able to post a tutorial on how to add a widget like that…

@ all softwares
welcome dude…

View Comment
Sujith Bhakthan T R
Guest

Hey thanks a lot. Pls hav a look here
http://keralastatertc.blogspot.com/

View Comment
Divya Sai
Guest

Good work Sujith,

But this side menu is overlapping your gallery logo image, so if possible shift your image gallery logo to some other location (may be bottom)..

Regards
Sai

View Comment
futballketa
Guest

didn’t understand step 4.

View Comment
Sai
Guest

Hi ‘futballketa’

As soon as you upload the 2 files at hotlinkfiles.com, you will be shown some links to the two files, you have to select the “show direct links only” option, and then direct links to the 2 files will be shown to you.
Copy them in a notepad.
Then in step 5, replace the links in red with the two direct links.

PS: You may upload the files at BOXSTR.com, where you’ll straight away get the DIRECT LINKS, as soon as you upload the files.

View Comment
iLeNa
Guest

hai 😀

View Comment
Anonymous
Guest

hello there!
this widget is really cool and the instructions is very easy to understand. Ive successfully added this widget on my blog. But after few times of refreshing, the widget's gone. but the all the codes is still there. I wonder what had happend.

At 1st I thought I forgot to save the template, only preview it. But after few times of successfuly added the widget, it still dissapear after few times of refreshing the page. So im not really sure what to do.

View Comment
Divya Sai
Guest

I need your blog's address buddy…

View Comment
Anonymous
Guest

ouh! sorry!

nooneisperfectsostopactinglikeone.blogspot.com

View Comment
Anonymous
Guest

and I have deleted the widget yet. the codings are all there. but the side menu just wont show. 🙁

View Comment
Anonymous
Guest

uh correction! i mean,

*i haveNT deleted the widget yet

View Comment
Divya Sai
Guest

Either the files uploaded by you to your hotlinkfiles.com account got accidentally deleted or the links pasted by you in the code are not correct, plz again upload and paste the new links.

Here are your old links:
1. http://www.hotlinkfiles.com/files/2723677_rbfud/ssm.js%5Dssm.js
2. http://www.hotlinkfiles.com/files/2723709_abrvb/ssmItems_064931.js%5DssmItems_064931.js

Replace them in the code.

Regards
Sai

View Comment
el amor victima
Guest

ouh!! actually its not really 'accidental'. I thot its okay to delete the links! I tink my problem is fixed now. thank you for ur time !

View Comment
Africa
Guest

You're simply the best, I got my answers it was right there is the code. Thank you sai, I love your site very useful and easy to go through.

View Comment
SLM
Guest

Great script! I have one on my site with links, HOWEVER I need to add another with images. I couldnt get an image to show in place of some of the links. Is there an easy way to do this? Or can a modification be made to allow images to be included on the menu with, or instead of links? Thanks.

View Comment
StockFanatic
Guest

Hi, thank you for the wonderful information. Appreciated!!!

View Comment
wpDiscuz