I have been working a lot more with jQuery lately, so I thought I would show you how to do the simple fade in or fade out jQuery hover effect that occurs to the navigation when you go to the Google homepage. You know the one that I am talking about, its occurs when your mouse goes over the page of the google homepage, all the navigation at the top appears.
For the first example, I will show you how to make the fade in jQuery hover effect. Hover over the box below to see the effect.
The rest of the content of the page
To do this, first place this jQuery code in the <head></head> section of your html file.
1 2 3 4 5 6 7 8 9 10 11 | //the first line gets the latest jquery scripts <script src="http://code.jquery.com/jquery-latest.js"></script> //this function is called when the page is ready <script> $(document).ready(function() { //first hide the div with the id of googlenav $("div#googlenav").hide(); //then when you rollover the specified div fade in the googlenav $("div#googlediv").hover(function(){$("div#googlenav").fadeIn('slow');}); }); </script> |
Then add this html code into the <body></body> of your html document
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div id="googlediv" style="width:500px; height:200px; border:1px solid #ffffff;"> <div id="googlenav"> <ul> <li><a href="#">Web</a></li> <li><a href="#">Images</a></li> <li><a href="#">Videos</a></li> <li><a href="#">Maps</a></li> <li><a href="#">News</a></li> <li><a href="#">Shopping</a></li> <li><a href="#">Gmail</a></li> </ul> </div> <div style="margin:0px auto; width:500px; text-align:center;"> <p> </p><p>The rest of the content of the page</p> </div> </div> |
You can style the content hover you like, I tried to keep all the links inline like google does. Here is my styling, you can add this in the <head></head> section too.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <style type="text/css"> #googlenav { padding:0px; margin:0px; font-family:Arial, Helvetica, sans-serif; font-size:12px; border-bottom:1px solid #c9d7f1; height:26px; position:absolute; width:500px; } #googlenav ul { padding:3px 0px; margin:0px; padding-left:15px; } #googlenav ul li{ display:inline; padding:0px 3px; margin:0px; } </style> |
Now google fades in their links and navigation when you roll over the page, not a specific div. So if you wanted it to be exactly like that, you would target the page instead of that particular div. So in your jQuery instead of this:
$("div#googlediv").hover(function(){$("div#googlenav").fadeIn('slow');});
You would put this:
$(document.body).hover(function(){$("div#googlenav").fadeIn('slow');});
And style accordingly. Now if you want to fade out in jQuery, instead of fadeIn(), you would use the fadeOut() function. And Remember you don’t have to hide the content first, so the jQuery would look like this.
1 2 3 4 5 6 7 8 9 | //the first line gets the latest jquery scripts <script src="http://code.jquery.com/jquery-latest.js"></script> //this function is called when the page is ready <script> $(document).ready(function() { //then when you rollover the specified div fade in the googlenav $("div#googlediv").hover(function(){$("div#googlenav").fadeOut('slow');}); }); </script> |
An example of the fadeOut function is below using the code above.
The rest of the content of the page
That’s really about it, if this helps you out please leave a comment.
Cya
