I got an email request to show us how to create a drop down menu for Blogger platform as the one shown above. The person gave me the screen shot of my site and asked that’s how he wants. lol…
Today, we will learn how to implement a simple multilevel drop down menu to Blogger.
The objective of the tutorial:
1. Create a simple jQuery Menu for Blogger.
2. Menu uses jQuery, JavaScript, CSS and HTML.
3. Menu similar to the one in my site.
4. A professional multi-level drop down menu.
IMPORTANT:
Backup the template before modifying proceeding.
Tutorial to implement the Simple Menu to Blogger:
Step 1. Go to Dashboard > Select Blog > Template > Edit HTML
Step 2. Search (Ctrl+F) for
</head>
Just before </head> paste the following jQuery and CSS codes:
jQuery and JavaScript:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type='text/javascript'>
function iTechColumnnav(){
$("div#iTechColumnnav ul li").mouseover(function() {
$(this).find('ul:first').show();
});
$("div#iTechColumnnav ul li").mouseleave(function() {
$("div#iTechColumnnav ul li ul").hide();
});
$("div#iTechColumnnav ul li ul").mouseleave(function() {
$("div#iTechColumnnav ul li ul").hide();
});
};
$(document).ready(function(){
iTechColumnnav ();
});
</script>The CSS Code:
<style type="text/css">
/*--itechcolumn.com CSS Start--*/
#iTechColumnnav{
width:990px;padding:0; margin:0 auto;
height:32px;
line-height:32px;
background:#046b8a;
text-align:center;
font-weight:bold;
border-bottom:solid 4px #35abe6;
}
#iTechColumnnav ul, #iTechColumnnav ul li{margin:0;
padding:0;list-style:none;}
#iTechColumnnav ul li{
float:left;
display:block;}
#iTechColumnnav ul li a:link, #iTechColumnnav ul li a:visited{
color:#FFF;font-size:13px;font-weight:bold;text-decoration:none;
padding:0 20px 0 6px;
display:block;
}
#iTechColumnnav ul li a:hover{
color:#EBEFF7;
}
#iTechColumnnav ul li ul li{
float:none;
height:30px;line-height:30px;
}
#iTechColumnnav ul li ul li a:link,
#iTechColumnnav ul li ul li a:visited{
color:#444;
font-size:12px;
font-weight:bold;
text-decoration:none;
padding:0 0px;
clear:both;
}
#iTechColumnnav ul li ul li a:hover{
color:#fff;
background:#36c78d;
}
.subnav {
position: absolute;
color:#fff;
width: 160px;
background:#48c7c7;
padding:1px;
border:solid 1px #2E4B88;
border-bottom:solid 4px #2E4B88;
z-index: 1000;
display:none;
line-height:30px;
}
/*--itechcolumn.com CSS Ends--*/
</style>Step 3. Save the Template.
To Make The Simple Menu Appear:
Paste the following code where-ever you wish the message box to appear on Blogger site-
HTML Markup:
<div id=’iTechColumnnav’>
<ul>
<li><a href='http://www.itechcolumn.com'>HOME</a></li>
<li><a href='#'>Menu2</a>
<ul class='subnav'>
<li><a href='#'>Menu2-1</a></li>
<li><a href='#'>Menu2-2</a></li>
<li><a href='#'>Menu2-3</a></li>
<li><a href='#'> Menu2-4</a></li>
<li><a href='#'> Menu2-5</a></li>
</ul>
</li>
<li><a href='#'>Menu3</a>
<ul class='subnav'>
<li><a href='#'>Menu3-1</a></li>
<li><a href='#'> Menu3-2</a></li>
<li><a href='#'> Menu3-3</a></li>
</ul>
</li>
<li><a href='#'>Menu4</a>
<ul class='subnav'>
<li> <a href='#'>Menu4-1</a></li>
<li> <a href='#'> Menu4-2</a></li>
<li> <a href='#'>Menu4-3</a></li>
</ul>
</li>
<li><a href='#'>Menu5</a></li>
<li><a href='#'>Menu6</a></li>
</ul>
</div>
Where the above HTML Code can be pasted?
1. In a HTML/JavaScript gadget.
2. Directly into your Blogger Template HTML. – Add it just after <body> to appear on top of the Blogger page.
Hope you enjoyed trying this tutorial on your site. If you have any doubts, please feel free to comment here or contact me directly. Thanks for reading this tutorial.
Please, don’t forget to give a link back for the work if you used this tutorial on your website. Thanks 
Enjoy
~iTechColumn
The post How To Add A Simple Drop Down Menu For Blogger Blog? appeared first on Itechcolumn.