March 11, 2009

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


43 comments:

CrakerLo said...

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

Shilpa shetty said...

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/

all softwares said...

thanx a lot dude for execpting my request

all softwares said...

it is working

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

Divya Sai said...

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

Sujith Bhakthan T R said...

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

Divya Sai said...

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

futballketa said...

didn't understand step 4.

Sai said...

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.

iLeNa said...

hai :D

Anonymous said...

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.

Divya Sai said...

I need your blog's address buddy...

Anonymous said...

ouh! sorry!

nooneisperfectsostopactinglikeone.blogspot.com

Anonymous said...

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

Anonymous said...

uh correction! i mean,

*i haveNT deleted the widget yet

Divya Sai said...

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

el amor victima said...

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 !

Africa said...
This comment has been removed by the author.
Africa said...
This comment has been removed by the author.
Africa said...

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.

SLM said...

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.

Arafin said...
This comment has been removed by a blog administrator.
StockFanatic said...

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

Kuyie said...

:-*

☠╬¤ɯɐʎɥs╬╝™ said...

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

Sai - Blogger Widgets said...

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

Anonymous said...

how do you put this widget on the right side?

Mero said...

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

Sai - Blogger Widgets said...

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

Anonymous said...

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?

Mero said...

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

Shaan said...

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

Julie said...

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 "/>".

Lưu Nguyên Phú said...

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

Anonymous said...

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

Help me please

Ziaur Rahman said...

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

Arifin said...

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

Thihariya Online said...

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

Sai - Blogger Widgets said...

In which of your blogs, are you trying this?

SHUBHAM MAHESHWARI said...

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

aangtea said...

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

GBI R.O.C.K PALU said...

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

Sankalan said...

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/

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

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

Join and share your views with other bloggers at BloggerStop Community

Comment Like This! and Optimize your blog...

SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy