Multi Level Drop Down Menu For Blogger & Wordpress


UPDATE: To learn instead how to create a vertical sidebar menu version please read: Vertical Sidebar Menu drop down menu for blogsDrop down menus provide easy and neat navigation by organizing and featuring important category links of your blog. With increased use of categories and tags, organizing links in a simple menu is difficult therefore the menu that we share today provides you with easy control over its column and rows display. You can choose to create as many sub levels as you want. Its created using simple HTML and CSS3 along with cool JavaScript transition effects. The script is adopted from dynamicdrive and bloggerized by MBT blog. We have kept the installation extremely simple. All you need is to copy and paste the code as instructed. The top bar menu instruction below are for blogger users only but if you use wordpress as a blogging platform then you will need to manually insert the code inside your template or using the widget section.


Live Demo

 

Add This Drop Down Menu To Blogger

  1. Go To Blogger > Design
  2. Choose HTML/Javascript Widget. We will add the menu just below Header so choose the widget near the Head section of your layout
  3. Paste the following code inside it,

<script src='http://mybloggertricks.googlecode.com/files/dropdownddlevel.js' type='text/javascript'></script>
<style>
/* ######### Drop Down Menu by www.MyBloggerTricks.com ######### */


.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}

.ddsubmenustyle ul{
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
}

.ddsubmenustyle li a{
display: block;
width: 170px; /*width of menu (not including side paddings)*/
color: black;
background-color: lightyellow;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid black;
}

* html .ddsubmenustyle li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}

.ddsubmenustyle li a:hover{
background-color: black;
color: white;
}

.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}

.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}

.ddiframeshim{
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}


/* ######### Black Strip Main Menu Bar CSS ######### */

.mattblackmenu ul{
margin: 0;
padding: 0;
font: bold 12px Verdana;
list-style-type: none;
border-bottom: 1px solid gray;
background: #414141;
overflow: hidden;
width: 100%;
}

.mattblackmenu li{
display: inline;
margin: 0;
}

.mattblackmenu li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 6px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141;
}

.mattblackmenu li a:visited{
color: white;
}

.mattblackmenu li a:hover{
background: black; /*background of tabs for hover state */
}

.mattblackmenu a.selected{
background: black; /*background of tab with "selected" class assigned to its LI */
}

</style>

 

<div id="ddtopmenubar" class="mattblackmenu">
<ul>
<li><a href="#">LINK1</a></li>
<li><a href="#" rel="ddsubmenu1">LINK2</a></li>
<li><a href="#" rel="ddsubmenu2">LINK3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#" rel="ddsubmenu3">LINK5</a></li>
</ul>
</div>

<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>


<ul class='ddsubmenustyle' id='ddsubmenu1'>
<li><a href='#'>LINK2 ITEM 1</a></li>
<li><a href='#'>LINK2 ITEM 2</a>
  <ul>
  <li><a href='#'>LINK2 ITEM 2.1</a></li>
  <li><a href='#'>LINK2 ITEM 2.2</a></li>
  </ul>

</li>
<li><a href='#'>LINK2 ITEM 3</a>
  <ul>
  <li><a href='#'>LINK2 ITEM 3.1</a></li>

    </ul>

</li>

<li><a href='#'>LINK2 ITEM 4</a></li>

</ul>


<ul class='ddsubmenustyle' id='ddsubmenu2'>
<li><a href='#'>LINK3 ITEM 1</a></li>
<li><a href='#'>LINK3 ITEM 2</a></li>
<li><a href='#'>LINK3 ITEM 3</a>
  <ul>
  <li><a href='#'>LINK3 ITEM 3.1</a></li>

<li><a href='#'>LINK3 ITEM 3.2</a></li>
  <li><a href='#'>LINK3 ITEM 3.3</a></li>
  <li><a href='#'>LINK3 ITEM 3.4</a></li>
  </ul>
</li>
<li><a href='#'>LINK3 ITEM 4</a></li>
<li><a href='#'>LINK3 ITEM 5</a>
  <ul>

  <li><a href='#'>LINK3 ITEM 5.1</a></li>
  <li><a href='#'>LINK3 ITEM 5.2</a>
    <ul>
    <li><a href='#'>LINK3 ITEM 5.2 1</a></li>
    <li><a href='#'>LINK3 ITEM 5.2 2</a></li>
    <li><a href='#'>LINK3 ITEM 5.2 3</a></li>

    </ul>
  </li>
    </ul>
</li>
<li><a href='#'>LINK3 ITEM 6</a></li>
</ul>

 

<ul class='ddsubmenustyle' id='ddsubmenu3'>
<li><a href='#'>LINK5 ITEM 1</a></li>
<li><a href='#'>LINK5 ITEM 2</a></li>

<li><a href='#'>LINK5 ITEM 3</a></li>
<li><a href='#'>LINK5 ITEM 4</a></li>
<li><a href='#'>LINK5 ITEM 5</a></li>
</ul>

All you need to understand is:

  • Replace the # symbols with page links
  • Replace the bolded black texts with Page Titles
  • To create a drop down menu inside a Main Menu link simple add to it a rel attribute like rel="ddsubmenu1Change the drop down number accordingly.
  • Normal li and ul rules apply here to create sub menu and sub sub menu links.
  • Main links are mentioned first and drop down menu links are mentioned separately after the JavaScript call function.
  • To change the background color of the menu simply edit background: #414141;

   4.   Save your widget and you are all done!

Visit your blogs to see the menu working just perfectly. I know creating HTML tags for sub links would be a little tricky for those who are not well versed with HTML. But if you mention how you want your links to appear in the comment box below then we will create a code for you as a favour. :)

Want something different?

See Full collection of most of our released Navigation menus here:

Need help?

The menu can easily be customize and font family and colors are easy to be changed. I have not explained every bit of customization for the sake of simplicity. However if you wish to make some big changes to how the menu appears then feel free to post your questions below. I hope you find this menu useful which is surely eye catching and different in every regard. Peace and blessings pals! :)

Need Quick Help within 24 Hours? ASK NOW



If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

41 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. Good Effect. www.thisismyheaven.com

    ReplyDelete
  2. Nice Menu.
    Now i am going to adding this menu in my blog Blogging Tips

    ReplyDelete
  3. Nice Tips.
    Now I am going to applying in my blog Blogging Club

    ReplyDelete
  4. hoe to put it horizontally??
    www.olivehomeopathy.blogspot.in

    ReplyDelete
  5. can I make as vertical.?

    www.fblatest.in

    ReplyDelete
  6. Well Thanks sir nice Drop Down levels But don't you think it lacks bit of graphic if it had metallic or crystal look it would look great. Syed Faizan Ali Recently Posted Protecting Your Copyrighted Content From Getting Stolen - Series

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. anks you Sooooo much MBT. You don't know how much you helped me a lot and you have just given the best solution to my problem arranging many labels... Now my blog looks clean and organized! Thank you so much MBT... You may want to look at it. It fits well with my blog! Yey!!!

    BTW, can you teach me how to change the color of the background of the dropped-down menu? Thank you a lot! My blog looks organized now!

    My blog is EDMARATION, Travel Blog

    ReplyDelete
  9. Assalam O alekum Mustafa bhai I Am confused on One thing that Wehn I open my Blog and all posts are Complete I mean I cant see small Summary But The Whole Post As Summary Please help me out Please

    ReplyDelete
  10. Dear Mohammad,
    U r great,thanks a lot for your tips and tricks.I am a Teacher.Have a look to my blog www.cskollam.com.God bless u.

    ReplyDelete
  11. AOA Mohammad,
    Great sharing. Very helpful stuff for newbies. I know my comment is not related to this post but Flowers on demo page are really amazing.:)

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. Wonderful, I have always avoided the drop down menus... just waiting for a gadget to do the trick instead, and here it is :)

    How do I make the distance between my link list and menu bar smaller? I figured out my other problem (deleted post)

    http://www.tampinescourt.net/

    Thanks

    ReplyDelete
  14. @Hemant @Fasil

    Check tonight's post for vertical one. :)

    @Faizan Ali

    What is important is its structure pal. Of course you can add an image instead of Hexadecimal color code for the background to give it any theme you like. The CSS is in front of you.
    :)

    @Edmaration etc

    My pleasure pal and it looks great on your blog and you have added it in a different way. :)

    To change background of drop down edit :

    .ddsubmenustyle li a{
    display: block;
    width: 170px; /*width of menu (not including side paddings)*/
    color: black;
    background-color: lightyellow;
    text-decoration: none;
    padding: 4px 5px;
    border-bottom: 1px solid black;
    }

    the above bolded parts are for changing the width, font color and background color of the drop down menu and sub menu. Change the black and lightyellow to hexdecimal color codes of your choice.


    For mouse hover state edit this part:


    .ddsubmenustyle li a:hover{
    background-color: black;
    color: white;
    }

    Hope this helps :)


    @Raheemullah
    Buddy you may not be adding the read more link. Please add <!--more--> anywhere you want the read more link to appear and also read my tutorials on read more links. :)



    @cskollam.com

    Thanks pal and your blog is a great learning resource. More power! :>

    @sahrish
    W.salam. Thank you for the kind comments. For the falling snow read my post on Christmas falling snow.

    :)

    @itshometome

    Congratz! :>> For decreasing the width of the drop down menu kindly edit this:

    .ddsubmenustyle li a{
    display: block;
    width: 170px; /*width of menu (not including side paddings)*/
    color: black;
    background-color: lightyellow;
    text-decoration: none;
    padding: 4px 5px;
    border-bottom: 1px solid black;
    }

    ReplyDelete
  15. Hello again,
    I-m sorry, I'll rephrase my question. I have 2 bars: a Blogger horizontal link list bar and this new drop down menu bar. I put the drop down menu underneath but my problem is the white gap between the top bar and the bottom. I would like it to be smaller. How to do that?
    My blog : www.tampinescourt.net
    Thanks again

    ReplyDelete
  16. This comment has been removed by the author.

    ReplyDelete
  17. i love this site. i created a site www.Mymp3den.com by follwing this site

    ReplyDelete
  18. @itshometome

    To do that you need to go to your template Edit HTML and delete this which appears just below your first menu <div class="clear"></div>

    You will need to know basic HTML to do that. I would recommend that you remove the first menu and keep just one menu which may contain all links. It will look more neater.

    ReplyDelete
  19. http://i27.fastpic.ru/big/2012/0325/67/54bac4a175295f43942b3199e57e7b67.jpg - Help me please!

    ReplyDelete
  20. This comment has been removed by the author.

    ReplyDelete
  21. Fantastic and simple to implement menu bar, thank you very much for posting. One question that would help me thou, is there a way to change the colour of the arrows on the dropdown menus?

    http://cds79m.blogspot.co.uk/

    Regards
    Clive

    ReplyDelete
  22. Thank you for providing this menu, which I've customized and added to my own site. Like Clive, I'd like to know if there's a simple way to modify the arrow icons.

    Additionally, is there a way to change the spacing between the bottom of the main menu and the top of the first drop down menu item. Right now, there is a slight overlap. For example, in your image above, that would be the space between LINK 3 and LINK 3 ITEM 1

    Thanks,

    ReplyDelete
  23. Thank you for providing a simple tool that even non techies like me understand. My drop down menu in my blog looks beautiful! :-)

    ReplyDelete
  24. Very nice instructions I have implemented on my site, but is there a way to change the color of the Arrows. I added the color tag to .downarrowpointer{ but there was no change.

    ReplyDelete
  25. Would like to know how to change colour of arrows too, have also tried adding the colour tag but no change.

    ReplyDelete
  26. how can you make it if you click the link it will open to another window?

    ReplyDelete
  27. Terima kasih atas pencerahannya, sudah saya gunakan di web sekolah, dan berhasil dengan baik.

    ReplyDelete
  28. my drop down menu is blocked by my blog template... how do i solve this?

    ReplyDelete
  29. Granted I did some serious tweaking to this - but - in the end - it worked on all browsers!!!!!!! :-) I could not get the sub menus to work in internet explorer (surprise). But, my site is very basic, I didn't need them. So, I just removed them! Thank you so much! You are seriously my hero today. I haven't linked up all my pages yet, but, I am just so happy to see drop down navigation on blogger that works on all browsers.

    www.ginayeagley.com

    ReplyDelete
  30. Hi, now that I have solved the drop down menu being blocked by my blog template... i have another issue..... I am wondering is it possible to remove the red stripe that appears after I added in the drop down menu....

    ReplyDelete
  31. Hi. How do I remove all the extra white space between the header and the navigation menu?

    ReplyDelete
  32. Hello Mohammad,

    My custom template is writing drop down menus this way:

    [li][a href='#']Parent Category[/a]
    [ul class='children']
    [li][a href='#']Child Category 1[/a]
    [ul class='children']
    [li][a href='#']Sub Child Category 1[/a][/li]
    [li][a href='#']Sub Child Category 2[/a][/li]
    [li][a href='#']Sub Child Category 3[/a][/li]
    [/ul]
    [/li]
    [li][a href='#']Child Category 2[/a][/li]
    [li][a href='#']Child Category 3[/a][/li]
    [li][a href='#']Child Category 4[/a][/li]
    [/ul]
    [/li]

    in case if somebody need it

    ReplyDelete
  33. Hello Mohammad:)
    Nice Menu. I'm trying to use it in a new blog. But there was a problem when looking at Internet Explorer. Look http://ozdraviteodmah.blogspot.com

    Can you fix it? Thanks in advance.

    ReplyDelete
  34. I'm very happy with that fantastic Menu! It's so flexibly. But it seems that there might be a temporary problem with blogger at the moment, could it? All of the Menus don't dropdown anymore.
    I've tried the original code from your site here again, and it also don't work. What could that be? It would be very nice, if you can help with that problem! :O)

    For exampel look at my Testblog and here main Blog

    Thank's a lot!

    ReplyDelete
  35. I have been using your drop down menu for several months now. But I noticed that it doesn't work anymore. Is there a problem with blogger that you may know? Thanks!

    ReplyDelete
  36. It's not working for last few days. While searching the reason, found that 'http://mybloggertricks.googlecode.com/files/dropdownddlevel.js' js file is missing. Which one to use now?

    ReplyDelete
  37. Thanks for this menu !
    But, i want center the navbar.

    Can you help me ? :/

    ReplyDelete
  38. hi i have the same problem drop down menu doesn't work. is there a way around this?

    ReplyDelete