Modern technology gives us many things.

How To Add jQuery Horizontal Sub Navigation Menu to Blogger

1 83
1. Login to your blogger dashboard–> Template- -> Edit HTML —-> Proceed and clicked on Expand Widget, then you continue with step, now to find anything in your blogger template html, just hint Ctrl+F to bring out the find button to search for any code of your choice there.
This is how it is going to look like:

2. Now type in the box </head> to search for it, after doing that, just follow the next step .

3. Copy below code and paste it just before the </head> tag .



$(document).ready(function() {

$(&quot;ul#topnav li&quot;).hover(function() { //Hover over event on list item
$(this).css({ &#39;background&#39; : &#39;#1376c9 url() repeat-x&#39;}); //Add background color + image on hovered list item
$(this).find(&quot;span&quot;).show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ &#39;background&#39; : &#39;none&#39;}); //Ditch the background
$(this).find(&quot;span&quot;).hide(); //Hide the subnav
});

});
</script>

Note:
You can change width,height,color,… as your choice.

4. Now go to Layout–> from your dashboard to  “Add a gadget”.

5. Select “HTML and JavaScript” and add one of code below and hint save.

<ul id="topnav">

<li><a href="#">Home</a></li>
<li>
<a href="http://naijaexploits.blogspot.com">NOBLE ICT EXPLOITS ZONE</a>
<span>
<a href="http://naijaexploits.blogspot.com">NOBLE ICT EXPLOITS ZONE
</a> |
<a href="http://naijaexploits.blogspot.com">NOBLE ICT EXPLOITS ZONE
</a> |
<a href="http://naijaexploits.blogspot.com">NOBLE ICT EXPLOITS ZONE
</a>
</span>
</li>
<li>
<a href="#">Tutorials</a>
<span>
<a href="#">HTML</a> |
<a href="#">Java Script</a> |
<a href="#">CSS</a>
<a href="#">jQuery</a>
<a href="#">MooTools</a>
</span>
</li>
<li>
<a href="#">Templates</a>
<span>
<a href="#">1 Column</a> |
<a href="#">2 Column</a> |
<a href="#">3 Column</a> |
<a href="#">4 Column</a> |
<a href="#">Premium</a>
</span>
</li>
<li><a href="#">Subscribe</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Contact</a></li>

</ul>

Then it will look like this:










Disclosure: This page may contain external affiliate links that may result in us receiving a commission if you 
choose to purchase said product. The opinions on this page are our own. We do not receive payment for 
positive reviews.

Subscribe to our newsletter
Sign up here to get the latest news, updates and special offers delivered directly to your inbox.
You can unsubscribe at any time