April 3, 2009

A Vertical Multi-Level Drop Down Menu For Blogger Blogs



Here's a cool widget to fit as many possible links as you want in the minimum possible space.
The widget is completely customizable (background color, text color and number of tabs/links).

Follow these simple instructions, to add this widget to your blog:

STEP #1

Log in to Blogger, and go to "Layout" -> "Edit HTML"

Search for this code in the template:
</head>
Now immediately ABOVE/BEFORE that, paste THE CSS code from DynamicDrive:



NOTE (Important): In the code from DynamicDrive, copy the code ONLY till this tag
</style>

and the code from
<script type="text/javascript">
onwards, paste it in the HTML/JavaScript widget (read STEP #2 below).

Now save the template.

STEP #2
Then go to "Layout" -> Click on "Add a Gadget" and select it as "HTML/JavaScript" type.
And paste this code in it:

<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="#">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>
  </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="#">Sub Item 2.1.3</a></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>
</div>

NOTE: Also paste the remaining code from STEP #1 in the same widget.

If you are looking for horizontal multi-level menus then you may read these tutorials:
New Multi-Level Drop Down Menu
Multi-Level Drop Down Menu For Blogger

And for a sliding side menu, have a look on this post:
A Sliding Side Menu For Blogs

Credits: DynamicDrive

20 comments:

Sarathganesh said...

hi divya,
can u tell me how u modified your search(sitesearch) options.
DETAILED
---------
See, in my blog http://boltions.blogspot.com
when you search you get every post in it's full form all in one page,WHEREAS for u it only displays the titles
please tell me how!!!

Divya Sai said...

Hi Sarath,

This post will help you:
Show only titles in your Blog archives pages

Regards
Sai

sarath said...

Edit the contents of your template. Learn more
We were unable to save your template

Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Element type "menuids.length" must be followed by either attribute specifications, ">" or "/>".


im getting this error please help me

AntiMorfeu said...

I am getting the same error. What may be the problem?

Kepners said...

I am getting the Same error....

Anonymous said...

Find "b/:skin"
Put the CSS code above that, and it should work.

sripeople said...

not working! same error :(

Boby Bratu said...

it doesn't work for my blog...it says something about XML turn off...my blog: http://bobybratu.blogspot.com/ ,please notify me at this e-mail: boby_bl_vb@yahoo.com if you find a solution and offcours if u are willing to help me out.thank you!

Boby Bratu said...

i didn't see the comments above...i am getting the same problem as the people above...still waiting for a repy on my e-mail...thank you!

Divya Sai said...

@ALL

In the code from DynamicDrive, copy the code ONLY TILL

</style>

and the code from
<script type="text/javascript">
onwards,
paste it in the HTML/JavaScript widget.

Eva said...

this menu works fine, except I cannot see any of the subfolders... it goes behind the body of the blog... I'll only be able to see the subfolders if I have a really large sidebar.. is there any way to make the subfolders go ontop of the blog content?

Sai - Blogger Help said...

Hi Eva, on your blog I found the slidemenu-horizontal and not this vertical menu, so I guess you changed your mind after writing this comment. Anyways, if you want to show the arrow icons in your menu, then use the modified slidemenu.js file uploaded by me, instead of the one downloaded from dynamicdrive.

Regards
Sai

InStyleX said...

Hi,
I think i Have encounter the same problem as Eva. The menu works fine for me. But I realized that the vertical drop down menu will not appear on my body panel when I used Firefox or Chrome whereas the dropdown box will appear on top of my body panel when I used IE to view instead. So is there any ways to modify the coding to solve this problem?

sravani choudary said...
This comment has been removed by the author.
sravani choudary said...

hi sai,i hav a long vertical menu,so sub-menu items are going beneath the screen for links present at the bottom of the menu,
i want them to be visible always on the screen,i.e to move the sub-menu items as required to view always on the screen ven the mouse is over the main menu item,
can u suggest me any solution to fulfil my wish
thanks in advance

alysiahh said...

Hi, I'm having trouble with the vertical menu. The sub menus go underneath my posting area. Do you have any idea why?

nivre said...

Hi, thanks for this post. I tried this template but there is empty space between the list in the main menu. Also, the sub menu opens up a distance to the right away from main menu. I don't know what is causing it.

Anonymous said...

PLEASE HELP!!!!!

I have two issues that i cant solve myself. I've installed all the necessary codes etc for the sidebar multi level menu and after checking it on a sperate tab with all the original wording it works properly.

Ive since changed some of the names on the side bar and the colour then saved it. As yet i havent added any urls to the code, would this make a difference? Now when i check the page on my laptop the menu appears infront of my posts but on another computer it's sitting behind my posts.

The second issue may be related to the first, on my laptop where the menu appears infront of my posts i can hover over the menu bar and for example i can see 'folder 2' and 'folder2.1' appears but im not able to click on it. The second part of the drop menu disappears when i try to move my mouse onto it. Ironically, on the second computer where the drop menu appears behind the posts i can hover over the first part of the menu and move to all the sub headings.

Is this a error in my code or am i having a stupid blonde moment?!?!?!? My blog address is www.bijoubylulu.blogspot.com if you want to take a look at the problem. If its not too cheeky to ask please can you email me your thoughts re this matter, my email is fatalbeauty1@msn.com

Can i also say it was a huge relief to find your blog with an easy to follow code and instructions, yours was the only one ive been able to follow without my brain exploding.

Cheers.x

Admin said...

Nice ;)

George said...

how can i add the right arrow image? Please Help me

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

comment on this post Share Your Views

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

Next Post Homepage Previous Post

Regular Readers


What They Say...

Divya Sai is the ingenious webmaster of Bloggerstop.Net. Divya is extremely patient, knowledgeable and responsive... Bloggerstop.net has an abundance of articles on creating widgets, templates, hacks and ways to make your blog search engine friendly.
- Stacey @Pets With Allergies
I stumbled onto a great site. Sai, over at Bloggerstop.net has helped me tremendously and with great patience...for any and all questions regarding computer issues. And again, THANK YOU Sai.
- Cheryl @Cmash Loves To Read

More Here...

Popular Posts

Get this widget

| © 2010 BloggerStop.net | Blogger Widgets | Template by Dicas Blogger | Enhanced By Divya Sai | Privacy Policy