Mega drop down menu is the best menu for the sites/blog which have a lot of navigation items or links,it helps your readers to find any category easily and navigate through your site and blog.Today I am a beautiful mega drop down menu which is designed by codrops and we have bloggerized it to works perfect with a blogger blog.The installtion of the menu is easy and one step installation so that you will not face any problem while adding it to your blog,now lets see how to add it to your blog.First take a preview of menu by clicking on the green button below,




Mega Drop Down Menu Demo


How To Add Mega Drop Down Menu To Blogger?


  1. First go to Blogger Dashboard > Layout
  2. Click on Add a Gadget (below header)
  3. Select HTML/JavaScript
  4. Paste below code after customizing it as you wish
  5. Finally save your menu.


<style> ul.ldd_menu {
    margin: 0px;
    padding: 0;
    display: block;
    height: 50px;
    background-color: #D04528;
    list-style: none;
    font-family: "Trebuchet MS", sans-serif;
    border-top: 1px solid #EF593B;
    border-bottom: 1px solid #EF593B;
    border-left: 10px solid #D04528;
    -moz-box-shadow: 0px 3px 4px #591E12;
    -webkit-box-shadow: 0px 3px 4px #591E12;
    -box-shadow: 0px 3px 4px #591E12;
}

ul.ldd_menu a {
    text-decoration: none;
}

ul.ldd_menu > li {
    float: left;
    position: relative;
}

ul.ldd_menu > li > span {
    float: left;
    color: #fff;
    background-color: #D04528;
    height: 50px;
    line-height: 50px;
    cursor: default;
    padding: 0px 20px;
    text-shadow: 0px 0px 1px #fff;
    border-right: 1px solid #DF7B61;
    border-left: 1px solid #C44D37;
}

ul.ldd_menu .ldd_submenu {
    position: absolute;
    top: 50px;
    width: 550px;
    display: none;
    opacity: 0.95;
    left: 0px;
    font-size: 10px;
    background: #C34328;
    border-top: 1px solid #EF593B;
    -moz-box-shadow: 0px 3px 4px #591E12 inset;
    -webkit-box-shadow: 0px 3px 4px #591E12 inset;
    -box-shadow: 0px 3px 4px #591E12 inset;
}

a.ldd_subfoot {
    background-color: #f0f0f0;
    color: #444;
    display: block;
    clear: both;
    padding: 15px 20px;
    text-transform: uppercase;
    font-family: Arial, serif;
    font-size: 12px;
    text-shadow: 0px 0px 1px #fff;
    -moz-box-shadow: 0px 0px 2px #777 inset;
    -webkit-box-shadow: 0px 0px 2px #777 inset;
    -box-shadow: 0px 0px 2px #777 inset;
}

ul.ldd_menu ul {
    list-style: none;
    float: left;
    border-left: 1px solid #DF7B61;
    margin: 20px 0px 10px 30px;
    padding: 10px;
}

li.ldd_heading {
    font-family: Georgia, serif;
    font-size: 13px;
    font-style: italic;
    color: #FFB39F;
    text-shadow: 0px 0px 1px #B03E23;
    padding: 0px 0px 10px 0px;
}

ul.ldd_menu ul li a {
    font-family: Arial, serif;
    font-size: 10px;
    line-height: 20px;
    color: #fff;
    padding: 1px 3px;
}

ul.ldd_menu ul li a:hover {
    -moz-box-shadow: 0px 0px 2px #333;
    -webkit-box-shadow: 0px 0px 2px #333;
    box-shadow: 0px 0px 2px #333;
    background: #AF412B;
} </style>  

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        /**
         * the menu
         */
        var $menu = $('#ldd_menu');

        /**
         * for each list element,
         * we show the submenu when hovering and
         * expand the span element (title) to 510px
         */
        $menu.children('li').each(function () {
            var $this = $(this);
            var $span = $this.children('span');
            $span.data('width', $span.width());

            $this.bind('mouseenter', function () {
                $menu.find('.ldd_submenu').stop(true, true).hide();
                $span.stop().animate({
                    'width': '510px'
                }, 300, function () {
                    $this.find('.ldd_submenu').slideDown(300);
                });
            }).bind('mouseleave', function () {
                $this.find('.ldd_submenu').stop(true, true).hide();
                $span.stop().animate({
                    'width': $span.data('width') + 'px'
                }, 300);
            });
        });
    });
</script>

<ul id="ldd_menu" class="ldd_menu">
 <li>
 <span>Vacations</span>
 <!-- Increases to 510px in width-->
 <div class="ldd_submenu">
  <ul>
   <li class="ldd_heading">By Location</li>
   <li><a href="#">South America</a></li>
   <li><a href="#">Antartica</a></li>
   <li><a href="#">Africa</a></li>
   <li><a href="#">Asia and Australia</a></li>
   <li><a href="#">Europe</a></li>
  </ul>
  <ul>
   <li class="ldd_heading">By Category</li>
   <li><a href="#">Sun &amp; Beach</a></li>
   <li><a href="#">Adventure</a></li>
   <li><a href="#">Science &amp; Education</a></li>
   <li><a href="#">Extreme Sports</a></li>
   <li><a href="#">Relaxing</a></li>
   <li><a href="#">Spa and Wellness</a></li>
  </ul>
  <ul>
   <li class="ldd_heading">By Theme</li>
   <li><a href="#">Paradise Islands</a></li>
   <li><a href="#">Cruises &amp; Boat Trips</a></li>
   <li><a href="#">Wild Animals &amp; Safaris</a></li>
   <li><a href="#">Nature Pure</a></li>
   <li><a href="#">Helping others &amp; For Hope</a></li>
   <li><a href="#">Diving</a></li>
  </ul>
  <a class="ldd_subfoot" href="#"> + New Deals</a>
 </div>
 </li>
 <li>
 <span>Equipment</span>
 <div class="ldd_submenu">
  <ul>
   <li class="ldd_heading">By Location</li>
   <li><a href="#">South America</a></li>
   <li><a href="#">Antartica</a></li>
   <li><a href="#">Africa</a></li>
   <li><a href="#">Asia and Australia</a></li>
   <li><a href="#">Europe</a></li>
  </ul>
  <ul>
   <li class="ldd_heading">By Category</li>
   <li><a href="#">Sun &amp; Beach</a></li>
   <li><a href="#">Adventure</a></li>
   <li><a href="#">Science &amp; Education</a></li>
   <li><a href="#">Extreme Sports</a></li>
   <li><a href="#">Relaxing</a></li>
   <li><a href="#">Spa and Wellness</a></li>
  </ul>
  <ul>
   <li class="ldd_heading">By Theme</li>
   <li><a href="#">Paradise Islands</a></li>
   <li><a href="#">Cruises &amp; Boat Trips</a></li>
   <li><a href="#">Wild Animals &amp; Safaris</a></li>
   <li><a href="#">Nature Pure</a></li>
   <li><a href="#">Helping others &amp; For Hope</a></li>
   <li><a href="#">Diving</a></li>
  </ul>
  <a class="ldd_subfoot" href="#"> + New Deals</a>
 </div>
 </li>
 <li>
 <span>Locations</span>
 <div class="ldd_submenu">
  <ul>
   <li class="ldd_heading">By Location</li>
   <li><a href="#">South America</a></li>
   <li><a href="#">Antartica</a></li>
   <li><a href="#">Africa</a></li>
   <li><a href="#">Asia and Australia</a></li>
   <li><a href="#">Europe</a></li>
  </ul>
  <ul>
   <li class="ldd_heading">By Category</li>
   <li><a href="#">Sun &amp; Beach</a></li>
   <li><a href="#">Adventure</a></li>
   <li><a href="#">Science &amp; Education</a></li>
   <li><a href="#">Extreme Sports</a></li>
   <li><a href="#">Relaxing</a></li>
   <li><a href="#">Spa and Wellness</a></li>
  </ul>
  <ul>
   <li class="ldd_heading">By Theme</li>
   <li><a href="#">Paradise Islands</a></li>
   <li><a href="#">Cruises &amp; Boat Trips</a></li>
   <li><a href="#">Wild Animals &amp; Safaris</a></li>
   <li><a href="#">Nature Pure</a></li>
   <li><a href="#">Helping others &amp; For Hope</a></li>
   <li><a href="#">Diving</a></li>
  </ul>
  <a class="ldd_subfoot" href="#"> + New Deals</a>
 </div>
 </li>
</ul>

Important - Remove the code from line 102 if you have already added a jQuery plugin to your blog.

Customing The Menu


Note - I highly recommend you to use HTML Editor to customize this or any menu,because you can see a live preview of your menu when you done changes in your menu also see the image below,it will help you to determine classes and ids of the menu.

Click On Image To Enlarge


Credits

This menu is designed by Codrops and we have bloggerized it,if you want to share it with your readers then kindly link back to this article.

Feel free to post your queries below :)

pEaCe aNd BlEsSiNGs .......

Post a Comment

  1. Which version of syntax highlighter are you using? the post you added about syntax is different from your style. i want like your style. plz its an request

    ReplyDelete
  2. This is very awesome. this type of drop down menu's create a very easy navigation. thank you for this awesome post.
    regards:
    srinath_reddy

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

    ReplyDelete
    Replies
    1. hey atleast give some time and check the post which you have commented before I have already posted the solution yesterday with full details :) Do check the posts which you have commented :)

      http://www.helperblogger.com/2012/06/how-to-add-syntax-highlighter-v3-to.html#comment-from/

      Delete
  4. i am really sorry rahul. extremely sorry. i never see that. delete that coment. really sorry

    ReplyDelete
  5. Hi, thank you, but when I set it the menu is too big, more than the one shown in demo

    Can you help ?

    ReplyDelete
  6. Thanks , that is what I was looking for.

    ReplyDelete
  7. Hi Rahul I am facing some problem with mega drop down, please help me , check it here http://ssbcrackadmin.blogspot.in/

    ReplyDelete
  8. Hello friend,
    i want link exchange with you ..
    if u interested check my site

    http://lab4hacking.blogspot.com

    contact me please ...
    http://lab4hacking.blogspot.com/p/contact-us.html

    ReplyDelete
  9. Hi, I'm a new comer, so may u teach me something?
    I just need to know where to put those code?

    Do I have to put them in one place or different places?

    Tell me, thanks in advance.

    ReplyDelete
    Replies
    1. Chil up friend farid ahmad you have to go into your blogger account and in your blog you have to visit at layouts and then you have to click on add widget and then you have to choose html/java script and in the second blank box past the code and enjoy also mind in that where you want to use it up on the post or under the post adjest it and save it.;... enjoy...

      Delete
  10. Great Post, Great Effort, Indian's Rock.

    ReplyDelete
  11. What if I want it to be at the bottom of the page and have the menus .slideUp? How do I take care of that?

    ReplyDelete
  12. how can i add my sub link.. plz help i'm new
    My Blog

    ReplyDelete
  13. Hello. this is very simple megadropdown menu. But This is cannot full view in side for my blog. my header is 900 px but this megadropdown menu only 800 px. How i edit it?

    My blog :
    blogtainmentnews.blogspot.com

    ReplyDelete
  14. i tried on my test blog and submenus not showing

    ReplyDelete
  15. 1-Is there any way to make it from RIGHT to LEFT instead of "Left to Right for Urdu Language?
    2-How I change color of full Header into my blog color scheme?
    3-How I Increase more top taps in headers?
    4-Last Question: where to put "Urdu font" that convenient for readers.

    ReplyDelete
  16. Thank you very much our compny was in searching of this type html menu thank you watch it at http://onlinefreesell.com

    ReplyDelete
  17. hey admin thank for this great article but i need html of this great demo button which is you used in this post. can you mail me at mypcideas@gmail.com

    ReplyDelete
  18. This comment has been removed by a blog administrator.

    ReplyDelete
  19. Hi............
    dropdown menu is not working..

    http://ravikkumar569.blogspot.in/

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

    ReplyDelete
  21. Thanks sir,,, but how to create responsive menu this mega menu drop down ??

    ReplyDelete
  22. I am using windows 7 and Google Chrome the sub menus are not functioning. Kindly help me.
    Thankyou

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top