On July 31, 2011 In User interface with , , , tags

Making of Google Style navigation bar

You all know that web is changing much faster than ever. So, Google also made some tweaking to their formal white and blue navigation bar to a new black and orange navigation bar. I was pretty much surprised when I saw it, then I have tried and figured it out how they made it.

Making of google style navigation bar

STEP 1

Create unordered-list inside a div with a class ‘menu’. Inside every list element we will place on hyperlink as below.

[xml]
<div class="menu">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Whats New!</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Support</a></li>
<div class="clearFloat"></div>
</ul>
</div>
[/xml]

STEP 2

Before the unorder-list is closed there is another div with class ‘clearFloat’ which clear’s both sides from float. So, that we can see the styling done to the class ‘menu’.

STEP 3

You can see on the first li item, there is a class called active. If you want highlight an element you can add class ‘active’ to li.

STEP 4

Here come the styling part. Lets start directly with class ‘menu’

[css]
.menu{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
width:100%;
}
[/css]

Here menu tells font-family, font size and total width of the navigation bar

[css]
.menu ul{
list-style:none;
background:#2d2d2d;
margin:0;
padding:0;
}
[/css]

Inside class ‘menu’ ul has been set to list-style none, filled with background color #2d2d2d slightly lighter than black, margin and padding set to 0.

[css]
.menu li{
display:inline-block;
float:left;
}
[/css]

Now li inside class ‘menu’ has styled to inline-block. So, that items come in a line and li has beeen set to float left to remove the space between li items.

[css]
.menu li:first-child{
margin-left:5px;
}
[/css]

Do you remember first-child. It style only the first element of an item, here we used to style first list item.

[css]
.menu a{
display:block;
padding:10px;
text-decoration:none;
color:#bbbbbb;
border-top:2px solid transparent;
}
[/css]

This is styling for hyperlink we have set it to display block, so that padding will wrap it all around. Text-decoration set to none by default its underline, text color and border set only on the top side. When it’s not hovered it will transparent.

[css]

.menu a:hover,
.menu li.active a{
background:#3d3d3d;
color:#dddddd;
border-top:2px solid #ff4800;
}
[/css]

While the hyperlink is hovered or its active the border-top color would be #ff4800 a little bit of orange and background changes to #3d3d3d

[css]
.clearFloat{
clear:both;
}
[/css]

As I said to clear the float we have used clear both side. I hope you like this tutorial and feel free to leave a comment

4 responses to “Making of Google Style navigation bar”

  1. Anonymous says:

    which could be the code to add a dropdown menu?

  2. Apophys973 says:

    This is exactly what I was looking for ! thx !

    unfortunately, active link does not highlight 🙁
    (only the link marked as “active”)

Leave a Reply

Your email address will not be published. Required fields are marked *