Recreate Google’s new navigation bar in pure CSS
Google raises the ‘bar’
Google rolled out its top navigation bar today, and it now reflects across Gmail, Search, Reader and other Google Apps. In my opinion, the new design looks a lot sleeker and more modern than the old one since it does away with all the old school underlines.
Recreating the Google Navigation in CSS
So let’s develop this new, stylish bar in CSS. Check out the demo below to see what you will be creating.
The markup
Here is the basic markup for the navigation. It’s pretty simple.
<ul class="googleTab"> <li class="active">Home</li> <li>About us</li> <li>Our Services</li> <li>Our Technologies</li> <li>Contact us</li> </ul>
The CSS
Here we have the CSS style for the navigation. You can see that it uses a lot of CSS3 properties.
ul.googleTab { background: #848383; padding:0 5px; font-size:13px; color:#3366cc; overflow:hidden; background:-moz-linear-gradient(0% 100% 90deg,#f5f5f5, #ffffff); background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#f5f5f5)); } ul.googleTab li { float:left; padding:7px 8px; border-top:solid 2px #bad3ea; } ul.googleTab li.active{ border-top: solid 3px #1a54e1; color:#363636; font-weight:bold; } ul.googleTab li:hover { background:#e4ebf8; cursor:pointer; }
The CSS styles and parameters mentioned above are mostly self-explanatory. If you still found it hard to understand any of the parameters, check out my other tutorials which cover this subject in detail: CSS3 Buttons, CSS3 Navigation
I hope that this was both fun and helpful. Enjoy!
hi
when i fix the code, and click on the link, the blue “active” bar still says above “Home” link
how to change?
I’ll try to put this to good use imemdeiatly.
ok, i got it working
but how do i keep the same style, while making the list, into links?
Just add an anchor inside the list tags and the following style to override the anchor’s default ones.
ul.googleTab li a {
color: #36C;
text-decoration: none;
}
This should fix it. Cheers!
I have been playing about with it but can’t seem to change the colour scheme to the updated one. The tab backgrounds seems to be the problem
Do you know what would be really neat?
A clone of Google’s new search results page with a three column layout and control over the grey area under the topbar menu/nav that allows the top three SE’s to be put in place – if you get my drift?
Awesome. Many thanks!
Hey, how do I make it expand the whole way across the browser? Like completely from one side to the other?
I found another similar but much better tutorial at http://wp.me/p1JzvG-bO
THANKS A LOT!!!
Hey,
When I try to implement this on my website it shows up and works fine but with an odd thing happening….near the end of the text on some of the section it shows little circles which is annoying, also how would i make this into a dropdown menu?
Try this link for creating dropdown menu like Google
This works fine for mozilla , firefox and chrome but in internet explorer doesn’t work.
How can i solver ?
It is only for CSS3 compliant browsers.. you would have to implement fixes to make this work in IE.