BLACK COLOURED TOP NAVIGATION BAR LIKE GOOGLE

We always visit google.com hundred and thousands times daily and we all are just aware of its new design. So in this article,I am discussing about its BLACK COLOURED TOP NAVIGATION BAR.It is the main attraction now-a-days which consists links like “+You”, “Web”,“Images”, “Photos” etc.
                                                      In this tutorial, I will help you to create a black colored top navigation menu like you see on google’s home page. 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 CODING


<div id="navwrapper">

<ul id="nav" class="floatleft">
  <li><a href="#">+ Sanchit</a></li>  
<li><a class="current" href="#">Web</a></li>
<li><a href="#">Images</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Maps</a></li>
<li><a href="#">Gmail</a></li>
<li><a href="#">News</a></li>

<li><a class="dmenu" href="#">More <span class="arrowdown">▼</span></a>
<ul>
<li><a href="#">Translate</a></li>
<li><a href="#">Books</a></li>
<li><a href="#">Schoolar</a></li>
<li><a href="#">Blogs</a></li>
<li class="menuseprator"></li>
<li><a href="#">Youtube</a></li>
<li><a href="#">Calender</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Documents</a></li>
<li><a href="#">Sites</a></li>
<li><a href="#">Groups</a></li>
<li class="menuseprator"></li>
<li><a href="#">Even More »</a></li>
</ul>

</li>

</ul>

<ul id="nav" class="floatright">
  <li><a href="#">sasanchit1@gmail.com</a></li>  
<li><a href="#">Settings</a></li>
<li><a href="#">Logout</a></li>
</ul>

<br class="clear">

</div>

Now in the head tag,write style tag also and then copy css coding.After it, write body tag and copy html coding.Now save this with .html extension and open it in chrome,explorer etc. Here you get what you want.


ALTERNATIVE EXAMPLE :

Here I will show you full coding so that easily you will get and surely you all become crazy because it is too long. So just copy and paste following coding :

<html>
<head>

<style>
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;}
</style>
</head>
<body>
<div id="navwrapper">

<ul id="nav" class="floatleft">
<li><a href="#">+ Sanchit</a></li>
<li><a class="current" href="#">Web</a></li>
<li><a href="#">Images</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Maps</a></li>
<li><a href="#">Gmail</a></li>
<li><a href="#">News</a></li>

<li><a class="dmenu" href="#">More <span class="arrowdown">▼</span></a>
<ul>
<li><a href="#">Translate</a></li>
<li><a href="#">Books</a></li>
<li><a href="#">Schoolar</a></li>
<li><a href="#">Blogs</a></li>
<li class="menuseprator"></li>
<li><a href="#">Youtube</a></li>
<li><a href="#">Calender</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Documents</a></li>
<li><a href="#">Sites</a></li>
<li><a href="#">Groups</a></li>
<li class="menuseprator"></li>
<li><a href="#">Even More »</a></li>
</ul>

</li>

</ul>

<ul id="nav" class="floatright">
<li><a href="#">sasanchit1@gmail.com</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Logout</a></li>
</ul>

<br class="clear">

</div>
</body>
</html>

OUTPUT ::

• + Sanchit
• Web
• Images
• Video
• Maps
• Gmail
• News
• More ▼
  • Translate
  • Books
  • Schoolar
  • Blogs
  • Youtube
  • Calender
  • Photos
  • Documents
  • Sites
  • Groups
  • Even More »

• sasanchit1@gmail.com
• Settings
• Logout

IF FURTHER ANY PROBLEM OCCURS,THEN e-mail or comment me..............