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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidXC8ZHHOYLGdroE8YVSH5Of8Fn650Z4wZGquYgMD-tXY4HkWXhf18TI5ZmN2NDDjlAvZ5tRQacC_NyBJzvBGh6TKYo2OCgu6Y8WKxGAEnE907AcZNRQwW1oEXn58Ma-XnvKBi8o_H0FAw/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL4jHKwvepnCP84s4QLzQdf9wc8z0BoYuK9OrFq3TDJbesEHvO1_QYOsmarKzEmNTI2iNlBGwkIxE-erJ7EqyqZXB6nK7196wBuxKODrYcRzQLhLF7k5jWuiW2Z3RfcpYiO8OhGIfdL3XU/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihRNiaigyncguZRhMkd7SkZVNcijJ1kdDnDdNvEsP43dav_9qmk1UwqVEjMYSg6PyKuHDjmbfG1_1gkS-4afz5LCTEMgp4g29IuOO4C7uM-TIojguE9iOUB-leX8m7y1AbIISNIbt4lb0C/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjML_K1rSKoG4rWbCdWQAMYZZ9R6j5NZUw7N7WxiGzWakyGBPNFOZB2CjwRMNO8dV1yHY4-Pl96p-44Ea5Irap0NiExFvC7ZXFWtlVTMQF71ToCKs3zonVhibG6Y2Po_XwGwgE5ihg2N1uO/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
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……
No comments: