How To Add Horizontal Dropdown Menu | Blogger JQuery Tips

If you want to add horizontal dropdown menu in template, follow the following blogger jquery tips. Recently I have written two posts about 3D horizontal linklist and Horizontal sub navigation. Before reading this, you may visit above posts. Lets start step by step on how to add horizontal dropdown menu.
1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Scroll down to where you see </head>tag .
3.Copy below code and paste it just before the </head> tag .

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

$(&quot;ul.subnav&quot;).parent().append(&quot;<span/>&quot;); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav

$(&quot;ul.topnav li span&quot;).click(function() { //When trigger is clicked...

//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find(&quot;ul.subnav&quot;).slideDown(&#39;fast&#39;).show(); //Drop down the subnav on click

$(this).parent().hover(function() {
}, function(){
$(this).parent().find(&quot;ul.subnav&quot;).slideUp(&#39;slow&#39;); //When the mouse hovers out of the subnav, move it back up
});

//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass(&quot;subhover&quot;); //On hover over, add class &quot;subhover&quot;
}, function(){ //On Hover Out
$(this).removeClass(&quot;subhover&quot;); //On hover out, remove class &quot;subhover&quot;
});

});
</script>
<style type='text/css'>
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 100%;
background: #222;
font-size: 1.2em;
background: url(http://1.bp.blogspot.com/_4HKUHirY_2U/SuvG9uqdygI/AAAAAAAAAGg/RGkds76x-Ks/topnav_bg.gif) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base--*/
}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(http://2.bp.blogspot.com/_4HKUHirY_2U/SuvHEn2GZ9I/AAAAAAAAAGo/s4ncczdnOd0/topnav_ho ver.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(http://2.bp.blogspot.com/_4HKUHirY_2U/SuvHKqBeOXI/AAAAAAAAAGw/qGYlY4ckLWc/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Create bevel effect--*/
border-bottom: 1px solid #444; /*--Create bevel effect--*/
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(http://3.bp.blogspot.com/_4HKUHirY_2U/SuvHPYoc82I/AAAAAAAAAG4/3DDzBwklYpw/dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #222 url(http://3.bp.blogspot.com/_4HKUHirY_2U/SuvHPYoc82I/AAAAAAAAAG4/3DDzBwklYpw/dropdown_linkbg.gif) no-repeat 10px center;
}
#header img {
margin: 20px 0 10px;
}
</style>



Please host image here for free.


You can change width,height,color,... as your choice.


4.Now go to Layout-->Page Element and click on "Add a gadget".


5.Select "html/java script" and add the code given below and click save.

<ul class="topnav">

<li><a href="#">Home</a></li>
<li>
<a href="#">Tutorials</a>
<ul class="subnav">
<li><a href="#">HTML Tutorials</a></li>
<li><a href="#">CSS Tutorials</a></li>
<li><a href="#">PHP Tutorials</a></li>
<li><a href="#">SQL Tutorials</a></li>
<li><a href="#">jQuery Tutorials</a></li>
</ul>
</li>
<li>
<a href="#">Templates</a>
<ul class="subnav">
<li><a href="#">1 Column</a></li>
<li><a href="#">2 Column</a></li>
<li><a href="#">3 Column</a></li>
<li><a href="#">4 Column</a></li>
<li><a href="#">Premium</a></li>
<li><a href="#">Buy Now</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Subscribe</a></li>
<li><a href="#">Contact Us</a></li>

</ul>



I hope you like this. Happy blogging......

Comments Post a Comment

joshef - April 19, 2010

SEO India great seo blog. keep it up.

Adit Creation - May 27, 2010

Nice blog it is maintained good and also have good post about Search Engine Optimization and Internet Marketing.

admin - July 29, 2010

Congratulations to these guides, I have been really helpful! or found other interesting guides for Blogger and Wordpress Here www.mysensetechnology.com Keep it up! !

Arie - August 09, 2010

Thank You Russel..I am new and I already 2 times to tried but declined...please give your suggest..

Russel - August 10, 2010

Hi Arie, Could you please tell me the details what you are facing problem? I will be happy to help you.

Search Engine Optimization - October 21, 2010

I think that is an interesting point,it made me think a bit about your SEO Blog.Thanks for this.

author - December 01, 2010

the dropdown part is not working..pls help

U.N.K.N.O.W.N - December 27, 2010

Hi there,it seems the drop down menu code has some conflicts with the content slider in my blog...Can help me out? :S

http://wshienrun.blogspot.com/

Leave a Comment