Multi Level Drop Down Menu In Blogger/BlogSpot Blogs

One of the important widgets I found missing in some blogs is a top navigation menu (preferably multi-level drop down list).
If you have some important navigation links/labels/categories for your blog, that are popular among your readers, then it will be very easy for them, if you could place a navigation bar in the top region of your blog.

This is a multi-level horizontal CSS menu created using a regular nested HTML list, then turned into a fully functional drop down menu using CSS and a touch of jQuery. The sub menus slide in and out into view, which also automatically reposition themselves horizontally if too close to the window's right edge.

So have a quick look on this live demo: CSS Horizontal Menu, before you add this to your blog.

Now if you are impressed by the way it looks and works, then without wasting any more time, add this widget quickly to your blog, and make your readers happy !

Here's what you have to do.

Step 1:
Log in to blogger, go to "Layout", click on "Edit HTML" tab.
Now find (CTRL+F) this in the template:

</head>

Immediately BEFORE it, place this code:

<style type='text/css'>
.droplinebar{
overflow: hidden;
}
.droplinebar ul{
margin: 0;
padding: 0;
float: left;
width: 100%;
font: bold 13px Arial;
background: #242c54 url(http://www.dynamicdrive.com/cssexamples/bluedefault.gif) center center repeat-x; /*default background of menu bar*/
}
.droplinebar ul li{
display: inline;
}
.droplinebar ul li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
}
.droplinebar ul li a:visited{
color: white;
}
.droplinebar ul li a:hover, .droplinebar ul li .current{ /*background of main menu bar links onMouseover*/
color: white;
background: transparent url(http://www.dynamicdrive.com/cssexamples/blueactive.gif) center center repeat-x;
}
/* Sub level menus*/
.droplinebar ul li ul{
position: absolute;
z-index: 100;
left: 0;
top: 0;
background: #303c76; /*sub menu background color */
visibility: hidden;
}
/* Sub level menu links style */
.droplinebar ul li ul li a{
font: normal 13px Verdana;
padding: 6px;
padding-right: 8px;
margin: 0;
border-bottom: 1px solid navy;
}
.droplinebar ul li ul li a:hover{ /*sub menu links&#39; background color onMouseover */
background: #242c54;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/*********************
//* jQuery Drop Line Menu- By Dynamic Drive: http://www.dynamicdrive.com/
//* Last updated: June 27th, 09'
//* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/
*********************/
var droplinemenu={
arrowimage: {classname: 'downarrowclass', src: 'down.gif', leftpadding: 5}, //customize down arrow image
animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds
buildmenu:function(menuid){
    jQuery(document).ready(function($){
        var $mainmenu=$("#"+menuid+">ul")
        var $headers=$mainmenu.find("ul").parent()
        $headers.each(function(i){
            var $curobj=$(this)
            var $subul=$(this).find('ul:eq(0)')
            this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()}
            this.istopheader=$curobj.parents("ul").length==1? true : false
            if (!this.istopheader)
                $subul.css({left:0, top:this._dimensions.h})
            var $innerheader=$curobj.children('a').eq(0)
            $innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader //if header contains inner SPAN, use that
            $innerheader.append(
                '<img src="'+ droplinemenu.arrowimage.src
                +'" class="' + droplinemenu.arrowimage.classname
                + '" style="border:0; padding-left: '+droplinemenu.arrowimage.leftpadding+'px" />'
            )
            $curobj.hover(
                function(e){
                    var $targetul=$(this).children("ul:eq(0)")
                    if ($targetul.queue().length<=1) //if 1 or less queued animations
                        if (this.istopheader)
                            $targetul.css({left: $mainmenu.offset().left, top: $mainmenu.offset().top+this._dimensions.h})
                        if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow
                            $mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'})
                        $targetul.slideDown(droplinemenu.animateduration.over)
                },
                function(e){
                    var $targetul=$(this).children("ul:eq(0)")
                    $targetul.slideUp(droplinemenu.animateduration.out)
                }
            ) //end hover
        }) //end $headers.each()
        $mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()})
    }) //end document.ready
}
}
//]]>
</script>
<script type='text/javascript'>
droplinemenu.arrowimage.src=&quot;http://lh6.ggpht.com/_wi2BBfk28Mg/TBY_tXeO3YI/AAAAAAAAEjI/yaja2ehQTuw/down.gif&quot;
//build menu with DIV ID=&quot;myslidemenu&quot; on page:
droplinemenu.buildmenu(&quot;mydroplinemenu&quot;)
</script>

Then save the template.
STEP 2:
Now go to "Page Elements" of  "Layout".
Add a Gadget of HTML/JavaScript type. Then add this code in to it:

<div id="mydroplinemenu" class="droplinebar">
<ul>
<li><a href="http://www.itpblog.info/">Home</a></li>
<li><a href="http://www.itpblog.info/">CSS Examples</a>
  <ul>
  <li><a href="#">Activities 1</a></li>
  <li><a href="#">Activities 2</a></li>
  <li><a href="#">Activities 3</a>
      <ul>
      <li><a href="#">Water Sports 1</a></li>
      <li><a href="#">Water Sports 1</a></li>
      <li><a href="#">Water Sports 1</a></li>
      <li><a href="#">Water Sports 1</a></li>
      </ul>
    </li>
  <li><a href="#">Activities 4</a></li>
  </ul>
</li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a>
  <ul>
  <li><a href="#">Traveling 1</a></li>
  <li><a href="#">Traveling 2</a></li>
  <li><a href="#">Traveling 3</a></li>
  <li><a href="#">Traveling 4</a>
      <ul>
      <li><a href="#">Africa 1</a></li>
      <li><a href="#">Africa 2</a></li>
      <li><a href="#">Africa 3</a></li>
      <li><a href="#">Africa 4</a>
          <ul>
          <li><a href="#">Kenya 1</a></li>
          <li><a href="#">Kenya 2</a></li>
          <li><a href="#">Kenya 3</a></li>
          <li><a href="#">Kenya 4</a></li>
          <li><a href="#">Kenya 5</a></li>
          </ul>
        </li>
      </ul>
    </li>
  <li><a href="#">Traveling 5</a></li>
  </ul>
</li>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
</ul>
</div>

Then save this widget. And drag it just above the posts widget.

RSS Feed Email