Posts Tagged elements
Coming Soon - Premium WordPress Theme Giveaway To All Our Email Subscribers
Creating The New Top Black Menu Bar Found in Google Search and all its Products
Posted by Praveen Gowda I V in Google Plus, Jquery, Others, Tutorials, Web Design on September 25, 2011
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.
Introducing this menu bar looks like a move by Google to integrate Google Plus with all other Google products.
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
Top Menu Bar Found in Google+
I think the adjacent picture better describes the outcome of this tutorial
Check out the live demo and download the source code below:
|
DOWNLOAD |
LIVE DEMO |
Want to know how this works, then look at the code below:
HTML
| Source Code Of index.html |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Creating Google Plus Top Black Menu Bar Live Demo | http://blog.geotitles.com</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.google_menu.js"></script>
<link rel="stylesheet" type="text/css" href="google_menu.css"/>
<script>
$('document').ready(function(){
$('.menu').fixedMenu();
});
</script>
</head>
<body>
<div class="menu">
<ul>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
<a target="_blank" href="http://plus.google.com">+You</a>
</li>
<!-- Using class="current" for the link of the current page -->
<li class="current">
<a target="_blank" href="http://www.google.co.in/">Web</a>
</li>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
<a target="_blank" href="http://orkut.com">Orkut</a>
</li>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
<a target="_blank" href="http://gmail.com">Gmail</a>
</li>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
<a target="_blank" href="https://www.google.com/calendar">Calendar</a>
</li>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
<a target="_blank" href="https://docs.google.com">Documents</a>
</li>
<li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
<a target="_blank" href="http://picasaweb.google.co.in/home">Photos</a>
</li>
<li><!-- Do not add any class for links with dropdown -->
<a href="#">More<span class="arrow"></span></a>
<!-- Drop Down menu Items -->
<ul>
<li><a href="http://www.google.co.in/reader">Reader</a></li>
<li><a href="https://sites.google.com">Sites</a></li>
<li><a href="http://groups.google.co.in">Groups</a></li>
<li><a href="http://www.youtube.com">YouTube</a></li>
<li>
<div class="mid-line">
</div>
</li>
<li><a href="http://www.google.co.in/imghp?hl=en&tab=wi">Images</a></li>
<li><a href="http://maps.google.co.in/maps?hl=en&tab=wl">Maps</a></li>
<li><a href="http://translate.google.co.in/">Translate</a></li>
<li><a href="http://books.google.co.in">Books</a></li>
<li><a href="http://scholar.google.co.in/">Scholar</a></li>
<li><a href="http://blogsearch.google.co.in">Blogs</a></li>
<li>
<div class="mid-line">
</div>
</li>
<li><a href="http://www.google.co.in/intl/en/options/">even more >></a></li>
<li>
<div class="mid-line">
</div>
</li>
</ul>
</li>
</ul>
</div>
<div align="center">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<h2>THIS IS THE LIVE DEMO OF CREATING GOOGLE LIKE TOP BLACK MENU BAR TUTORIAL AT <a href="http://blog.geotitles.com">HITHERTO WEB LABS</a></h2>
<h2> </h2>
<h2>CLICK HERE TO GO TO THE TUTORIAL LINK TO DOWNLOAD THE SOURCE CODE</h2>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</body>
</html>
CSS
| Source Code Of google_menu.css |
body{
padding:0;
margin:0;
}
.menu{
position:fixed;
top:0;
left:0;
width:100%;
font:13px/27px Arial,sans-serif;
color:#3366cc;
height:30px;
background:#2D2D2D;
}
.menu a:hover{
background-color:#676767;
color:#CCCCCC;
}
.menu a{
text-decoration:none;
padding:6px 8px 7px;
color:#CCCCCC;
outline:none;
}
.menu ul{
list-style:none;
margin:0;
padding:0 0 0 10px;
}
.menu ul li{
padding:0;
float:left;
}
.menu ul li ul li{
padding:0;
float:none;
margin:0 0 0 0px;
width:100%;
}
.menu ul li ul{
position:absolute;
border:1px solid #C3D1EC;
/*box-shadow*/
-webkit-box-shadow:0 1px 5px #CCCCCC;
-moz-box-shadow:0 1px 5px #CCCCCC;
box-shadow:0 1px 5px #CCCCCC;
margin-top:-1px;
display:none;
padding:0px 16px 0px 0;
}
.active ul{
display:block !important;
}
.single ul{
display:block !important;
}
.active a{
background-color:white;
border:1px solid #C3D1EC;
border-bottom:0;
/*box-shadow*/
-webkit-box-shadow:0 -1px 5px #CCCCCC;
-moz-box-shadow:0 -1px 5px #CCCCCC;
box-shadow:0 -1px 5px #CCCCCC;
display:block;
height:29px;
padding:0 8px 0 8px;
position:relative;
z-index:1;
color:#3366CC;
}
/*Styling for the link of the current page*/
.current a{
background-color:#2D2D2D;
border-top:2px solid #DD4B39;/*red ribbon at top*/
border-bottom:0;
display:block;
height:25px;
padding:0 8px 0 8px;
position:relative;
z-index:1;
color:#FFFFFF;
font-weight:bold;
}
.active a:hover{
background-color:white;
color:#3366CC;
}
.active ul a:hover{
background-color:#e4ebf8;
}
.active ul a{
border:0 !important;
/*box-shadow*/
-webkit-box-shadow:0 0 0 #CCCCCC;
-moz-box-shadow:0 0 0 #CCCCCC;
box-shadow:0 0 0 #CCCCCC;
border:0;
width:100%;
}
.arrow{
border-color:#C0C0C0 transparent white;
border-style:solid dashed dashed;
margin-left:5px;
position:relative;
top:10px;
}
.mid-line{
background-color:#FFF;
border-top:1px solid #e5e5e5;
font-size:0;
}
Javascript
| Source Code Of jquery.google_menu.js |
$(function ($) {
$.fn.fixedMenu = function () {
return this.each(function () {
var menu = $(this);
//close dropdown when clicked anywhere else on the document
$("html").click(function () {
menu.find('.active').removeClass('active');
});
menu.find('ul li > a').bind('click', function (event) {
event.stopPropagation();
//check whether the particular link has a dropdown
if (!$(this).parent().hasClass('single-link') && !$(this).parent().hasClass('current')) {
//hiding drop down menu when it is clicked again
if ($(this).parent().hasClass('active')) {
$(this).parent().removeClass('active');
} else {
//displaying the drop down menu
$(this).parent().parent().find('.active').removeClass('active');
$(this).parent().addClass('active');
}
} else {
//hiding the drop down menu when some other link is clicked
$(this).parent().parent().find('.active').removeClass('active');
}
})
});
}
})(jQuery);
Hope this tutorial helped you, next week we will be back with another interesting tutorial, until then stay updated with our blog by:
Subscribing to RSS feeds
Subscribing by email
Subscribing by SMS(currently limited to Indian Users)
Want to request a new tutorial, then please Contact me right-away.
I promise to respond to everyone who contacts asking for support or new tutorials.
Copyright protected by Digiprove © 2011 Praveen Gowda I VAcknowledgements: Lucas From jQueryLoad.com
Some Rights Reserved
Recent Comments