Just a quick post to wish you all a Merry Christmas  and A Happy New Year 2013.

I would like to thank you all for visiting our Web Development Tutorial blog and we hope you enjoyed each of the tutorials we have published in the last year.

Thanks for making this year great and we wish you all have a great year ahead in 2013.

We all are having a great time over the holidays and we hope you all are having a  great one too!!.

This new year we are coming back with lots of new tutorials and with a completely different look!

May your holidays be blessed and the year 2013 be plentiful.

Copyright protected by Digiprove © 2011-2012 Praveen Gowda I V

Wishing everyone a Merry Christmas and A Happy New Year 2013

It has been quite some time since we announced that we will be back with a redesign for our blog, but the reason that it is so much long is because we are not only redesigning but also updating each and every tutorial, adding new features.

New Updates for all tutorials

So we thought we will let you know what is coming up in a few days, so here is the list of changelog for all the tutorial updates which will be released soon:

1. Google Top bar with Drop down menu
   • Multi level drop down menu support
   • Fixing the issues with arrow and other elements when used on dark backgrounds
2. Gmail like Fixed CSS3 Menu
   • Using jQuery instead of CSS for dropdown menu
   • Compatibility in old browsers
3. Facebook like notification box
   • Rewriting the jQuery code to support multiple notifications to be displayed at the same time
   • Clean the HTML code to make it much lighter
   • New feature to display notifications whenever there is a addition to database
   • and Much more …
4. HTML5 & Ajax Contact Form
   • We will not update this tutorial but a complete new contact form tutorial will be made which we promise to be one of the best HTML5 and CSS3 forms tutorials you would have ever come across
   • New tutorial will be completely HTML5 with more fields like detecting location and file upload and a lot more coming soon.
5. PHP login script with advanced features
   • We have some huge plans for this one but immediately we will publish an update which will fix the php short tag problem as well as the depreciated function errors which many of our users are facing.This update has arrived and the download link has been updated, we request everyone who had problems with the previous version to download the new files
   • The next major update will include
     • User registration and log in using Facebook and Twitter (others will be coming soon)
     • Email confirmation for newly registered users
     • Support for the Admin to Activate newly registered users
     • New look and feel to the login system using HTML5 and CSS3
     • and much more coming soon

Hope you all will find the updates to be useful, the updates are getting delayed due to some personal projects, hence I request your patience and I will make sure that I start rolling updates as soon as possible & also we have a huge range of new useful tutorials in the draft which will be published soon.

We are also working on lot more educational sites and we will let you know as soon as we are ready to launch, until then have a great time.

Thanks,

Praveen

Copyright protected by Digiprove © 2012 Praveen Gowda I V

New updates coming soon for all tutorials

We are back with another giveaway, and this time it is 250 business cards giveaway from PrintRunner.

PrintRunner.com was established with little more than a small press and a dream. Ten years later the company became one of the foremost quality printers in Southern California. Their commitment to provide the best value and high quality full color printing at affordable price made the company grow. PrintRunner is a full service high quality printing company located in Chatsworth, California.

Business Cards Giveaway

Details of the giveaway:

Business Card Size and Style Business Cards: 2×3.5 (Standard)

Quantity: 250 Colors: 4/4 Color Both Sides

Paper: 14 pt. UV Coating on Front, 14 pt. UV Coating on both sides,

Proof: NONE

Rounded Corners: NO

Ready To Ship In: 3 Business Days

*Giveaway is open Worldwide but free shipping is only available for US citizens and outside US winners must shoulder the shipping charges.

Ages: 18 years old and above.

PrintRunner is one of the best online printing companies and we definitely recommend to try their online business card printing through their online printing services.

The giveaway has ended and the winners are announced in the widget below.
If you were not the lucky one, don’t worry, since we will be back with more giveaways very soon
a Rafflecopter giveaway

Thank you to PrintRunner for providing us this giveaway, I will receive a set of business cards for hosting this.

Copyright protected by Digiprove © 2012 Praveen Gowda I V

Business Cards Giveaway from Print Runner

Our friends at Mysitemyway have offered to giveaway three WordPress themes to our readers.

Mysitemyway are popular for their easy-to-customize professional looking WordPress themes backed with world class support.

We ourselves being customers of Mysitemyway assure you that their themes are one of the best in the world and their support is so awesome that you can rest assure you never run into roadblocks when you are working with their themes.

We planned to redesign our site (will be online in two weeks), and were looking for suitable premium WordPress theme, believe me, after thinking of designing it ourselves, browsing through hundreds of themes on Themeforest and elsewhere we finally found Mysitemyway and their themes (we chose Modular Theme) were just the perfect ones.

Some awesome features their themes comes with are:

• 140+ Shortcodes - Everything from column layouts, drop caps, and button styles to pricing tables and image galleries, shortcodes make your life much easier.
• SEO Powered – You can easily customize SEO settings for your images, content, meta descriptions and titles for posts & pages.
• Extensive Documentation - Every aspect of their themes are documented and there are plenty of tutorials to help us along the way.
• Dedicated Support Team - By the time of writing this post there are almost 69593 posts and I don’t think I need to tell anything more.
• Skin Generator – This is what we love with their themes !. No more messing about with CSS and HTML code. Use our skin generator to easily customize your site!
• Frequently Updated - Their themes are frequently updated and no theme is left behind.

Check out their themes below and try to choose which one suits the best for you.

Construct

An ultra-lightweight and minimalist theme with a focus on customization, making it the perfect starter theme for your own website or next web design project.

Construct WordPress Theme from Mysitemyway

Myriad

With clean lines and vivid colors, featuring a fixed menu on the left and a jQuery minimized “footer” on top, Myriad keeps the focus where it should be, on your content!

Myriad WordPress Theme from Mysitemyway

Method

With an established layout this theme attains a perfect balance between form and function

Method WordPress Theme from Mysitemyway

Fusion

Combining stylish presentation with a classic structure Fusion is a powerful WordPress theme with everything you need.

Fusion WordPress Theme from Mysitemyway

Elegance

A clean and minimal theme with an expansive layout which focuses on your content.

Elegance WordPress Theme from Mysitemyway

Echelon

An elegant, yet minimalist, theme. Use it to create a clean, professional, corporate look.

Echelon WordPress Theme from Mysitemyway

Persuasion

A strong business theme, with a bold, captivating intro area that’s perfect for sales pitches. Use it to create a clean, professional, easily brandable website with unlimited colors and subtle textures.

Persuasion WordPress Theme from Mysitemyway

DejaVu

A clean, casual, business theme that is exceptionally easy to customize.

DejaVu WordPress Theme from Mysitemyway

And Finally comes Modular Theme which is a superb magazine theme and we will be using it for our blog redesign which is going be released in two weeks.

Modular

A classic, modular magazine style design that organizes your content into easily customizable building blocks.

Modular WordPress Theme from Mysitemyway

Mysitemyway also have two more WordPress Themes which are being sold through themeforest and do not qualify to this giveaway, still have a look at them below:

InFocus

A highly customizable theme which can be used for a business site or a magazine blog.

InFocus WordPress Theme from Mysitemyway

Awake

Powerful Professional WordPress Theme

Awake WordPress Theme from Mysitemyway

In this giveaway you can win any of the above themes except for InFocus and Awake.

Each winner will be given any theme of their choice with a developer’s license which costs $35.

There are three licenses to be given away and good luck for everyone participating.
The giveaway is over and you can find the winners below in the widget, I will contact each of the winners and give you the coupon code to get your theme.
If you are not lucky, don’t worry since we will be soon back with another interesting giveaway.
a Rafflecopter giveaway

Copyright protected by Digiprove © 2012 Praveen Gowda I V

Premium WordPress Theme Giveaway from Mysitemyway Worth $105

Themefuse who are known for their Stunning Original WordPress Themes have agreed to giveaway 3 copies of  their Standard WordPress Themes to three lucky readers of our blog.

Themefuse offers stunning WordPress themes which would suit everyone’s need and If lucky you could go away with a standard theme license and you will have the option to choose any of their theme from their theme shop.

Below are a some of our favorites from each category, visit themefuse to browse through all of their themes.

VIDEOGRID

Showcase your lifetime work or blog like you never blogged before with this insanely great multimedia WordPress theme.

Sportedge

The versatile SportEdge Magazine is the best Sport WordPress theme we could have come up with, that’s a given! See for yourself.

Medica

Probably the best WordPress theme when it comes to Doctor’s websites, Health Clinics, Dentist’s Offices or anything medical related.

Writer

Writer has all it takes to be a really great option for bloggers that want a stylish and premium look for their personal WordPress blog.

Brand Crafters

The ultimate corporate WordPress theme that will guarantee to make your business website stand out from the crowd.

MobilityApp

A theme best suited for smartphone developers that need to promote their iPad, iPhone or Android mobile applications.

Qlassik

Be it your corporate business website or your personal web design portfolio, Qlassik will definitely deliver in both situations and more.

Lifestyle

An online magazine oriented WP theme that also fits perfectly as a news, fashion or even a celebrity & gossip blog.

Welcome Inn

If you need a hotel oriented wp theme, you have to try our latest project. It comes in 2 additional flavors: ski resort and spa. Enjoy!

Freshfolio

An original, awesome and efficient way for showcasing photography, design, illustration portfolios’ or even paintings and art.

Envision

Try our most complex wp theme to date. It has shortcodes, 5 different sliders and a bunch of awesome features. You name it, we’ve got it!

WebStudio

This theme can be used to showcase photography, illustration, design, paintings or art, in a simple, awesome and efficient way.

Exquisite Works

WP theme designed for someone who needs a classy and stylish presence on the web for their corporate website.

Clean Classy Corporate

Be it web products, cloud computing or SaaS, C3 has a clean corporate feel to it which caters to the new breed of web entrepreneurs.

Art Gallery

Showcase your art, photography, design work or even print. If you think of your work as art, this is the wp theme for you.

Creative Juice

We’ve crafted this wp theme with a showcase portfolio in mind. It can be easily used by web agencies / studios or small design firms.

SiliconApp

We’ve built this wp theme with a software application wordpress template in mind, be it a mobile or a standard desktop product.

Bon Apetit

This wp theme is destined for a restaurant or coffee shop website but it can be also used for a pastry, catering or recipes portal.

WINNERS

The Giveaway is now over and the winners are announced below in the widget.

Thanks for everyone who particiapted.

If you didn’t win , don’t worry we will be back very soon with some more awesome giveaways.

Do subscribe to your web development tutorials and more …

Copyright protected by Digiprove © 2012 Praveen Gowda I V

3 Copies Of Standard WordPress Theme Giveaway From Themefuse

If you haven’t heard about Stickermule yet then you should definitely check them out today. Stickermule makes awesome custom vinyl stickers and the quality of stickers they make are just the best I have ever come across.

Stickermule have got thousands of people, startups, bloggers, artists and companies awesome stickers  printed beautifully.

Also they ship worldwide and if you are in the United States then they provide free shipping and ship all orders in just 5 business days. They also provide an online proof of your custom design before getting it to print and they also fix your low quality artworks for free.

With brands like GitHub, Shopify, Quora, AppSumo and Reddit trusting Stickermule, there is no reason you shouldn’t try them once

So Go Ahead and check out the custom stickers and custom skins.

You can order for the sample pack to test the quality of stickers before ordering.

You also get $10 of free credits to start you with your sticker shopping by clicking the link below

Go To Stickermule

You should also check out the different stores that Stickermule offers.

Our favorite is the DuckDuckGo Sticker Store

If you haven’t heard of DuckDuckGo, then

DuckDuckGo is a general purpose search engine like Google or Bing with an important difference. It does not track you. It also works harder to reduce spam and clutter

The DuckDuckGo store features 18 community designed stickers (more to come!), as well as official logo stickers and iPhone skins. There’s even a reddit-inspired sticker that also serves as the logo for the official DuckDuckGo subreddit.

Check Out DuckDuckGo Sticker Store

Copyright protected by Digiprove © 2012 Praveen Gowda I V

Get Awesome Stickers at Stickermule

We would like to wish everyone a Happy New Year 2012, as we end the year 2011 and step in to 2012, we would like to have some feedback which would help us to provide you with better and useful web development tutorials in 2012.

So please take some time to vote for the best tuorial of 2011, and what tutorials you are expecting us to provide in 2012.

Survey has been closed, thanks for everyone who took the survey.

Thanks for taking the survey, we will be back in 2012 with some more great Web Development Tutorials, your feedback will definitely help us present the best tutorials for you.

Happy New Year 2012 and have a great year ahead.

Copyright protected by Digiprove © 2011 Praveen Gowda I V

Vote For The Best Tutorial in 2011

Whenever you are online on Facebook and if there are any notifications then you would have noticed the small blue box on the left bottom alerting you the notification live, this is what Facebook calls as the beeper.

In this tutorial I am going to teach you to create such a beeper found on Facebook.

If you are still wondering on what beeper I am talking about, then look at the below image to know what we are going to create at the end of this tutorial

Bepper Found In Facebook

Notification Box In Facebook

We are going to use CSS and jQuery to create the notification box.

Check out the live demo or download the source code if you are in a hurry ( it is heavily commented) or else check how the code works below.

Now Let Us Look at the 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" />
      <title>Live Demo Of Creating Facebook like Beeper Tutorial | http://blog.geotitles.com</title>
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
       <link rel="stylesheet" type="text/css" href="style.css" />
       <script src="jquery.facebookBeeper.js" type="text/javascript"></script>
   </head>
   <body>
      <div align="center" class="main">
         <p>This is the live demo of creating <strong><a href="http://blog.geotitles.com/2011/12/facebook-like-beeper-for-alerting-notifications-live">Facebook like Beeper Box</a></strong><a href="http://blog.geotitles.com/2011/12/facebook-like-beeper-for-alerting-notifications-live"> for Alerting Notification</a> on <strong><a href="http://blog.geotitles.com">Geo Web Station</a></strong><br /><br />
        Click <strong><a href="http://blog.geotitles.com/2011/12/facebook-like-beeper-for-alerting-notifications-live">Here</a></strong> For The <strong><a href="http://blog.geotitles.com/2011/12/facebook-like-beeper-for-alerting-notifications-live">Tutorial Link</a></strong> To Have A Look At The <a href="http://blog.geotitles.com/2011/12/facebook-like-beeper-for-alerting-notifications-live">Tutorial </a>And  Download The Source Code </p>
         <p>
            Click Below To Display Beeper
         </p>
        <a href="#" class="control" id="control">DISPLAY BEEPER</a>
      </div>
      <div id="BeeperBox" class="UIBeeper">
         <div class="UIBeeper_Full">
            <div class="Beeps">
               <div class="UIBeep UIBeep_Top UIBeep_Bottom UIBeep_Selected" style="opacity: 1; ">
               <!-- Below Is The Link To Which Bepper Will Point To (replace # with the required link) -->
                  <a class="UIBeep_NonIntentional" href="#">
                     <div class="UIBeep_Icon">
                        <i class="beeper_icon image2"></i>
                     </div>
                     <span class="beeper_x">&nbsp;</span>
                     <div class="UIBeep_Title">
                        <span class="blueName">Praveen Gowda</span> likes your comment on <span class="blueName">Hitherto Web Labs</span>.
                     </div>
                  </a>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

CSS

@charset "utf-8";
body{
/* body*/
font-size: 11px;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
color: #333;
line-height: 1.28;
text-align: left;
direction: ltr;
}
.main{
/* style for the div with control button*/
font-size:15px;
width:670px;
margin:30px auto;
height:80%;
padding:15px;
font-weight:normal;
/*border-radius*/
-webkit-border-radius:15px;
   -moz-border-radius:15px;
        border-radius:15px;
background:white;
border:1px solid #E5E5E5;
/*box-shadow*/
-webkit-box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
   -moz-box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
        box-shadow:rgba(200,200,200,0.7) 0 4px 10px -1px;
}
.control{
color:#666;
width:150px;
font:bold 75% arial,sans-serif;
text-decoration:none;
padding:10px 10px 10px 10px;
display:inline-block;
text-align:center;
/*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)));
/*@@prefixmycss->No equivalent*/
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:25px auto;
}
.control: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);
}
.UIBeeper{
width:230px;
left:15px;
bottom:30px;
position:fixed;
z-index:99;
display:none;
}
.UIBeeper .UIBeeper_Full{
background-color:#E1E6EE;
border:1px solid #99A8C7;
/*border-radius*/
-webkit-border-radius:3px;
   -moz-border-radius:3px;
        border-radius:3px;
margin:0;
padding:3px;
}
.UIBeeper .UIBeeper_Full:hover{
/* change background color on mouseover */
background-color:#CAD1DE;
}
.UIBeeper .UIBeep_Bottom{
border-bottom:none;
}
.UIBeeper .UIBeep_Selected{
background:#CAD1DE;
}
.UIBeeper .UIBeep_Top{
padding-top:0;
}
.UIBeeper .UIBeep_Bottom{
padding-bottom:0;
}
.UIBeep{
background:#E1E6EE;
border-bottom:1px solid #BFCADE;
overflow:hidden;
padding:3px 0;
clear:right;
}
a, a:hover{
cursor:pointer;
color:#3B5998;
text-decoration:none;
}
.UIBeep .UIBeep_NonIntentional .UIBeep_Icon{
float:left;
width:20px;
height:20px;
text-align:center;
margin:5px 5px;
}
.UIBeep_Selected .UIBeep_Icon{
margin-right:2px;
}
.image2{
/* icon within the beeper */
background-image:url(images/like.png);
background-repeat:no-repeat;
display:inline-block;
height:16px;
width:16px;
}
.UIBeeper .UIBeep .UIBeep_NonIntentional .beeper_x{
/* close button */
float:right;
height:16px;
width:16px;
margin-top:6px;
background:url(images/close.gif) no-repeat;
visibility:hidden;
}
.UIBeep .beeper_x:hover{
/* close button on mouseover */
background:url(images/closehover.gif) no-repeat !important;
}
.UIBeep_Selected .beeper_x{
display:block !important;
visibility:visible !important;
margin-left:4px;
}
.UIBeep .UIBeep_NonIntentional .UIBeep_Title{
margin:0 20px 0 30px;
}
.UIBeep .UIBeep_Title{
padding:5px 0;
}

JavaScript

We use jQuery to:

• display the beeper on clicking on the button
• hide the beeper after five seconds
• prevent the hiding of beeper on mouseover
• hide the beeper after five seconds of mouseout

$(document).ready(function () {
    // set the time for the beeper to be displayed as 5000 milli seconds (5 seconds)
    var timerId, delay = 5000;
    var a = $("#BeeperBox"),
        b = $("a.control");;
    //function to destroy the timeout

    function stopHide() {
        clearTimeout(timerId);
    }
    //function to display the beeper and hide it after 5 seconds

    function showTip() {
        a.show();
        timerId = setTimeout(function () {
            a.hide();
        }, delay);

    }
    //function to hide the beeper after five seconds

    function startHide() {
        timerId = setTimeout(function () {
            a.hide();
        }, delay);
    }
    //display the beeper on cliking the "show beeper" button
    b.click(showTip);
    //Clear timeout to hide beeper on mouseover
    //start timeout to hide beeper on mouseout
    a.mouseenter(stopHide).mouseleave(startHide);

    $('.beeper_x').click(function () {
        //hide the beeper when the close button on the beeper is clicked
        $("#BeeperBox").hide();
    });

});

Copyright protected by Digiprove © 2011 Praveen Gowda I V

Facebook like Beeper for Alerting Notifications Live

Google plus has rolled out its brand pages for Businesses, Products, Brands, Companies, bands, etc., and creating a page brings you closer to your customers, fans and followers on Google+. In this tutorial we are going to teach you the steps involved in creating a Google Plus brand pages. So lets go ahead and go through the different steps involved.

In this tutorial we will alongside create our Hitherto Web Labs fan page.

Step 1: Filling Up the Basic Info

Visit this link below to start with creating your Google+ Page

Start Creating your Google+ Page

Then select what category of page you want to create in the left hand side of the page as shown in the below figure

Step 1: Select Category

then fill up the Information page with the details of Page Name, Website (optional), Category and Page Visibility and agree to terms and conditions and then click the CREATE PAGE button.

Step 1: Fill in the Google Plus Page Information

Step 2: Customize your page’s public profile

In this page you can add more details to help people find your page

Please enter the TAGLINE (The 10 words that describe your page best) and upload a Profile Photo

Step 2: Enter Tagline for Your Google+ Page

Now  click on Change Profile Photo button to upload a profile photo for your Google+ Page

After uploading the photo you can do actions like Rotating The Image or Cropping The Image, for more customizing option like playing with playing with colors, exposure, sharpness and other effects click on Creative Kit button.

Step 2: Customize Profile Photo

 You can observe that the profile photo we have used is the one we have used for Facebook Page(We are still in the construction of a creative a Facebook Page for our blog) Profile Photo, hence we used the crop tool to crop the image.

After getting the right affect with the profile picture click on Set As Profile Photo button.

Click Continue.

Step 3: Tell everyone about your new page

Now Your Google Plus Brand Page is ready, Yes, In just three steps!!

Now Go ahead and share with everyone about your Google Plus Brand Page.

Step 3: Share Your Google+ Brand Page

Now your Google+ Brand Page is ready for your customers, fans and everyone…..

Take a look at the Google+ Brand Page we created for our blog and do add our page to your circles

Visit hitherto Web Labs on Google+

Do create your own Google+ pages and let us know by posting your comments belowr.

You can also add a badge to your own blog or website to advertise your Google+ brand pages as given below:

hitherto Web Labs

on Google+

After you create the Fan page you will get the link to creating this type of badges, it is also stated that other badge designs are also coming soon.

Hope this tutorial was useful for you, Stay updated with all the tutorials of 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 or leave a comment below.

We promise to respond to all tutorial requests

Copyright protected by Digiprove © 2011-2012 Praveen Gowda I V

Tutorial on creating Google Plus Brand pages

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.

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

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

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.

Copyright protected by Digiprove © 2011 Praveen Gowda I V

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