Programming and general geekiness.

Create a Google style menu

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:

Click to view demo

The menus fade appropriately. Here is the required markup:

 
<div id="header">
 <div id="menu">
 <h1 id="menu-header">MyWeb</h1>
 <div id="container">
 <div id="menu-box">
 <ul id="main-menu">
 <li style="background-image:url(logos/google.png)"><a href="http://google.com">Google</a></li>
 <li id="more">More...</li>
 </ul>
 <div id="menu2">
 <ul id="more-column-1">
 <li style="background-image:url(logos/apple.png)"><a href="http://apple.com">Apple</a></li>
 <li style="background-image:url(logos/windows.png)"><a href="http://microsoft.com">Microsoft</a></li>
 </ul>
 <ul id="more-column-2">
 <li style="background-image:url(logos/wii.png)"><a href="http://nintendo.com/wii">Wii</a></li>
 <li style="background-image:url(logos/yahoo.png)"><a href="http://yahoo.com">Yahoo!</a></li>
 </ul>
 <p id="even-more">Even More</p>
 </div>
 </div>
 </div>
 </div>
</div>

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);
 });
});

I won’t bother explaining the JavaScript because it is relatively simple. Here is the enormous CSS that you need to use to make it look cool:

body
{
 margin:0;
 padding:0;
 font-family:sans-serif;
}
#header
{
 background-color:#eee;
 margin:0;
 padding:10px;
}
#container
{
 position:relative;
 display:none;
}
#menu-header
{
 font-family:"Book Antiqua", Garamond, Cambria, serif;
 font-size:35px;
 font-weight:300;
 margin:0;
 color:#aaa;
 cursor:pointer;
}
#menu-box
{
 position:absolute;
 left:20px;
 top:20px;
 font-size:15px;
 color:white;
 margin:0;
 padding:0;
 min-width:200px;
 max-width:600px;
 box-shadow:#aaa 1px 1px 5px; 
}
#menu-box:after
{
 top:-15px;
 right:auto;
 left:40px;
 bottom:auto;
 border-width:0 15px 15px;
 border-color:#2d2d2d transparent;
 content:"";
 border-style:solid;
 width:0;
 display:block;
 position:absolute;
}
#menu-box li
{
 padding-top:10px;
 padding-bottom:10px;
 padding-left:35px;
 background-repeat:no-repeat;
 background-position:left center;
}
#menu-box ul
{
 list-style:none;
 padding:0;
 margin:0;
 float:left;
 width:200px;
}
#main-menu li
{
 background-color:#2d2d2d;
 border-bottom:1px solid #eee;
}
#main-menu a
{
 color:white;
 text-decoration:none;
}
#main-menu-li:last-child
{
 border-bottom:none;
}
#main-menu li:hover
{
 background-color:#333;
}
#menu2
{
 background-color:white;
 color:black;
 width:400px;
 height:100%;
 float:right;
 display:none;
}
#menu2 a
{
 color:black;
 text-decoration:none;
}
#more-column-1
{
 float:left;
}
#more-column-2
{
 float:right;
}
#more-column-1 li
{
 border-bottom:1px solid #eee;
 border-right:1px solid #eee;
}
#more-column-2 li
{
 border-bottom:1px solid #eee;
}
#more-column-1 li:hover, #more-column-2 li:hover
{
 background-color:#eee;
}
#even-more
{
 margin:0;
 padding-top:10px;
 padding-bottom:10px;
 padding-left:35px;
 clear:both;
}
#even-more:hover
{
 background-color:#eee;
}

You could probably add some extra stuff to make it even more cool but to be honest I was happy that it was working.

Advertisements

Comments on: "Create a Google style menu" (3)

  1. You made it yourself?

    I so wanted to be a coder. In fact, I watched some tutorials on css and php. I’m stuck at the basics. I mean, video tutorials don’t really help me. I figured out that I need a teacher in real life who will show me what works how and give me homeworks. 😦 I usually learn for my own but in case of programming, I’m kind of helpless. 😦

Leave a Reply

Fill in your details below or click an icon to log in:

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

%d bloggers like this: