Add Drop Down Menu To Blogger

A main feature that's missing in blogger is a drop down menu and although it enables you to use tabs. With the help of this tutorial you can Add Large Drop Down Mega Menu To Blogger. The large drop down menu is a good option for sites with a lot of navigation items. When the user hovers over one of the list items, the item enlarges to the width of the submenu and the submenu appears.

Drop Down Menu Preview

Drop Down Menu Demo

LIVE DEMO  

How To Add Menu In Blogger

• Go to Blogger Dashboard 
• Click on DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed --> Expand Widget Templates
• Press Ctrl + F and search the code shown below

]]></b:skin>

• Now Paste the Code Shown Below just above/before it

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;
}

• Now Find the code shown below using [ctrl+F]

</head>

• Now Paste the Code Shown Below just above/before it

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.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>

• Now find <div id='footer-wrapper'> in your template and paste the code shown below just above it

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

• Now save your template

CUSTOMIZATION

• Don't add the red line shown above if your template already contain this

Like it? Share it.