How To Create a Multi Level Drop Down Menu In Blogger/BlogSpot Blogs?

One of the important widgets I found missing in some blogs is a top navigation menu (preferably multi-level drop down list).
If you have some important navigation links/labels/categories for your blog, that are popular among your readers, then it will be very easy for them, if you could place a navigation bar in the top region of your blog.

So have a quick look on this live demo: [CSS Horizontal Menu], before you add this to your blog.

Now if you are impressed by the way it looks and works, then without wasting any more time, add this widget quickly to your blog, and make your readers happy !

Here's what you have to do.
STEP1:
Download this file from Dynamic Drive:
slidemenu_hori.css [Click Here],

and this one too:
slidemenu_horiz.js (Copyrighted to Dynamic Drive and modified with pre-added images)

And upload the files to MyDataNest (recommended)
NOTE:Edit and save the properties of the folder at your MyDataNest account as "hidden" and NOT as "Private".
or to SigMirror.com, to get the DIRECT LINKS to these files.

Log in to blogger, go to "Layout", click on "Edit HTML" tab.
Now find (CTRL+F) this in the template:

</head>

Immediately BEFORE it, place this code:

<link rel="stylesheet" type="text/css" href="http://mydatanest.com/............/slidemenu_hori.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://mydatanest.com/.............../slidemenu_horiz.js"></script>

Replace the links in RED, with the DIRECT LINKS you obtained from hotlinkfiles.com or sigmirror.com
Then save the template.

STEP 2:
Now go to "Page Elements" of  "Layout".
Add a Gadget of HTML/JavaScript type.

Then add this code in to it:

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://bloggerstop.net">Blogger Help</a></li>
</ul>
<br style="clear: left" />
</div>

Then save this widget. And drag it just above the posts widget.

Posted by Divya Sai

Read More

How to Create A Sliding Side Menu to your blog ?

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

Read More