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 »

34 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. hoe to put it horizontally??
    www.olivehomeopathy.blogspot.in

    ReplyDelete
  2. can I make as vertical.?

    www.fblatest.in

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

    ReplyDelete
  4. 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
  5. 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
  6. 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
  7. This comment has been removed by the author.

    ReplyDelete
  8. 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
  9. @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
  10. 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
  11. This comment has been removed by the author.

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

    ReplyDelete
  13. @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
  14. http://i27.fastpic.ru/big/2012/0325/67/54bac4a175295f43942b3199e57e7b67.jpg - Help me please!

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

    ReplyDelete
  16. 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
  17. 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
  18. Thank you for providing a simple tool that even non techies like me understand. My drop down menu in my blog looks beautiful! :-)

    ReplyDelete
  19. 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
  20. Would like to know how to change colour of arrows too, have also tried adding the colour tag but no change.

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

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

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

    ReplyDelete
  24. 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
  25. 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
  26. Hi. How do I remove all the extra white space between the header and the navigation menu?

    ReplyDelete
  27. 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
  28. 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
  29. 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
  30. Thanks for this menu !
    But, i want center the navbar.

    Can you help me ? :/

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

    ReplyDelete