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(“https://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(“https://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(‘https://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(‘https://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=’ https://sabinbhatta.blogspot.com/2009/08/my-article.html ‘>Download Software</a></li>
<li><a href=’ https://sabinbhatta.blogspot.com/search/label/software’>Software and their uses</a></li>

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

<li><a href=’#’>Tips and Tricks Section</a>
<ul>
<li><a href=’ https://sabinbhatta.blogspot.com/search/label/BLogging%20Tips ‘>Blogging Tips</a></li>
<li><a href=’ https://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=’https://sabinbhatta.blogspot.com/2009/08/videos_19.html’>Watch online Nepali Tv</a></li>
<li><a href=’https://sabinbhatta.blogspot.com/2011/02/ujaaylo-fm.html’>Listen Online Nepali FM </a></li>
<li><a href=’https://sabinbhatta.blogspot.com/2011/02/sayapatri-fm.html’>Play Online Games</a></li>
</ul>
</li>
<li><a href=’#’>Tools</a>
<ul>
<li><a href=’https://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=’https://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=’https://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...