jQuery Top Black Menu Bar of Google Search with Demo

Google

has come up with a new look with the launch of

Google Plus

and one of the prominent changes we can observe is the

black menu bar found on the top of Google Search Page and every other Google product

like

Google Plus

(obviously),

Google reader

, etc. Almost every Google product by now has been integrated with the top black menu bar.

I thought it would be a great idea to make a tutorial on how to create this black menu bar using simple

jQuery

and

CSS

.

Some of the features we are going to cover in this tutorial of making Top Menu Bar found in Google products is :

• Creating the red ribbon like effect for the current page
• creating the drop down menu when
  
  more
  
  button is clicked
• keeping the bar fixed even when the rest of the page is scrolled
• Styling the elements of the menu exactly to those found on Google