Creating Top Fixed Menu Bar With CSS3 Buttons and Dropdown Found in Gmail

Posted by Praveen Gowda I V in Gmail, Google, Google Plus, Tutorials, Web Design on October 26, 2011

Our previous tutorial was on creating the top fixed black menu bar with CSS drop down menu found in Google products, and in this tutorial I would like to teach creating the fixed menu bar with CSS3 buttons found in Gmail along with the dropdown which contains buttons for common functions like Archive, Spam, Delete, Mark as Important, Mark as not Important, Move to, Labels, Refresh and many more functions which is displayed right above the message list.

If you haven’t observed the new CSS3 button designs on this menu bar then it is because you are still struck with an old theme which does not support the new buttons.

If you want to have a look at these new menu bar with the CSS3 buttons that we are going to design in this tutorial, please change your theme to Preview or Preview(Dense).

Or else the below image will give you a better idea what we are going to be left at the end of this tutorial.

Top fixed bar found in Gmail with CSS buttond and dropdown

Fixed bar with CSS buttons and dropdown found in Gmail

Gmail uses JavaScript for the dropdown which is displayed when the button is clicked but I am not using JavaScript instead CSS is used and the dropdown is displayed on hovering over the buttons, but if you want the actual JavaScript dropdown found in Gmail you can easily modify the source code.

Goals of this this tutorial:

Make the bar static so it remains fixed even when the page is scrolled
create the buttons exactly the way they look in Gmail
getting the same style of dropdown menu as in Gmail

This type of a bar can be used to design elegant navigational bars of your website, control buttons for an online music player, or whatever your imagination may be….

Go forward have a look at the live demo and download the source code and use it anyway you like it.

DOWNLOAD

LIVE DEMO

Source Code

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<title>Live Demo Of Creating Top Fixed Menu Bar With CSS3 Buttons Found in Gmail | http://blog.geotitles.com</title>
</head>
<body>
<div class="container">
	<div id="content">
		<div class="menu">
			<ul>
				<li><a class="check dropdown" href="#"><input type="checkbox"/><span class="arrow"></span></a>
				<ul class="width-1">
					<li><a href="#">All</a></li>
					<li><a href="#">None</a></li>
					<li><a href="#">Read</a></li>
					<li><a href="#">Unread</a></li>
					<li><a href="#">Starred</a></li>
					<li><a href="#">Unstarred</a></li>
				</ul>
				</li>
				<li><a class="left" href="#">Archive</a>
				</li>
				<li><a class="middle" href="#">Spam</a></li>
				<li><a class="right" href="#">Delete</a>
				</li>
				<li><a class="left dropdown" href="#">Move to<span class="arrow"></span></a>
				<ul class="width-2">
					<li><a href="#">Personal</a></li>
					<li><a href="#">Work</a></li>
					<li><a href="#">Travel</a></li>
					<li><a href="#">Insurance</a></li>
					<li><a href="#">Insurance/Vehicle</a></li>
					<li><a href="#">Receipts</a></li>
					<li><a href="#">Educational</a></li>
					<li><a href="#">Spam</a></li>
				</ul>
				</li>
				<li><a class="right dropdown" href="#">Labels<span class="arrow"></span></a>
				<ul class="width-2">
					<li><a href="#">Personal</a></li>
					<li><a href="#">Work</a></li>
					<li><a href="#">Travel</a></li>
					<li><a href="#">Insurance</a></li>
					<li><a href="#">Insurance/Vehicle</a></li>
					<li><a href="#">Receipts</a></li>
					<li><a href="#">Educational</a></li>
				</ul>
				</li>
				<li><a class="dropdown" href="#">More<span class="arrow"></span></a>
				<ul class="width-3">
					<li><a href="#">Mark all as read</a></li>
					<li><a href="#">Mark as read</a></li>
					<li><a href="#">Mark as unread</a></li>
					<li><a href="#">Add to tasks</a></li>
					<li><a href="#">Add star</a></li>
					<li><a href="#">Remove star</a></li>
					<li><a href="#">Create event</a></li>
					<li><a href="#">Filter messages like these</a></li>
					<li><a href="#">Mute</a></li>
					<li><a href="#">Unmute</a></li>
				</ul>
				</li>
				<li><a class="refresh" href="#">&nbsp;</a></li>
				<li><a class="num"><b>1</b>–<b>50</b> of <b>52</b></a></li>
				<li><a class="previous" href="#">&nbsp;</a></li>
				<li><a class="next" href="#">&nbsp;</a></li>
			</ul>
		</div>
		<!--end  menu-->
	</div>
	<!--end content-->
</div>
<!--end container-->
</div>
</body>
</html>

CSS

* {
	margin:0;
	padding:0;
}
.menu {
	position:fixed;
	height:30px;
	font-size:14px;
	color:#FFF;
	margin:0 auto;
	margin-top:20px;
	margin-left:20px;
}
.menu ul {
	list-style:none;
	color:#FFF;
	width:auto;
}
.menu ul li {
	float:left;
	position: relative;
}
.menu ul li a {
	color:#666;
	font:bold 75% arial,sans-serif;
	text-decoration:none;
	padding:7px 12px;
	position:relative;
	display:inline-block;
	/*Background*/
	background:#f3f3f3;
	background:-webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
	/*linear-gradient*/
	background:-webkit-gradient(linear,left top,left bottom,from(from(#F5F5F5)),to(to(#F1F1F1)));
	background:-webkit-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
	background:-moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
	background:-o-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
	background:linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
	border:solid 1px #dcdcdc;
	/*border-radius*/
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;
	margin-right:10px;
}
.menu ul li a:hover {
	color:#333;
	border-color:#999;
	/*box-shadow*/
	-webkit-box-shadow:0 2px 0 rgba(0,0,0,0.2) -webkit-box-shadow:0 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow:0 2px 0 rgba(0,0,0,0.2) -moz-box-shadow:0 2px 5px rgba(0,0,0,0.2);
	box-shadow:0 2px 0 rgba(0,0,0,0.2) box-shadow:0 2px 5px rgba(0,0,0,0.2);
}
/* styling for the left buttons(buttons which are joined)*/
.menu ul li a.left {
	-webkit-border-top-right-radius:0;
	-moz-border-radius-topright:0;
	border-top-right-radius:0;
	-webkit-border-bottom-right-radius:0;
	-moz-border-radius-bottomright:0;
	border-bottom-right-radius:0;
	margin: 0;
}
/* styling for the middle buttons(buttons which are joined)*/
.menu ul li a.middle {
	/*border-radius*/
	-webkit-border-radius:0;
	-moz-border-radius:0;
	border-radius:0;
	border-left:solid 1px #f3f3f3;
	margin:0;
	border-left:solid 1px rgba(255,255,255,0);
}
.menu ul li a.middle:hover,.menu ul li a.right:hover {
	border-left: solid 1px #999;
}
/* styling for the right buttons(buttons which are joined)*/
.menu ul li a.right {
	-webkit-border-top-left-radius:0;
	-moz-border-radius-topleft:0;
	border-top-left-radius:0;
	-webkit-border-bottom-left-radius:0;
	-moz-border-radius-bottomleft:0;
	border-bottom-left-radius:0;
	border-left:solid 1px #f3f3f3;
	border-left: solid 1px rgba(255,255,255,0);
}
/*style for the arrow pointing downward*/
.arrow {
	border:thick;
	border-color:#777777 transparent white;
	border-style:solid dashed dashed;
	margin-left:5px;
	position:relative;
	top: 10px;
}
/* button with checkbox*/
.menu ul li a.check {
	padding:6px 6px 7px 12px;
	position:relative;
	display:inline-block;
	margin-right: 10px;
}
/*refresh button*/
.menu ul li a.refresh {
	background:url(images/refresh.png) 10px 4px no-repeat #f3f3f3;
	width: 17px;
}
/* previous button*/
.menu ul li a.previous {
	background:url(images/previous.png) 10px 4px no-repeat #f3f3f3;
	width: 17px;
}
/*next button */
.menu ul li a.next {
	background:url(images/next.png) 10px 4px no-repeat #f3f3f3;
	width: 17px;
}
/*showing the number of emails in inbox(eg:1–50 of 52)*/
.menu ul li a.num {
	color:#000;
	font:normal 80% arial,sans-serif;
	text-decoration:none;
	padding:7px 12px;
	position:relative;
	display:inline-block;
	text-shadow:none;
	background:#FFF;
	margin-right:10px;
	border: none;
}
/* hide the dropdown*/
.menu ul li ul {
	display: none;
}
/*changing the background of the button(which has a dropdown) to creyish gradient when we hover the mouse over it*/
.menu ul li:hover a.dropdown {
	background:#888888;
	/* Old browsers */
	background:-moz-linear-gradient(top,#888888 0%,#8e8e8e 43%,#7a7a7a 45%,#989898 100%);
	/* FF3.6+*/
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#888888),color-stop(43%,#8e8e8e),color-stop(45%,#7a7a7a),color-stop(100%,#989898));
	/* Chrome,Safari4+*/
	background:-webkit-linear-gradient(top,#888888 0%,#8e8e8e 43%,#7a7a7a 45%,#989898 100%);
	/* Chrome10+,Safari5.1+*/
	background:-o-linear-gradient(top,#888888 0%,#8e8e8e 43%,#7a7a7a 45%,#989898 100%);
	/* Opera 11.10+*/
	background:-ms-linear-gradient(top,#888888 0%,#8e8e8e 43%,#7a7a7a 45%,#989898 100%);
	/* IE10+*/
	background:linear-gradient(top,#888888 0%,#8e8e8e 43%,#7a7a7a 45%,#989898 100%);
	/* W3C */
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888',endColorstr='#989898',GradientType=0 );
	/* IE6-9 */ border:1px solid #989898;
	color:#000;
}
.menu ul li:hover ul {
	display:block;
	position:absolute;
	margin-left:0px;
	margin-top:-1px;
	-webkit-box-shadow:0 4px 10px #8b8b8b;
	-moz-box-shadow:0 4px 10px #8b8b8b;
	box-shadow:0 4px 10px #8b8b8b;
	padding:1px;
}
.menu ul li:hover ul li a {
	display:block;
	color:#000000;
	background:#ffffff;
	border:none;
	margin-right:1px;
}
.menu ul li:hover ul li a:hover {
	background: #EEEEEE;
}
/*the first item in dropdown must not have a border on top */
.menu ul li ul li:first-child a {
	border-top: none;
}
/* now let us define the widths of various dropdown*/
.width-1 li a {
	width:55px;
}
.width-2 li a {
	width: 125px;
}
.width-3 li a {
	width: 165px;
}

Hope this tutorial was helpful for you and has helped you learning something new, next week I will be back with another interesting web design tutorial, until then please subscribe with our blog to remain updated with all the new tutorials and articles:

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 or leave a comment below.

promise to respond to everyone who asks for support or new tutorials.

Buffer

Pin It

Rating: 4.3/5 (4 votes cast)

button designs, control buttons, css drop down menu, demo, drop down menu, gmail, google, imagination, labels, menu bar, music player, navigational bars, new menu, source code

10 Comments

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>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</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>&nbsp;</h2>
  <h2>CLICK HERE TO GO TO THE TUTORIAL LINK TO DOWNLOAD THE SOURCE CODE</h2>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp; </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.

Buffer

Pin It

Acknowledgements: Lucas From jQueryLoad.com

Some Rights Reserved

Rating: 5.0/5 (9 votes cast)

black, CSS, demo, drop down menu, dropdown, elements, google, google bar, images, jquery, launch, maps, nbsp, photos, red ribbon, scholar, search page, source code, top menu bar, web labs

62 Comments

Original content here is published under these license terms:		X

License Type:	Non-commercial, Attribution

License Summary:	You may copy this content, create derivative work from it, and re-publish it for non-commercial purposes, provided you include an overt attribution to the author(s).

License URL:	http://creativecommons.org/licenses/by-nc/3.0/

Original content here is published under these license terms:		X

License Type:	Non-commercial, Attribution, Share Alike

License Summary:	You may copy this content, create derivative work from it, and re-publish it for non-commercial purposes, provided you include an overt attribution to the author(s) and the re-publication must itself be under the terms of this license or similar.

License URL:	http://creativecommons.org/licenses/by-nc-sa/3.0/

Geo Web Station

Posts Tagged drop down menu

Coming Soon - Premium WordPress Theme Giveaway To All Our Email Subscribers

Creating Top Fixed Menu Bar With CSS3 Buttons and Dropdown Found in Gmail

Source Code

HTML

CSS

Sponsors

Recent Posts

Give Us A Donation

Recent Comments

Request a tutorial

Geo Web Station

Posts Tagged drop down menu

Coming Soon - Premium WordPress Theme Giveaway To All Our Email Subscribers

Creating Top Fixed Menu Bar With CSS3 Buttons and Dropdown Found in Gmail

Source Code

HTML

CSS

Creating The New Top Black Menu Bar Found in Google Search and all its Products

HTML

CSS

Javascript

Sponsors

Recent Posts

Give Us A Donation

Recent Comments

Tag Cloud

Request a tutorial