How to add Drop Down Navigational Menubar with Submenus to the Blogger blog.

Advertisements

khemarak-កំព្រា asked me about adding Drop Down Navigational Menubar with Submenus to the Blogger blog.on my previous post How to add a horizontal navigation bar or menu to Blogger?

So I just make some modifications to previous code so that it can display drop down menus.

Drop Down Menu is a list of options that display below a menu option.

So here we go.....

Go to Blogger Dashboard >> Layout >> Edit HTML >> Download full Template.

Press CTRL F and search for
]]></b:skin>

now replace it with

#NavbarMenu {

width: 980px;
height: 35px;
background:#e3edf9 url(http://i415.photobucket.com/albums/pp238/Sujeet/navbar3.jpg) 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: #dae8ff;
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:#e7ffb3;
color: #36731b;
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(http://i415.photobucket.com/albums/pp238/Sujeet/navbar3.jpg) repeat-x top;
width: 200px;
color: #d3d3d3;
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: #e3f1ce;
color: #156018;
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;
}

]]></b:skin>

Now look for the following section of code

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>
</b:section>
</div>

Now just bellow that code add following code

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>


<li><a href='http://colorsfromindia.blogspot.com/2008/08/health-wellness.html'>Health News</a></li>


<li><a href='#'>Deseases</a>
<ul>
<li><a href='http://medimania.blogspot.com/search/label/Acne'>Acne</a></li>

<li><a href='http://medimania.blogspot.com/search/label/Breast%20cancer'>Breast cancer</a>
<ul>
<li><a href='http://medimania.blogspot.com/2007/12/stages-of-breast-cancer.html'>Stages</a></li>
<li><a href='http://medimania.blogspot.com/2007/12/signs-symptoms-diagnosis-of-breast.html'>Signs, Symptoms, Diagnosis</a></li>
<li><a href='http://medimania.blogspot.com/2007/12/role-of-surgery-in-breast-cancer.html'>Treatment</a></li>
</ul>
</li>

<li><a href='http://medimania.blogspot.com/search/label/Mesothelioma'>Mesothelioma</a></li>
</ul>
</li>


<li><a href='http://medimania.blogspot.com/search/label/LASIK'>LASIK</a>
<ul>
<li><a href='http://medimania.blogspot.com/2007/08/how-common-are-lasik-complications.html'>Complications</a></li>
<li><a href='http://medimania.blogspot.com/2007/08/lasik-procedure.html'>Procedure</a></li>
<li><a href='http://medimania.blogspot.com/2007/08/reasons-to-undergo-lasik.html'>Adwantages</a></li>
</ul>
</li>
<li><a href='#'>Webmaster's Corner</a>
<ul>
<li><a href='http://www.webmasters-forum.org/index.php'>Webmaster's Forum</a></li>
<li><a href='http://www.free-blogger-help.blogspot.com/'>Blogger Help</a>
<ul>
<li><a href='http://free-blogger-help.blogspot.com/2008/08/list-of-useful-blogger-widgets.html'>Widgets</a></li>
<li><a href='http://free-blogger-help.blogspot.com/2008/07/blogger-templates.html'>Templates</a></li>
<li><a href='http://free-blogger-help.blogspot.com/search/label/Edit%2FCustomize%20Template'>Edit/Customise Template</a></li>
<li><a href='http://free-blogger-help.blogspot.com/search/label/Search%20Engine%20Optimization'>SEO</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

</div> <!-- end navbar -->

Save the Template. Change the Titles and URL's given in second code.

Experiment with values of first code to adjust it with your blog.

UPDATE: jQuery based navigational drop down menu bar for Blogger

Posted in: Edit Customize Template,Navigation Bar

Related Posts