A Vertical Multi-Level Drop Down Menu For Blogger Blogs

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:

A Vertical Multi-Level Drop Down Menu For Blogger Blogs

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

Leave a Reply

19 Comments on "A Vertical Multi-Level Drop Down Menu For Blogger Blogs"

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

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!!!

View Comment
Divya Sai
Guest

Hi Sarath,

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

Regards
Sai

View Comment
sarath
Guest

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

View Comment
AntiMorfeu
Guest

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

View Comment
Kepners
Guest

I am getting the Same error….

View Comment
Anonymous
Guest

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

View Comment
sripeople
Guest

not working! same error 🙁

View Comment
Boby Bratu
Guest

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!

View Comment
Boby Bratu
Guest

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!

View Comment
Divya Sai
Guest

@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.

View Comment
Eva
Guest

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?

View Comment
Sai - Blogger Help
Guest

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

View Comment
InStyleX
Guest

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?

View Comment
sravani choudary
Guest

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

View Comment
alysiahh
Guest

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

View Comment
nivre
Guest

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.

View Comment
Anonymous
Guest
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… Read more »
Admin
Guest

Nice 😉

View Comment
George
Guest

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

View Comment
wpDiscuz