Google recently updated its all product with new design and also navigation menu in the top of the header. Most of the developers and me too likes google’s new nav menu and want to install this menu style to my blog. The simple code to add Google style navigation menu to header for blogspot user.

For Blogspot users:

1. Sign in to blogger.com

2. Go to design and Edit HTML (Note: Download template xml file with download full template)

3. Find  ]]></b:skin> and paste below code to above it.

Code with custom left Search bar:

#c4t_topbar { height: 30px; background: #2d2d2d; width:100%; }
#c4t_access { display: block; float: left; }
#c4t_access .menu-header,div.menu { font: 13px/27px Arial,sans-serif; margin-left: 4px; width: 960px; }
#c4t_access .menu-header ul,div.menu ul { list-style: none; margin: 0; }
#c4t_access .menu-header li,div.menu li { float: left; position: relative; }
#c4t_access a { color: #ccc; display: block; height: 29px; line-height: 30px; text-decoration: none; padding: 0 10px; }
#c4t_access ul ul { box-shadow: 0 3px 3px rgba(0,0,0,0.2); -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2); display: none; position: absolute; top: 38px; left: 0; float: left; width: 180px; z-index: 99999; }
#c4t_access ul ul li { min-width: 180px; }
#c4t_access ul ul ul { left: 100%; top: 0; }
#c4t_access ul ul a { background: #f1f2f4; line-height: 1em; width: 160px; height: auto; padding: 10px; }
#c4t_access li:hover > a,#c4t_access ul ul :hover > a { background: #444; background: #4c4c4c; color: #fff; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }
#c4t_access ul li:hover > ul { display: block; }
#c4t_access ul li.current_page_item > a,#c4t_access ul li.current-menu-ancestor > a,#c4t_access ul li.current-menu-item > a,#c4t_access ul li.current-menu-parent > a,* html #c4t_access ul li.current_page_item a,* html #c4t_access ul li.current-menu-ancestor a,* html #c4t_access ul li.current-menu-item a,* html #c4t_access ul li.current-menu-parent a,* html #c4t_access ul li a:hover { height: 28px; line-height: 27px; border-top: 2px solid #DD4B39; color: #FFFFFF; font-weight: bold; }
/* Google Search Navbar*/
#google-search {
width:175px;
height:19px;
float:right;
moz-border-radius:10px 10px 10px 10px;border-radius:10px;border:3px solid #B1C3FC;margin:5px 0   0;padding:1px;background-color:#F1F4FE;
display:block;
margin:5px 5px 0 0;
}
#google-search form {
float:left;
}
img.magnify {
position:relative;
top:7px;
left:-5px;
display:none;
}
#google-search input[type="text"] {
float:left;
width:150px;
font-size: 12px;
border:1px solid #186F9A !important;
font-family:Arial;
padding:2px 10px !important;
margin:1px 0 0 0;
}
#google-search input[type="submit"] {
display:none;
}

Code without Search Bar:

#c4t_topbar { height: 30px; background: #2d2d2d; width:100%; }
#c4t_access { display: block; float: left; }
#c4t_access .menu-header,div.menu { font: 13px/27px Arial,sans-serif; margin-left: 4px; width: 960px; }
#c4t_access .menu-header ul,div.menu ul { list-style: none; margin: 0; }
#c4t_access .menu-header li,div.menu li { float: left; position: relative; }
#c4t_access a { color: #ccc; display: block; height: 29px; line-height: 30px; text-decoration: none; padding: 0 10px; }
#c4t_access ul ul { box-shadow: 0 3px 3px rgba(0,0,0,0.2); -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2); display: none; position: absolute; top: 38px; left: 0; float: left; width: 180px; z-index: 99999; }
#c4t_access ul ul li { min-width: 180px; }
#c4t_access ul ul ul { left: 100%; top: 0; }
#c4t_access ul ul a { background: #f1f2f4; line-height: 1em; width: 160px; height: auto; padding: 10px; }
#c4t_access li:hover > a,#c4t_access ul ul :hover > a { background: #444; background: #4c4c4c; color: #fff; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }
#c4t_access ul li:hover > ul { display: block; }
#c4t_access ul li.current_page_item > a,#c4t_access ul li.current-menu-ancestor > a,#c4t_access ul li.current-menu-item > a,#c4t_access ul li.current-menu-parent > a,* html #c4t_access ul li.current_page_item a,* html #c4t_access ul li.current-menu-ancestor a,* html #c4t_access ul li.current-menu-item a,* html #c4t_access ul li.current-menu-parent a,* html #c4t_access ul li a:hover { height: 28px; line-height: 27px; border-top: 2px solid #DD4B39; color: #FFFFFF; font-weight: bold; }

The tree menu will present a new look even a tiny element is modified, which brings exciting to website. With Sothink Tree Menu, the beginners can customize the styles in intuitive interface with ease; it provides image library of various types to design menu tree style; and the outside files can be imported to tree menu to form your own style.

Let’s compare some tree menus, and view the magic about tree menu style:

1. Set size to get another tree menu, which is completely different menu tree.
   (Enter “Global Settings > General” to set width and height for the whole tree menu)
   
2. Set properties for tree menu and its items to build a totally different web menu, these properties include background, color, font, etc.
   (Select node in  Tree panel, and enter  “Node Settings > Font” or “Node Settings  > Background” panel to set their properties.)
   
3. Add graphics to customize button, line, arrow and cursor images.
   (Select node or sub-tree; enter the related option in “Global Settings” panel to set image properties.)

   

4. Disable some nodes in tree menu, which needs to be changed from time to time.
   (Check the selected nodes, and enter   “Node Settings > Advanced” to set this function)

   

5. Tree menu expands its sub-tree with dynamic and visual effect after mouse interacts with menu tree, which gives the visitors deep impression. The program presets the various effects for showing or hiding sub-tree respectively, effect speed can be set too.

View more tree menu samples to get inspiration; download tree menu builder to DIY your tree menu with customizable menu style.

First at all, check out stunning tree menu samples in IE 9 Beta:

Create navigation tree menu with Sothink Tree Menu on Window 7, you can:

• Generate cross-browser tree menu. (Support IE 9 Beta, Google Chrome, FireFox 3, Opera 9.5 and Safari 3.1!)
• Get SE friendly JavaScript Tree menu.
• Create database tree menu with ASP, PHP and JSP.
• Build functional tree menus, including sound tree menu, highlight menu tree and control tree menu by external text or image.
• Apply preset special effect to your tree menu.
• Fully customize the tree menu style, like font, icon, button, background, line, border, cursor, tool tip, etc.
• Edit tree menu in HTML editors directly.

View all features about tree menu builder >>

Download Sothink Tree Menu to build navigation tree menu on Windows 7, and view this menu tree in IE 9 Beta.

DHTML Menu

What is Sothink DHTML Menu?
Sothink DHTML Menu is a drop down menu builder, which assistant you in making cross-browser menu, fast-loading menu and SE friendly menu in clicks. 100+ templates & 30 styles included; integration with main-stream web editors; support database driven menus; fully customize menu style.

Main features:
* Full cross-browser compatibility, support IE9 beta.
* Seamlessly integrates with DW, FP, EW and GoLive.
* Supports database driven navigation menu with ASP, PHP, JSP, ASP.NET, ColdFusion.
* Creates functional navigation menu, such as tab menu, highlight menu, scrolling menu, cross-frame menu, multi-level/multi-column menu, custom menu, floating menu, etc.
* Offers 100 + free templates, 30+ preset styles; and provides image library for menu design.
* Publish wizard guides you to publish the drop down menu to website step by step.
* Customize web menu properties, like font, icon, background, border, cursor, tool tip, etc.

Check some samples of DHTML Menu:

1. Anchor chain drop down menu

2. Grass green web menu

3. Notepad navigation menu

Download Sothink DHTML Menu to create a well cross-browser menu.

Drop-down menus do in fact organize content into small and uncluttered elements, if structured correctly, drop-down menus can be a great navigation tool, while still being a usable and attractive design feature.

How to create a stunning and effective drop-down menu? Here are some tips and ways to make this controversial element more usable.

• Add a Hover Effect to Menu Options

As the navigation itself affects the usability of the drop-down menu, adding a hover effect to the menu options is good to make the menu work better with the drop-down menus. In this case, the user will be easily to find exactly which button in the navigation menu is extending from, and it is much helpful.

You can see the example below, which shows a strong hover effect on the navigation options, and it contributes to support the drop-down menu.

P.S. Such kind of drop-down menus can be easily created by Sothink DHTML Menu.

• Extend the Deactivation of a Hover

You had better avoid a hover structure and many levels in a drop-down menu, but it is restricted to the navigation you are trying to create, if so, just try your best to improve the usability of a hover and multi-level menu!
Please check the next drop-down menus, which have multiple levels with a wide focus range. It means that the user have to move the mouse pointer some distance away from the menu to close it.

If the user moves the pointer away from the menu, the drop-down menus will mostly disappear soon. So, please delay its disappearance or get a click function that requires users to click outside the menu area to close the drop-down menu like the Lightbox does.

• Keep off Multi Levels in a Drop-Down

It is unwise that one creates drop-down menus in terms of usability. For example, a hover menu structure will make the user lose focus on the menus once the user moves away from the mouse pointer.
The picture below shows the unpleasant hover menus. Apparently, it is hard to use because you have to start from the top whenever even slightly losing focus of the menu with the mouse pointer. To be worse, the tooltip there will hamper the navigation.

• Throw out Tooltips

Although it is certain that little details impact usability when you design drop-down menus, you’d better realize the presence or lack of tooltips, for the tooltips usually may get in the way and sometimes even block the first list item in the drop-down menu. So please remove tooltips from buttons with drop-down menus.
Take the website below for example, the drop-down menus take up a large part in the page, which let the tooltip block many listed items and make navigation much more difficult.

• Do Seamless Transitions

Many websites make such a mistake: in order to attract the more visitors, they make the websites look brilliant but with the heavy drop-down menus, which take more than an instant to load upon the hover. However, a good drop-down menu ought to appear seamlessly and without interruption once it appears, otherwise, it will be unpractical.
So transition effects are the better way to avoid it happens. It is cool that throw in a wipe down or fade in for the drop-down menu instead of the simply appearing menu, but please make sure the transition quick and not disruptive.
Observe the image below, you will find the drop-down menu is pretty clear with a seamless transitions.

Black menu is color joker, it is widely used for the various website colors which ranges from light to dark, the classic color includes black&white, red&black; black menu conveys the sense of fashion, business, reliance; black menu is plain and high capacity to contain almost all URL links to reach the target page quickly. Black menu is absolutely the popular menu, let’s view the excellent black menus from the famous companies:

Adobe

Sony

Nero

Adobe Menu – Features:

In this Adobe menu, menu background and website background are the same, which makes you feel harmonious. At the first sight, just plain text links are on website, but you will see so many menu items after the mouse is over on the top adobe menu; in popup menu items, some items are classified into several categories by Bold and big-size font; the item with link guides the visitors to right web page with one click.