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

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


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 Source Code

DOWNLOAD

Live Demo

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:

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.

VN:F [1.9.22_1171]
Rating: 4.4/5 (5 votes cast)
Creating Top Fixed Menu Bar With CSS3 Buttons and Dropdown Found in Gmail, 4.4 out of 5 based on 5 ratings

Related posts:

, , , , , , , , , , , , ,

  1. #1 by Mangal on November 1, 2011 - 6:20 pm

    how to hook this with javascript so that dropdown work with mouse click instead of anchor hover.

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
    • #2 by Praveen Gowda I V on November 1, 2011 - 6:26 pm

      We are working on the tutorial to create the same menu with javascript, so please watch out this week when we publish the tutorial.
      You can also subscribe to our feeds so that you don’t miss the tutorial when we publish.

      VN:F [1.9.22_1171]
      Rating: 5.0/5 (1 vote cast)
      • #3 by Mangal on November 1, 2011 - 6:32 pm

        ok, thank you praveen

        VA:F [1.9.22_1171]
        Rating: 4.0/5 (1 vote cast)
  2. #4 by joubert on January 5, 2012 - 3:15 am

    Hola, si pudieras también con select box que usa gmail
    http://imageshack.us/photo/my-images/860/demod.png/

    https://accounts.google.com/SignUp?service=mail&continue=https%3A%2F%2Fmail.google.com%2Fmail%2F%3Ftab%3Dwm&ltmpl=default

    VA:F [1.9.22_1171]
    Rating: 4.0/5 (1 vote cast)
    • #5 by Praveen Gowda I V on January 5, 2012 - 10:03 am

      Hello joubert,

      I had not noticed the Gmail Signup page for a while. I think it looks good and we will create a tutorial on that.
      We have taken your request into consideration and very soon we publish a tutorial on creating Select box as in Gmail.

      Stay updated to our tutorials by subscribing to Email Feeds, So you dont miss the tutorial when we publish the tutorial you requested.

      VN:F [1.9.22_1171]
      Rating: 5.0/5 (1 vote cast)
  3. #6 by Joubert on January 10, 2012 - 1:58 am

    Hola

    Así es el select tiene su scroollbar, y se ve muy elegante, estaré al tanto cuando publiquen el tutorial.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    • #7 by Praveen Gowda I V on January 10, 2012 - 2:07 am

      Hola Joubert,
      Sí sabemos que y por la misma razón que estamos creando una versión mejorada de la guía desplegable con jQuery, desplegable con los cambios de diseño y barra de desplazamiento pequeñas para que coincida con el nuevo aspecto de Gmail, por lo que suscribirse a las actualizaciones para ser notificado cuando se publiquen los mejores tutorial

      VN:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
  4. #8 by Joubert on January 10, 2012 - 1:59 am

    Hello

    This is the select has its scroollbar, and looks very smart, be aware when posting the tutorial.

    VA:F [1.9.22_1171]
    Rating: 4.0/5 (1 vote cast)
    • #9 by Praveen Gowda I V on January 10, 2012 - 2:05 am

      Hello Joubert,
      Yes we know that and for the same reason we are creating an improved version of the tutorial with jQuery dropdown, dropdown with scrollbar and small design changes to match the new look of gmail, so subscribe to email updates to get notified when we publish the improved tutorial

      VN:F [1.9.22_1171]
      Rating: 5.0/5 (1 vote cast)

Leave a Comment, Feedback or Support Requests

%d bloggers like this: