Multi Level Drop Down Menu In Blogger/BlogSpot Blogs

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.

Multi Level Drop Down Menu In Blogger/BlogSpot Blogs

Leave a Reply

211 Comments on "Multi Level Drop Down Menu In Blogger/BlogSpot Blogs"

Notify of
avatar
Sort by:   newest | oldest | most voted
KTS Lâm Hà Mạnh
Guest

that great!
thank you

View Comment
Divya Sai
Guest
Hello KTS I am happy that the code was helpful to you ! But 1 advice that I want to give you and anyone who uses any code from this blog, is to first download any file being used in the hack, then reupload it somewhere else, because with increasing number of users, there can be issues of bandwidth limitation, which I already have seen on some occasions ! Hope you can understand the seriousness of this matter, and sorry for troubling everybody ! RegardsSai NOTE: In this widget, there are two external files being used (In the first code)… Read more »
KTS Lâm Hà Mạnh
Guest

thank you for your notice!

View Comment
Jaime
Guest

Is there a way to change the color of the linkbar?

View Comment
Anonymous
Guest

you can see in
http://dsai.588.googlepages.com/slidemenu_hori.css
have
.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}
change, background: color you want using hexa color;

View Comment
KTS Lâm Hà Mạnh
Guest

you can see in
http://dsai.588.googlepages.com/slidemenu_hori.css
have
.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}
change, background: color you want using hexa color;

View Comment
Jaime
Guest

I hate to sound dumb but where would I upload these files too? after I have changed them? Can i just add the code into blogger? Thanks so much

View Comment
KTS Lâm Hà Mạnh
Guest

step 1: you must download css style at
http://dsai.588.googlepages.com/slidemenu_hori.css
step 2: open it by notepad
find code
.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}

change background: color you want using hexa color;
step 4: save it: slidemenu_hori.css
step 5: upload it to webhost
step 6: using path you have to replace in code :
href="http://dsai.588.googlepages.com/slidemenu_hori.css&quot; />

View Comment
KTS Lâm Hà Mạnh
Guest

you can sign up with free web-host
exp: websamba.com
googlepages.com
ect…

View Comment
KTS Lâm Hà Mạnh
Guest

http://www.0moola.com/
Free web hosting – Free Web space – Free Subdomain
Interests: Personal, Business
Your URL: Subdomain
Space: 5000 MB.
Bandwidth limit: 10000 MB/month
Upload: FTP, Browser
File size limit: 5 MB
Editor: Adv, Basic, WYSIWYG
60-days Inactivity limit
Multiple accounts allowed

http://www.3000mb.com/
Free web hosting – Free Web space – Free Subdomain
PHP support
Interests: Personal, Business
Your URL: Subdomain
Space: 3000 MB.
Bandwidth limit: 10000 MB/month
Upload: FTP, Browser

http://www.4000webs.com/
Free web hosting – Free Web space – Free Subdomain
PHP support
Interests: Personal, Business
Your URL: Subdomain
Space: 4000 MB.
Bandwidth limit: 8000 MB/month
Upload: FTP, Browser

View Comment
Divya Sai
Guest

HI KTC…..

Thanks a lot for explaining and helping others !

I hope now everything is clear for you Jaime,
In brief;

you have to edit the .css file in the first code, and upload it to any of the above mentioned hosts, and replace the link in the code, as described by KTS Lâm Hà Mạnhthat’s it !
Feel free to ask your doubts here !

Once again thanks KTS Lâm Hà Mạnh, for your response and help in this blog !

Regards
Sai

View Comment
Jaime
Guest

Thank you so much. I customized it and uploaded it to my godaddy account that I already had. Thanks again…This is PERFECT!!

View Comment
Jaime
Guest

Well except one more question….How can I make it so the whole link bar is evenly spaced? I can’t seem to get that correct?

View Comment
Jaime
Guest

Thanks again so much for this. I am glad I found it.
I am trying to make the font this color #998e83 and the background white…but it doesn’t seem to be working out for me……I must be changing the wrong ones.

View Comment
KTS Lâm Hà Mạnh
Guest

sorry !
as Divya Sai said,
you find code:
.jqueryslidemenu{
font: bold 12px Verdana;
background: #463E41;
width: 100%;
}
change background ì you want by hexa color: #463E41
last day, i’m very tired ^^

View Comment
Eden Eco Homes
Guest

Hey there,

looks like a great menu, i got your version installed on my blog, but when i tried to upload CSS and Java pages myself to a host, the slider format got lost.

I m using google sites but cant save website address as xxxxxx.css or xxxxxx.jv

is that neccesary for my blog to read the code?

this is where is saved it, but why isnt it working???

http://sites.google.com/site/edendropdownmenutest1/

what else could i be doing wrong?

View Comment
Eden Eco Homes
Guest

or do any other references have to be changed?

ie
http://www.dynamicdrive.com

//bloggerstop.net”

?

View Comment
Divya Sai
Guest

You have to just copy paste the entire code as it is, BUT, a slight modification is required:

first download and save these two files:
1. http://dsai.588.googlepages.com/slidemenu_hori.css
2. http://dsai.588.googlepages.com/slidemenu_horiz.js

Then go to hotlinkfiles.com, create an account
and upload these files to get two DIRECT links, now replace these links (http://dsai.588…..), with the two new links in the FIRST code, and then put it into the HTML template of your blog !

View Comment
Divya Sai
Guest

I do not know, whether you are given access to the HTML of your blog/site in Google sites, if you are not given the access to the template, then create a blog in Blogger.com (blogger also belongs to Google)

Regards
Sai

View Comment
Eden Eco Homes
Guest

Sai,

awesome. sounds right. will try it asap

View Comment
wpDiscuz