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-http://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-->Of course you have to edit the content before saving this widget.
<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="http://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-http://bloggerstop.net-->
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
94 comments:
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/
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...
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(
will this work in IE6?
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...
Okay.. this works finally with firefox and with my blog! :D
About Internet Explorer, It didn't work with my IE version 6.
Thanks a lot Sai for this. :)
It stopped working I guess :D
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!
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 is frequently exceeding it's limit.
Please read this
.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...
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!
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
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}
}();
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 !
@ Nirav,
have you tried this widget:
http://bloggerstop.net/2009/01/multi-level-drop-down-menu-in.html
or this one:
http://bloggerstop.net/2009/03/simple-drop-down-menu-using-jquery.html
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!
Thanks for this, Gave me some other ideas on drop down menus, really clean design as well..
@ 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 !
erm.. how to make side drop down? and not centar
Hi CrakerLo,
You may read this post:
Sliding Side Menu
@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 www.niravsphysio.blogspot.com and 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!
no erm.. i mean jz side << no sliding
@ CrakerLo,
then in that case, you may like to read this post:
http://bloggerstop.net/2009/01/create-customized-side-menu-in-your.html
@Nirav,
The flash menu looks really good, but i think there are some problems, as u have already mentioned, the height of widget increases acc to the sub-manu with max. no. of tabs, and as this is in flash, so it is equally new to me !
Moreover if your visitors do not have flash installed in their browsers, then they'll see a big blank space with a small cross in that place, see this screenshot:
http://www.gigaimage.com/images/iio7kg6ebubhk4m03fdq.png
Anyways u can always find out, how many of your visitors have flash etc. installed on their PCs:
http://bloggerstop.net/2008/11/how-to-track-visitors-and-optimize-your.html
@ CrakerLo,
you may try the second menu in this page, if you want multiple levels in side menu,
http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/index.htm
and also this one (to create your own):
http://www.cssmenubuilder.com/build-vertical-menu
@Divya....
Do you know how to convert from .swf to .js and .css files? so that i can add them in html coding.
If possible let me know...
Dude, this post is also doing the same work, isn't it?
Hi Divya... no solution for the probleme of the drop down effect of this gadget???!! ~x( cannot access to subcategories of drop downs so far!!!! :(
i've tested your links .js & .css that u use!
(http://dsai.588.googlepages.com/DDM1_script.js) and (http://dsai.588.googlepages.com/DDM1_style.css) for nothin'!!!
Also i upload the files into my own webhost space (http://hard2beatus.ucoz.com/DDM1_script.js) and (http://hard2beatus.ucoz.com/DDM1_style.css)
but the probleme persists
I can guarantee that it is not a question of a sharing website!!!
I see that i'm not The only one who suffer of this ...!
How have you manage to put it on? :-/
Can you help US to fix that PLZ?
Otherwise it is impossible whom we are proceed in same stages and we use even links and whom results are different! :(
Hi dude, I have explained here, what I have exactly done in the demo blog, and as you have already checked the demo blog and it's source, there's nothing left to explain, so even I am confused, where can it go wrong :-/
It should be mistake there! not working!!!!
x( x( x( x( x( x( x( x( x( x( x( x( x(
@Sai - Email me anymore uploads you want. Like for these 2 files, I had to make folder under the same name "new-multi-drop-down", so similarly for others.
Hi Divya... :)
i'm so glad to tell u that I finally found the dum probleme with this gadget!
:D YES! your .css file use the class "menu" that is already exists in the CSS of my blog's "source code"!!! :p
Editing the name of one of them is enough to solve the problem (of course also in the HTML part!) :)) How I missed that! :p
Ohhh !!! menu is so common inn templates, i know i should have changed it, anyways thnx for pointing it out, i'll update this post and the file...
@ Roady,
Dude thnx a lot for your help. But i want the bloggers (at least the readers of this blog) to upload and link their own files, it is always better to learn new things and to be self-dependent...
once again thnx roady !
thnx roady !???? :-t
I deserve some thanks me too ...not? :p
it's me who solved the probleme dude! ~x(
:)) :)) :)) no i'm just Joking ... :p
but you can use my files too (just above) ;)
Dude,
I am thankful to all the readers of this blog, it's because of you guys that this blog is running !
cheers for everybody :)
@Sai - ohk .. whatever you feel like :) . I have removed those files from my server. Once again, thanks for the help!
I have another question. Is it possible to add some sort of a scroll function in these menu's???
Because the menu is now very long and it doesn't show the links on the bottom of the menu anymore.
See http://pcgladiator.blogspot.com/
And then click factories. and then you see that list is already at the bottom of how far it can go. Because if i add a link hereit will be no longer visible.
If you now how to add a scroll function please answer.
Well actually TT,
I don't think there's any way to put a scroll function to this widget...
You may use the second and third level menus too, if you think placing all links vertically is taking much of the space !
Simply think some sub-categories under you main category-factories. Hope this helps a little
Regards
Sai
Oke thnx! I will try adding some sub categories.
hey dude i think sigmirror site is ok, i got 2 sites but its working good..
http://www.sigmirror.com
@ BRUNEI BLOG
Yup even I have hosted all my files on sigmirror, I guess it may outshine others in the near future !
Everything you share is fine. But , tell me please, how did you do the menu on the right side, that one with three tabs SUBSCRIBE TAG CLOUD and TRASLATE THIS BLOG? Thanks
http://bloggerstop.net/2009/03/advanced-collapsable-multi-tabbed.html
I got it, thank you!
Hi thanks a lot for this cute script! great job! :X
Welcome dude...great pictures on your blog ;)
Menu is working great! Is there any way to change the colors and font sizes?
@ Doug Davidson,
Yes it is certainly possible to change the colors, you have to edit the .css file (DDM1_style.css).
Presently 2 images are used in the file to give the colors. You can simply those links with html hex-color codes.
This is what all you have to edit:
1. Changes submenu colors:
ul.menunew ul li a {display:block; padding:3px 7px 5px; background-color: #d1d1d1}
2. Changes Main-Menu color, you may remove the default image-link in it:
ul.menunew .menulink {border:1px solid #aaa; padding:5px 7px 7px; font-weight:bold; background:url(http://3.bp.blogspot.com/_4fVBL4fjrFI/SbezNy2ao1I/AAAAAAAACuU/JqDnhT2GDe4/s1600/header.gif); width:134px}
3. Changes on-hover color of Main-Menu:
ul.menunew .menulink:hover, ul.menunew .menuhover {url(background:url(http://2.bp.blogspot.com/_4fVBL4fjrFI/SbezPOVoJ2I/AAAAAAAACuc/mplUEobDZlw/s1600/header_over.gif)}
4. Changes on-hover color of Sub-Menu:
ul.menunew .sub {background: #d1d1d1 url(http://1.bp.blogspot.com/_4fVBL4fjrFI/SbezNihl_uI/AAAAAAAACuM/cFp8PsqbyhQ/s1600/arrow.gif) 136px 8px no-repeat}
After making the changes, save the file and upload it. That's it.
ok so I've done everything as stated on the post but cannot get it to work =(
ANY help would be greatly appriciated!!!!
the blog http://testopiumfields.blogspot.com/
(uploaded files on boxstr, but also tried with hotlinkfiles to no avail)
@Khaos
Your widget is working (if checked before the page loads completely) (just hover the mouse on that widget even before the header image loads).
That means some other widget/script (which loads later in your blog - may be those in the footer) in your template is not allowing this to work.
You may either change/remove the script causing the problem, or you can try this menu:
http://bloggerstop.net/2009/01/multi-level-drop-down-menu-in.html
(you can change the color from black to anything by changing the .css file)
got it working, dunno what was the problem, but thanks for the quick reply!
it WORKS>>>>>>>>>>>:)):))
Divya Please help me , i want to change the name and remove the sub link of drop down 1 , it will change but it is already text , no box , no animation , nothing , a plain text is shown , please guide me ,
Thank You So Much
Changing color in this widget is difficult as images are being used. So you to create new colored images and link them in the .css file.
Better options:
Use this method:
http://bloggerstop.net/2009/01/multi-level-drop-down-menu-in.html
And edit the .css file to change the default color blackish/gray to some other color.
Even better option:
http://bloggerstop.net/2009/03/simple-drop-down-menu-using-jquery.html
No uploading of files, simply edit the code and paste it in your template.
Hi is there anyway that you could give me the html with no sub menus?
Thanks for the code.
But I like to change the menu colors.......
What to do??
You can certainly change the colors, but its not directly changing colors in this widget.
In the css files (first red link), find and change the two images, it will change the color.
If you want to do it easily, then try this one:
http://bloggerstop.net/2009/01/multi-level-drop-down-menu-in.html
In this one too, you have to edit the css file, but this one's more easier because no images are used in this, just change the HTML hex-color codes.
Or even easier is this one, if you want it to be as easy as 1-2-3:
http://bloggerstop.net/2009/03/simple-drop-down-menu-using-jquery.html (but sometimes I feel that it lacks that pro-look).
Thank you so much for sharing this widget, it works very well. Now my blog looks much better. http://pakuankriyawaruga.blogspot.com
Thanks again
That's looking great buddy !
Hi Divya, thats a very great widget you have there, it makes my football shirts blog looks much more professional rather than "blog" looking. http://footballshirtsgalore.com
However, is there any way to make the widget appear in the centre? currently it looks fine on my 13 inch macbook, but when i view it on a bigger screen, the whole widget starts on the left, leaving the right hand side rather empty. i tried using the text align centre code but that only centralize the words in the boxes.
thanks!
Hey there,
I have checked your website at 1280x1024 resolution, here's the screenshot:
http://i47.tinypic.com/nmxhd2.png
It is looking perfect.
Anyways, you can yourself check your website at different resolutions and in different browsers
Hi,
thanks for the reply. yea it looks good in 1280 X 1024 resolution, but when i view it in 1920 X1200 from my monitor, it is a bit to the left. oh well, i guess i just have to live with it :P
thanks for the widget again!
I think optimising sites for 1024 and 1280 is more than enough. Resolutions more than 1600 width is quite rare. Anyways if you still want to align it in the center, then instead of text-align use float:center; for the entire widget, i.e. for
.menunew {
..
..
..
}
I am trying to center my drop down nav bar, but am having issues. Could you elaborate on the procedure to center it? I only know how to do text center not this float:center that you are referring
@Living the dream (jeremy)
In your case, I don't think any code-editing is required. Instead of placing that HTML/JavaScript widget just BELOW the "header", place (drag) it just ABOVE the "Blog Posts" widget.
Hope that hep !
Hmm, moving it down above the blog posts widget physically moves the buttons down too. I would like to include the buttons in the header if at all possible.
Looking at it more it appears that I need to edit the CSS code to get it to work properly. I have everything setup the way I'd like. I'd just like to center it the on my blog for all resolutions. Do you know which formats I should change?
@Living the dream,
To keep things simple, just place the code of STEP #2 inside a table, that has been already centered, like this:
<center><table border="0"><tr>
<td>
...
CODE FROM STEP #2
...
</td>
</tr></table></center>
Thanks! I spoke with a graphic designer friend of mine and he gave me another way of doing it. I went into the < head > code for my blog and added #menu {width:925px;} and it centered it for my blog as well.
Hi, I figured everything out except centering the text inside the box. Will you please tell me how I might do that? Thanks
I am confused. I can not seem to get the code to work. I am new to coding, so please explain what I am doing wrong in simple terms. Also, I used to be able to click on my title in my blog and it would take me to my blog's homepage, but it no longer does that since I tried inserting this code. Thank you for providing this code and any help that you can give.
http://creatingnirvanatoday.blogspot.com/
Hello there,
This code will not interfere with your title-link.
You might have tried clicking the title from the home-page where it is inactive by default. Go to any of your posts/articles and click on the blog-title and you'll find the link active.
If you facing difficulties in implementing this widget, then try the esier one first (I use it on BloggerStop too):
A Simple Drop-Down Menu Using Jquery
love you...bye...
Thank you, bro... =))
Hi Divya,
I already did all the instructions. The main menu can appear but the submenu won't. What happens? is there any way to fix the problem.
Please help me...~x(
I'm a new blogger, so i'm still designing my blog. Here is my blog : blogtipsandsoftwaredownload.blogspot.com.
Thanks in advance for your help.
Can't see the widget on your blog...?
I'm sorry bro..
I remove the widget.. Now, I install the widget again and you can see what's wrong with it..
Thanks~x(
Hi,
I've tried many multilevel navigation bar from many sites.. But none of their submenu can appear. what's wrong with my template.. FYI, I'm using new template from blogspot. This thing makes me frustrated and I don't know where to find answer to this anymore. I spend days just to make a navigation bar..:((
I hope you can help me bro..
Thanks
In step #1, edit the code like this:
<link rel="stylesheet" href="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/style.css" type="text/css" />
<style type="text/css">
ul.menunew {
z-index: +1;
}
</style>
<script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/script.js"></script>
but i think there;s siome code conflict too in your template, due to which the sub-menus are out of their place.
Still can't fix the problem.. But, still, thanks for helping me.. Maybe I should change my template with another. I haven't post anything yet, so why should we do the hard way when we can do the easy way, right ?. Do you know where i can download template that is guaranteed to not having code conflict.
The "what they say" part below. They are right. Other sites don't answer when i send a question, but you answer it.
Thanks
:)
Thanks for that comment Buddy...
Yeah that's true, if you are ready to change the template itself, then of course it's the easier solution in this case.
As you have just started to blog, then I would suggest you to download around 3-5 different templates (believe me you will find & download many more templates than that from the sites below, matching your interest).
Then make a new temporary blog, for each of those templates. Then apply all the basic widgets/hacks to those templates and finally select the best template out of those for your new blog.
You can download free temaplates from these sites:
http://bloggerstyles.com
http://deluxetemplates.com
http://btemplates.com
You're welcome bro... I'll download the templates then apply the widgets from your site.. Thanks for the advice.
Sorry the second one is actually http://deluxetemplates.net
how to change the button size?
Hi guys,
I am new to HTML...and i tried the script and it works..
But now I would love to center the menu bar to the center of the page..how do I do it...
what code should I add ? And where do I add to ?
To the add "HTML" gadget or the Body ??/
Please help..thanks
There's something wrong with this code, or is it because my blog's skin :|?
Screenshot of this error: http://www.mediafire.com/?43n4r59b9dkii99
I'm using Picture Window Template, it's in Blogger's Template design directory (http://draft.blogger.com/template-editor.g?blogID=2734826436373972391), everything is default ' '~
Thanks, this dropdown menu has replaced my old menu. It appears above other elements. Anyway, I've had another problem. The menu colors are not the same and the arrow does not appear. Which codes are wrong?
My blog : http://lokalin.blogspot.com/
This is not working, please take a look at my blog http://http://2012work.blogspot.com/ and see if you could help me solve the problem please. :(
Where i have to put the link???
please answer me!!!!
Allowed HTML tags: <b>, <i> and <a>
Join and share your views with other bloggers at BloggerStop Community
Comment Like This! and Optimize your blog...
SPAMMER OF THE MONTH: www[.]TopRankLinks[.]com