Create A Sliding Side Menu

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

Sliding Side-Menu in it's normal position
 
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", "http://bloggerstop.net", ""]
ssmItems[2]=["Contact Us", "http://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", "http://bloggerstop.net/2008/09/blogger-help-free-blogger-templates.html", ""]
ssmItems[6]=["Blogger Help", "http://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...

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

43 comments

Write comments
March 10, 2009 9:52 PM delete

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

Reply
avatar
March 10, 2009 11:19 PM delete

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/

Reply
avatar
March 11, 2009 1:21 AM delete

thanx a lot dude for execpting my request

Reply
avatar
March 11, 2009 1:46 AM delete

it is working

http://soft-tricks-by-arham.blogspot.com/

Reply
avatar
March 11, 2009 2:21 AM delete

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

Reply
avatar
March 11, 2009 6:35 AM delete

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

Reply
avatar
March 11, 2009 6:41 AM delete

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

Reply
avatar
Sai
May 25, 2009 6:21 AM delete

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.

Reply
avatar
Anonymous
August 06, 2009 4:48 AM delete

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.

Reply
avatar
August 06, 2009 8:58 AM delete

I need your blog's address buddy...

Reply
avatar
Anonymous
August 06, 2009 11:08 PM delete

ouh! sorry!

nooneisperfectsostopactinglikeone.blogspot.com

Reply
avatar
Anonymous
August 07, 2009 9:05 AM delete

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

Reply
avatar
Anonymous
August 07, 2009 9:08 AM delete

uh correction! i mean,

*i haveNT deleted the widget yet

Reply
avatar
August 07, 2009 9:13 AM delete

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]ssm.js
2. http://www.hotlinkfiles.com/files/2723709_abrvb/ssmItems_064931.js]ssmItems_064931.js

Replace them in the code.

Regards
Sai

Reply
avatar
August 07, 2009 9:25 AM delete

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 !

Reply
avatar
September 05, 2009 2:48 PM delete This comment has been removed by the author.
avatar
September 05, 2009 2:49 PM delete This comment has been removed by the author.
avatar
September 05, 2009 2:57 PM delete

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.

Reply
avatar
SLM
September 25, 2009 9:48 AM delete

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.

Reply
avatar
October 06, 2009 4:30 PM delete This comment has been removed by a blog administrator.
avatar
March 24, 2010 6:28 AM delete

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

Reply
avatar
April 15, 2010 11:19 AM delete

http://quiterandom.com/tutorials/solutions-for-js-hosting/


but i cant able to add this widget to my blog :(

help me..!!

temme any good hotlinking site :(

Reply
avatar
April 15, 2010 12:07 PM delete

I have updated the post; changed the site to upload your files to "MyDataNest". But make sure that the folder (at mydatanest) where you upload the files is set as "Hidden" and not as "Private".

Reply
avatar
Anonymous
April 24, 2010 11:00 PM delete

how do you put this widget on the right side?

Reply
avatar
Mero
April 29, 2010 6:03 AM delete

Can I mix

http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/index.htm

&

http://www.dynamicdrive.com/dynamicindex1/davidmenu.htm

Simply
How can I make this menu Multi-level menu

Reply
avatar
April 29, 2010 12:18 PM delete

Well it will be certainly complicated, but instead of those two, try combining this sliding menu, with this one:
http://bloggerstop.net/2009/04/vertical-multi-level-drop-down-menu.html

Reply
avatar
Anonymous
April 30, 2010 1:53 PM delete

I installed it changed the CSS its looking great but when i save as a template in Dreamwever i can't set a link to my html.Maybe because it's a seperate CSS sheet external links no problem
but what about at the root directory level?

Reply
avatar
Mero
May 02, 2010 8:38 AM delete

I'm not developer I'm just blogger And I don't understand in this things abut java can you help me to get
Multi level side-in dynamic menu

I like the side-in one but I need to make levels from the master one How can I get it
Please help me

Reply
avatar
May 18, 2010 3:43 AM delete

Thank u web master i have such a great knoledge from ur web me 2 is web designer visit www.shaanali.info

Reply
avatar
May 31, 2010 9:43 AM delete

I keep getting this error message when I paste in the new code:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Element type "SCRIPT" must be followed by either attribute specifications, ">" or "/>".

Reply
avatar
June 19, 2010 2:31 AM delete

thanks!
but i try, it's not available in firefox, check my blog:
http://www.englishstudysoftware.co.cc
Thanks in advance!

Reply
avatar
Anonymous
August 13, 2010 7:46 PM delete

I wanted to ask how to copy the direct links to the files (Step4)in Mydatanest

Help me please

Reply
avatar
October 01, 2010 12:33 PM delete

It's absolutely great. I'll try this.

Reply
avatar
March 16, 2011 1:42 PM delete

this is a wonderful widget....
It's can make my blog interesting

Reply
avatar
May 17, 2011 10:38 PM delete

ohh...its showing.... but not sliding.......
what can i do??

Reply
avatar
May 17, 2011 11:27 PM delete

In which of your blogs, are you trying this?

Reply
avatar
May 21, 2011 9:15 PM delete

plz tell me if i could edit this menu
like the menu contains different links

Reply
avatar
October 24, 2011 8:48 AM delete

this ok... visit me.
http://aangkunaifie.blogspot.com

Reply
avatar
January 13, 2012 11:53 PM delete

what's another link for uploading ssm & ssmItems..??
tq

Reply
avatar
August 30, 2012 7:20 AM delete

Hey, I need one help. In my blog I created pages (tabs). There are three of those pages: Home, Designer list and About Me. The problem is the background color of the tabs. I cannot change the colors. I have tried a lot. Tried playing with CSS codes but in vain. Will you help? Your help will be much appreciated.

My blog: http://future-tech-art.blogspot.in/

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon