We all do visit google.com page hundreds times in a day, may be more than that to find anything on web. You must be aware of new design changes throughout all google products. The main attraction of these changes is the black colored top navigatio
n bar, which consists links like “+You”, “Web”, “Images”, “Photos” etc.
In this tutorial, I wil help you to create a black colored top navigation menu like you see on google’s home page. I got few requests from you readers which encouraged me to design it for you. Let’s see what we are going to design in the screen shot below:
Step 1: CSS Styling
body {
margin:0 auto;
}
/*--navigation wrapper--*/
#navwrapper {
margin:0 auto;
background-color: #2D2D2D;
}
#nav {
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
padding-top:4px;
}
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
}
/*--main nav links style--*/
#nav a {
display:block;
padding:7px 7px 7px 7px;
color:#ccc;
text-decoration:none;
}
#nav a.dmenu {
}
#nav a.dmenu:hover {
color:#3366CC !important;
background-color: #fff !important;
}
#nav li {
float: left;
}
#nav li {position: relative;}
/* hide from IE, mac */
#nav li {position: static; width: auto;}
/* end hiding from IE5 mac */
/*--drop down menu styling--*/
#nav li ul {
position: absolute;
display: none;
margin-left:-1px;
padding-bottom:10px;
background-color: #FFFFFF;
border: 1px solid #bbb;
border-top:none;
-moz-box-shadow: 0 0 5px #ddd;
-webkit-box-shadow: 0 0 5px #ddd;
box-shadow: 0 0 5px #ddd;
/*--make it top of all the elements on page, so that it can be visible--*/
z-index:5000;
}
#nav li:hover a, #nav a:focus,
#nav a:active {
padding:7px 7px 7px 7px;
color:#fff;
background:#444;
text-decoration:none;
}
#nav li ul, #nav ul li {
width: 10em;
}
/*--drop down menu styling is different from main nav, strict rule--*/
#nav ul li a {
color: #3366CC !important;
border-right: 0;
}
#nav ul li a:hover {
color:#3366CC !important;
background-color: #eef3fb !important;
border-right: 0;
}
/*--the selected, current item in the navigation menu--*/
#nav a.current{
color:#fff;
font-weight:bold;
background:#2D2D2D;
text-decoration:none;
border-top:2px solid #C33;
padding-bottom:5px; /*--removing 2px border from 7px padding--*/
}
#nav a.current:hover{
padding-bottom:5px; /*--removing 2px border from 7px padding--*/
}
#nav li:hover ul {
display: block;
}
#nav li:hover ul a{
color: #000000;
background-color: transparent;
}
#nav ul a:hover {
background-color: #606060!important;
color: #FFFFFF !important;
}
/*--used in drop down menu items--*/
.menuseprator{border-bottom:1px solid #ddd; margin:10px 0 10px 0;}
/*--for showing down arrow in drop down menu item--*/
.arrowdown{color#eee; font-size:0.5em;}
/*--for the left navigation menu--*/
.floatleft{float:left;}
/*--for the right options navigation menu--*/
.floatright{float:right;}
/*--clear all floating, left and right--*/
.clear{clear:both;}
Step 2: HTML Markup
That’s it, just copy and paste the CSS and HTML code from above and you are done! You can see a live preview on the following link.
Live Demo
You can also checkout our previous post on “How to create google like top navigation?” (white color)
Tested and works with all popular browsers, IE7, IE8, IE9, Safari 4+, Opera 9+, FF 3+, Chrome 8+. Please drop me message in the comments below, if you see issue with any browser. Suggestions and feedback are always welcome to improve.
