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.

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Posts