NECTES Global Media Technology Website.

How To Add jQuery Horizontal Sub Navigation Menu to Blogger

1 80
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: