How To Add Mega Drop Down To Blogger?

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