New Multi-Level Drop-Down Menu

New Multi-Level Drop-Down Menu

Drop down menu makes the navigation in your blog a lot easier, as you can put a number of links in a single row or column.
See this widget in action: ClubVista Template
Similar Widgets:
1. Multi Level Drop Down Menu – Black
2. Sliding Drop Down Menu

To use this drop down menu on your blog, follow these instructions:

STEP #1:
Log in to Blogger, go to Layout and click on “Edit HTML

Find (CTRL+F) this code in the template:

</head>

and immediately ABOVE / BEFORE that, paste this code:

<!–MULTI-LEVEL-DD-MENU-STARTS–>
<link rel=”stylesheet” href=”http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/style.css” type=”text/css” />
<script type=”text/javascript” src=”http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/script.js”></script>
<!–MULTI-LEVEL-DD-MENU-https://bloggerstop.net–>

STEP #2:
Now go to “Layout” -> “Edit HTML” -> “Page Elements” and click on “Add a Gadget” and select it as “HTML/JavaScript” type.

And add this code to it:

<!–MULTI-LEVEL-DD-MENU-STARTS–>
<ul class=”menunew” id=”menu”>
<li><a href=”#” class=”menulink”>Dropdown One</a>
<ul>
<li><a href=”#”>Navigation Item 1</a></li>
<li>
<a href=”#” class=”sub”>Navigation Item 2</a>
<ul>
<li class=”topline”><a href=”#”>Navigation Item 1</a></li>
<li><a href=”#”>Navigation Item 2</a></li>
<li><a href=”#”>Navigation Item 3</a></li>
<li><a href=”#”>Navigation Item 4</a></li>
<li><a href=”#”>Navigation Item 5</a></li>
</ul>
</li>
<li>
<a href=”#” class=”sub”>Navigation Item 3</a>
<ul>
<li class=”topline”><a href=”#”>Navigation Item 1</a></li>
<li><a href=”#”>Navigation Item 2</a></li>
<li>
<a href=”#” class=”sub”>Navigation Item 3</a>
<ul>
<li class=”topline”><a href=”#”>Navigation Item 1</a></li>
<li><a href=”#”>Navigation Item 2</a></li>
<li><a href=”#”>Navigation Item 3</a></li>
<li><a href=”#”>Navigation Item 4</a></li>
<li><a href=”#”>Navigation Item 5</a></li>
<li><a href=”#”>Navigation Item 6</a></li>
</ul>
</li>
<li><a href=”#”>Navigation Item 4</a></li>
</ul>
</li>
<li><a href=”#”>Navigation Item 4</a></li>
<li><a href=”#”>Navigation Item 5</a></li>
</ul>
</li>
<li><a href=”https://bloggerstop.net” class=”menulink”>Blogger Help</a></li>
<li>
<a href=”#” class=”menulink”>Dropdown Two</a>
<ul>
<li><a href=”#”>Navigation Item 1</a></li>
<li>
<a href=”#” class=”sub”>Navigation Item 2</a>
<ul>
<li class=”topline”><a href=”#”>Navigation Item 1</a></li>
<li><a href=”#”>Navigation Item 2</a></li>
<li><a href=”#”>Navigation Item 3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href=”#” class=”menulink”>Dropdown Three</a>
<ul>
<li><a href=”#”>Navigation Item 1</a></li>
<li><a href=”#”>Navigation Item 2</a></li>
<li><a href=”#”>Navigation Item 3</a></li>
<li><a href=”#”>Navigation Item 4</a></li>
<li><a href=”#”>Navigation Item 5</a></li>
<li>
<a href=”#” class=”sub”>Navigation Item 6</a>
<ul>
<li class=”topline”><a href=”#”>Navigation Item 1</a></li>
<li><a href=”#”>Navigation Item 2</a></li>
</ul>
</li>
<li><a href=”#”>Navigation Item 7</a></li>
<li><a href=”#”>Navigation Item 8</a></li>
<li><a href=”#”>Navigation Item 9</a></li>
<li><a href=”#”>Navigation Item 10</a></li>
</ul>
</li>
</ul>
<script type=”text/javascript”>
var menu=new menu.dd(“menu”);
menu.init(“menu”,”menuhover”);
</script>
<!–MULTI-LEVEL-DD-MENU-https://bloggerstop.net–>

Of course you have to edit the content before saving this widget.

NOTE: Although the required css and js files are already uploaded and linked in the code in STEP #1, but I suggest you to download and save these files as a backup on your PC:

BackUp – STEP #1:
Download these 2 files:
DDM1_script.js, and
DDM1_style.css

Download zipped file

BackUp – STEP #2:
Upload them to MyDataNest.com, and get the DIRECT LINKS to these files.

Credits for the widget: Leigeber
Widget Requested by: Roady

Leave a Reply

89 Comments on "New Multi-Level Drop-Down Menu"

Notify of
avatar
Sort by:   newest | oldest | most voted
manan
Guest

Hey divya i need your help i did all waht oyu have said but i am not geeting the sma result can you see what;s wrong thanks my blog is here http://www.thenetgod.blogspot.com/

View Comment
Divya Sai
Guest

Hi manan,
There was some problem in the css file, I have corrected it and changed the code too (in step 5), so plz repeat the entire process and tell me if it’s working now !

@ Altuğ KOΓ‡
Plz try now, I have replaced the previous download link…

View Comment
all softwares
Guest

hey dude can u tell me how can we make document wipe effect on our blogger i have seen tht effect on dynamic drive .

but not understand how to do tht ~x(

View Comment
Sujith Bhakthan T R
Guest

will this work in IE6?

View Comment
Divya Sai
Guest

Hello everybody,
I have just updated this post, and replaced the widget entirely with a new one. Now i guess it won’t be having any code conflicts !

@Arham,
Do you want to use wipe effect as an intro page or just as a widget in your blog ?

@ Sujith
I havn’t checked it below IE8, it would be a great for me and other readers if you could test it in IE6…

View Comment
Roady
Guest

Okay.. this works finally with firefox and with my blog! πŸ˜€

About Internet Explorer, It didn’t work with my IE version 6.

Thanks a lot Sai for this. πŸ™‚

View Comment
Roady
Guest

It stopped working I guess πŸ˜€
Yesterday itself.. all of a sudden.. the options in the menu stopped appearing itself.. lol weird xD

so what I did was, i download the .JS and .CSS file, made a new folder, made index.html, added your html code in that and linked it with those files in SAME folder. Tried it out but the options under the menu stopped appearing!

View Comment
Divya Sai
Guest
Dude you were using files hosted on my account (dsai.588.googlepages) – and now its bandwidth has exceeded the limit, THAT IS WHY, i have written to open an acc in hotlinkfiles and use files from there. and DO NOT use 50 megs for DIRECT LINKS, as those websites do not allow you to link files directly. So presently simply download those files, create an a/c in HLF and use the direct links in the code above ! PS: i am unable to use my own googlepages a/c as many bloggers are using files hosted in that a/c ans so bandwidth… Read more »
Divya Sai
Guest

.css is the one which sets the style of any widget or web page,
whenever you find that some widget has lost it’s design or images and its SKELETON is visible to you, that means either the css file has been deleted from it’s location or host is down, where the file has been uploaded…

View Comment
NiravsPhysio
Guest

hey buddy…I followed your instructions as described. I put codes and everything. But, I cannot get the drop down effect in my blog. i.e. I cannot access subcategories of drop downs. Please check at niravsphysio.blogspot.com.

Please let me know the problem. So, I can fix and I can have same drop down effect as you have in http://clubvista-template.blogspot.com/#.

Thanks!

View Comment
Roady
Guest

Hey Nirav, even I’m getting thh same problem as you are.

@Sai – Well, I added your .js and .css file on hotlinkfiles and I tried then.. didn’t work.
Also, I even downloaded your script and cascading style sheet file.. put them in a folder, made index.html file and added the proper source code, the menu comes but no drop down. Weird :S

View Comment
Divya Sai
Guest

Roady,
the .js file you are using, is completely different….here’s the file you are using:

http://www.hotlinkfiles.com/files/2380689_i29lp/DDM1_script.js

And actually the content should be this:
var menu=function(){
var t=15,z=50,s=6,a;
function dd(n){this.n=n; this.h=[]; this.c=[]}
dd.prototype.init=function(p,c){




}
return{dd:dd}
}();

View Comment
Divya Sai
Guest

And although Hotlinkfiles is quite reliable, but recently even they have got some problem and files may go missing sometimes !

So if anyone finds any better file sharing website with hotlinking/direct linking service, then please suggest here !

@Nirav,
Your coding is correct, I’m not sure but may be there’s some code conlict in your blog’s template !

View Comment
Roady
Guest

Hey thanks for pointing the mistake πŸ™‚ . About HotlinkFiles.. yeah .. they deleted my folder.. and I can’t seem to upload any file.. some bug.. “No space left”. Uploaded .CSS file on fileden (Thank’s Sai for that)m looking for a .js file hoster!

View Comment
Gerardo
Guest

Thanks for this, Gave me some other ideas on drop down menus, really clean design as well..

View Comment
Blogger Templates
Guest

@ Roady,
Actually the files are not deleted, they’ll be back after some time, donno what’s going wrong over there, anyways, here’s 1 more similar host:
http://www.sigmirror.com/

@ Gerardo
Yup the design is really clean !

View Comment
CrakerLo
Guest

erm.. how to make side drop down? and not centar

View Comment
Divya Sai
Guest

Hi CrakerLo,

You may read this post:
Sliding Side Menu

View Comment
Nirav
Guest

@Divya,
thanks for your reply. But now I changed my drop down menu look. I added flash drop down menu by uploading .swf file. It works great even in the blogger. Take a look at http://www.niravsphysio.blogspot.com and http://www.freegrematerial.blogspot.com.

It works fine…but the only problem is that it takes so much blank space and drop down bards are not overlapping the blog text. I want dropping bars right on the top of everything.

Can you help me how to fix that? I will be greatful to you. Thanks!

View Comment
wpDiscuz