Multi-Level Drop Down Menus for your Blog

­

 

Many of the bloggers
finds difficulty to manage their Navigation Menus because of  numerous labels and links. Due to which their
blog looks dull and messed. Beside this the blog readers also finds difficulty
to find the required labels and links.

So in this post I am going to introduce a Multi
–Level Drop Down menus for blog which will help you to manage numerous labels
and links. Besides this it makes your site/Blog more users friendly and gives
it more professional look. In addition it takes very less space to manage
multiple link .You can view the demo of this Multi-Level Drop Down menu in mine
blog. Follow the given instruction to install multi-level drop down menu in
your blog:

 

1.   Sign
in to blogger
2.   Go
to design>Edit HTML
3.   Find
the given tag (press ctrl + F to open the find box and copy the code to find
box for quick finding)
               ]]></b:skin>
4.Above
that code copy the given code

#nav{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% “Lucida Sans Unicode”, “Bitstream Vera Sans”, “Trebuchet Unicode MS”, “Lucida Grande”, Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
#nav, #nav ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}
#nav a {
display: block;

}
#nav li{
float:left;
padding:0px;
}
#nav li a{
background:#333333 url(“http://3.bp.blogspot.com/-ErcpDus6Um4/TiQ3CGbzQKI/AAAAAAAAAck/a1zxkcnmO-w/s1600/seperator.gif”) bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
#nav li a:link, #nav li a:visited {
color:#FFFFFF;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 15px Georgia, Times New Roman;
}
#nav li a:hover, #nav li a:active {
background: #2580a2 url(“http://1.bp.blogspot.com/-Ym9HskBa5-A/TiQ3AjQszCI/AAAAAAAAAcc/TcSyS7tYKEk/s1600/hover.gif”) bottom center no-repeat;
color: #fff;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background:url(‘http://2.bp.blogspot.com/-YWwCAfR5NgA/TiQ2_sKD7EI/AAAAAAAAAcY/t5vgkpOeW0o/s1600/sub_sep.gif’) bottom left no-repeat;
color: #fff;
width: 205px;
text-transform: Titlecase;
float: none;
margin: 0;
padding: 7px 10px;
font: normal 14px Georgia, Times New Roman;
}
#nav li li a:hover, #nav li li a:active {
background:#2580a2 url(‘http://3.bp.blogspot.com/-9wJBRzc6_2E/TiQ3BO0GtEI/AAAAAAAAAcg/5UrgEwnBHYc/s1600/hover_sub.gif’) center left no-repeat;
color: #fff;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
background:#333333;
z-index:200;
position: absolute;
left: -999em;
height: auto;
width:225px;
margin: 0;
padding: 0;
border:0px;
}
#nav li ul a {
width: 225px;
display:block;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
#nav p{
clear:left;
}

5.Save your template Go to design
  • ·       Click
    on  Page Elements
  • ·       Then  Add a gadget and choose HTML/java script

 

6.Copy and Paste the given code(Edit the link
portion )

<div id=’nav’>
<ul>
<li class=’selected’><a href=’/’>Home</a></li>
<li><a href=’#’ id=’current’>Software Section</a>
<ul>
<li><a href=’ http://sabinbhatta.blogspot.com/2009/08/my-article.html ‘>Download Software</a></li>
<li><a href=’ http://sabinbhatta.blogspot.com/search/label/software’>Software and their uses</a></li>

</ul>
</li>
<li><a href=’ http://sabinbhatta.blogspot.com/search/label/IT%20News ‘>IT News</a></li>

<li><a href=’#’>Tips and Tricks Section</a>
<ul>
<li><a href=’ http://sabinbhatta.blogspot.com/search/label/BLogging%20Tips ‘>Blogging Tips</a></li>
<li><a href=’ http://sabinbhatta.blogspot.com/search/label/Tricks ‘>Computer Tips and Tricks </a></li>
</ul>
</li>
<li><a href=’#’ id=’current’>Entertainment Section</a>
<ul>
<li><a href=’http://sabinbhatta.blogspot.com/2009/08/videos_19.html’>Watch online Nepali Tv</a></li>
<li><a href=’http://sabinbhatta.blogspot.com/2011/02/ujaaylo-fm.html’>Listen Online Nepali FM </a></li>
<li><a href=’http://sabinbhatta.blogspot.com/2011/02/sayapatri-fm.html’>Play Online Games</a></li>
</ul>
</li>
<li><a href=’#’>Tools</a>
<ul>
<li><a href=’http://sabinbhatta.blogspot.com/2009/08/amazing-video.html’>Type in Nepali</a></li>
<li><a href=’#’>HTML Encoder/Decoder</a></li>

</ul>
</li>

<li><a href=’#’>Others</a>
<ul>
<li><a href=’http://sabinbhatta.blogspot.com/search/label/Biography’>Biography of personalities </a></li>

</ul>
</li>

</ul>
</div>

</div>

 

7.    Go
to design>Edit HTMl
  • ·       Find </head>tag (press ctrl + F to open the find box and copy the code to find
    box for quick finding)

 

8.Copy the given Code Before above tag

<!–[if lte IE 7]>

<script type=’text/javascript’>
//<![CDATA[
sfHover = function() {
var sfEls = document.getElementById(“Nav”).getElementsByTagName(“LI”);
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=” sfhover”; }
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(” sfhoverb”), “”);
}
}
}
if (window.attachEvent) window.attachEvent(“onload”, sfHover);
//]]>
</script>
<![endif]–>
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js’ type=’text/javascript’/>

 

This above drop down is supported by all the modern
browsers like:-Opera,Google Chrome,Mozilla firefox etc and even the browsers
having compatibility problem like:- Internet Exporer-7 as well as Internet
Explorer-6.
Please
Comment regarding this post.Feel free to comment if you have any problem or
views regarding any post……

You may also like...

7 Responses

  1. Anonymous says:

    Nice post……..keep it up

  2. Crazyissac says:

    i cannot reach to the submenus….why ? i hv follow all the steps on above

  3. sabin says:

    @crazyissac i think you have made some mistake while implementing this tweak…….try one more time,you will get this submenu in your blog….you may leave your url of your blog so that i can have a look to your template and can help you.

  4. Devesh says:

    oye the drop down lists of your are been copied in my blog..how to make drop downs of my blog list options????

  5. sabin says:

    @Devesh All you need to do is the just edit the link portion and save it……for example
    <li><a href='your Link here'>your word here</a></li>

  6. Devesh says:

    eee…its not working

  7. Devesh says:

    the drop downs are not coming in the way its coming in ur blog …its coming in a stable state… very irritating..tell me the solution

Leave a Reply

Your email address will not be published. Required fields are marked *