Somedays ago, someone ask me about how to create dropdown navigation menu with sub menu like on this blog. To create dropdown navigation menu with sub menu on your template is not too difficult, but because each template is different, whether it is the size of template, Widget placing technique, or anything else, you will need a little adjustment to the code or script given. To make it easy, I use my own source code in this tutorial. You just need to follow the description below and make a little adjustment:
- Login to blogger with your ID
- Click Layout
- Click on Edit HTML
- Before you edit your template, I suggest to download it first to anticipate if you make a mistake when editing your template code.
- Search For : ]]></b:skin> and add these Css codes. You may need to adjust the width, color, and the url image with yours because the character of each template is different.
- After that, search for this codes
- Click Preview and Save Template if its working fine. That's it.
/* ----- NAVBAR MENU ----- */
#NavbarMenu {
width: 980px;
height: 35px;
background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipXQXLEbRAdGhznN1f47HgCjuXiGNjM7XjRiyq6O1fFW5-vqc7XVrbrtSNmAgzaqYFUYS0caiNR8ZouabzpyPkbXVITFlJB8q8h5yYz47oAsu-pY7NamSeLo1X7I_fB3TMPbmIYbFByB31/s800/navbar.gif) repeat-x top;
color: #3D81EE
margin: 0 auto 0;
padding: 0;
font: bold 11px Arial, Tahoma, Verdana;
border-top: 1px solid #AFAFAF;
border-bottom: 1px solid #FFFFFF;
}
#NavbarMenuleft {
width: 680px;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #3D81EE;
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:#99C9FF;
color: #3D81EE;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #3D81EE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipXQXLEbRAdGhznN1f47HgCjuXiGNjM7XjRiyq6O1fFW5-vqc7XVrbrtSNmAgzaqYFUYS0caiNR8ZouabzpyPkbXVITFlJB8q8h5yYz47oAsu-pY7NamSeLo1X7I_fB3TMPbmIYbFByB31/s800/navbar.gif) repeat-x top;
width: 150px;
color: #000;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #99C9FF;
border-left: 1px solid #99C9FF;
border-right: 1px solid #99C9FF;
font: normal 14px Georgia, Times New Roman;
}
#nav li li a:hover, #nav li li a:active {
background: #99C9FF;
color: #3D81EE;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#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;
}<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YourBlog Title (Header)' type='Header'/>
</b:section>
</div><div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://hyperjadulz.blogspot.com/search/label/News'>News</a></li>
<li><a href='http://hyperjadulz.blogspot.com/search/label/All%20Software'>Software</a>
<ul>
<li><a href='http://hyperjadulz.blogspot.com/search/label/Anti%20Virus%20Software'>Antivirus</a></li>
<li><a href='http://hyperjadulz.blogspot.com/search/label/Audio%20and%20Video%20Software'>Audio and Video</a></li>
<li><a href='http://hyperjadulz.blogspot.com/search/label/Desktop%20Enhancements'>Desktop Enhancements</a></li>
<li><a href='http://hyperjadulz.blogspot.com/search/label/Graphic%20and%20Web%20Design'>Graphic and Web Design</a></li>
<li><a href='#'>Internet</a>
<ul>
<li><a href='http://hyperjadulz.blogspot.com/search/label/Dial-up%20and%20Connectivity'>Dial-Up nConnectivity</a></li>
<li><a href='http://hyperjadulz.blogspot.com/search/label/Internet%20Security%20and%20Spyware'>Security and Spyware</a></li>
<li><a href='http://hyperjadulz.blogspot.com/search/label/Internet%20Utilities'>Utilities</a></li>
</ul>
</li>
<li><a href='http://hyperjadulz.blogspot.com/search/label/System%20Utilities'>System Tools</a></li>
<li><a href='http://hyperjadulz.blogspot.com/search/label/Tools%20and%20Utilities'>Others</a></li>
</ul>
</li>
<li><a href='http://hyperjadulz.blogspot.com/search/label/Free%20Blogger%20Template'>Template</a>
<ul>
<li><a href='http://hyperjadulz.blogspot.com/search/label/New%20Blogger%20Template'>New Blogger Template</a></li>
<li><a href='http://hyperjadulz.blogspot.com/search/label/Classic%20Blogger%20Template'>Classic Blogger Template</a></li>
</ul>
</li>
<li><a href='http://hyperjadulz.blogspot.com/search/label/TiPs%20and%20TriCk'>Tips and Trick</a></li>
</ul>
</div>
</div> <!-- end navbar -->Don't forget to change the names and links with yours in above codes.I hope you would like this navigation menu for sure. If you have any question about it, just leave a comments below.
Thank you very much for the great insight and we really appreciate the time you took to write this post.Definitely a great post.
ReplyDeletewebsite design