Thomas' Interesting Blog

A few weeks ago Google made a change to their menu which is a lot cleaner and integrates with Google+ a bit better. I thought that the menu was quite  cool so I figured that I could probably make a rough copy of it using jQuery and CSS. Here is the result:

The menus fade appropriately. Here is the required markup:

 

Note that I have removed a large number of the list items. You can add these in later. I included jQuery and added the following JavaScript:

$(document).ready(function()
{
 $("#menu-header").click(function()
 {
 $("#container").fadeToggle("fast");
 });
 $("#more").click(function()
 {
 $("#menu2").fadeToggle("fast");
 });
 $("#container").mouseleave(function()
 {
 setTimeout("$(\"#container\").fadeOut(\"fast\");$(\"#menu2\").fadeOut(\"fast\");", 750);
 });
});

View original post 214 more words

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s