Side_Menu1

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…

40 thoughts on “Create A Sliding Side Menu

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

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

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

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

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

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

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *