How To Create a Cute Popup Bar With HTML5, CSS3 and jQuery




Today we’ll be creating a bar that pops up at the top of a page, and stays above the content (similar to ‘hellobar’). The popup bar was only tested in Chrome and Safari and may not work in other browsers. The bar can be used to display information, for example your latest blog post, to the user.

The way the bar pops out at the top makes sure it’ll be seen. And after the visitor has seen the information, he/she has the option to hide the bar.

Click here to view the live demo →

First we’ll open up photoshop to create the images we’ll need; the body background and the bar background. For the body background I’ve taken a dark green square and added 2% noise. You’re free to choose which color you use, just make sure it looks good :).

Images

For the bar I’ve chosen a light gradient, also with 2% noise, to make it more noticeable and added a 6px pattern stroke (to make the pattern, create a new document with the dimensions 8px by 8px and fill it according to the image. Edit -> Define Pattern. To use a pattern as a stroke, select fill type: pattern). Save the images as jpeg, the body background will be repeated in both directions, the bar background only horizontally.

With the images completed, we can now focus on the code. We’ll be using HTML5, CSS3 and jQuery. Let’s begin with the HTML.

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
	<title>CuteBar</title>
</head>
<body>

</body>
</html>

You’ll notice the doctype: , is the new HTML5 doctype. Short and easy to remember. Next open an ‘article’ tag, which is the same as a div, just cleaner. Inside paste some content, maybe even an image or two to make it more interesting.

<article>
	<p>ADD TEXT HERE</p>
	<img src=image.jpg>
	<p>ADD SOME MORE TEXT</p>
</article>

Above the ‘article’ tag, paste the following code.

<div id=popup>
	<span class=hide>
		<a href=# class=hide>C</a>
	</span>
	<p>Hello! I'm a cute little bar. This is a popup.</p>
</div>

Basically we’re creating a div with the id popup. Inside it we have a span with a capital letter C, which is linked to #. Below the span is the bars content in paragraph tags. Both the ‘span’ and the ‘a’ element have the class ‘hide’. When you click on the letter C (which will later be transformed into an arrow, thanks to the @font-face element) the bar will slide up.

Below the ‘popup’ div, paste in the following markup.

<span class=showpop>
	<a href=# class=showpoplink>C</a>
</span>

This is the code that appears when the bar is hidden. Press on the link inside the span element, and the bar will appear.

Our HTML is complete, now let’s make it functional with jQuery. We’ll let Google host it, meaning we can link to Google’s code and we don’t have to download it.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>

If you check out the demo, you’ll notice the bar sort of bounces multiple times before it stands still. For this effect you’ll have to link to the jQuery UI code, also hosted by Google.

<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script>

Start out by pasting this code. This is jQuery 101 ;)

$(document).ready(function(){    
});

Next, inside the before pasted code, paste this.

$('#popup').show('bounce', { times:3 }, 300);
$('.showpop').hide();

You select the ‘popup’ div and show it using a bounce effect. Inside the curly brackets you set the repetitions and the last number is the time (in milliseconds). Next you hide the ‘showpop’ span that the user would click when the bar is hidden. Next paste this.

$('.hide').click(function(){
	$('#popup').slideUp();
	$('span.showpop').fadeIn('slow');
	return false;
});

You’re telling the page to perform an action when the ‘hide’ link is pressed. The bar should slide upwards (meaning it disappears) and the ‘showpop’ span fades in (slowly) from being hidden. It’s important to include ‘return false’, otherwise the link action will be performed, meaning the page reloads. If you don’t include it, you’ll see out bar functions properly, but every time you either hide or show it, you’ll find yourself at the top of the page.

Try it! The bar now properly hides itself, even though it still looks horrible at the moment. Next paste this code:

$('a.showpoplink').click(function(){
	$('#popup').show('bounce', { times:3 }, 300);
	$('.showpop').hide();
	return false;
});

Here you’re ordering the page to show the popup (by bouncing 3 times) and hide the ‘showpop’ span when the user clicks on ‘showpoplink’. Don’t forget ‘return false’ here either.

Now all we have left is to make it look pretty. First visit http://www.dafont.com/dtpdingbats.font to download the arrow font we’re going to be using. Next use fontsquirrel @font-face generator and add the code to your css file. It should look similar to this.

@font-face {
	font-family: 'ArrowFont';
	src: url('font link');
	src: local('☺'), 
		url('font link') format('woff'), 
		url('font link') format('truetype'), 
		url('font link') format('svg');
	font-weight: normal;
	font-style: normal;
}

Next we’ll use a basic (real basic) reset by adding this to the body style. Also set the background as the image you created earlier, don’t forget to add repeat (meaning it repeats both horizontally and vertically and doesn’t display only once).

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
body {
	background: url(image link) repeat;
}

Add this code.

article {
	font-family: baskerville; 
	font-size: 16px; 
	margin-top: 70px;
}

p {
	line-height: 25px;
	color: white;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
	padding: 0 20px;
	font-family: Baskerville;
}

We’re setting the line height to 25px so the text isn’t cramped together. Depending on your background color, you’ll want to set the text color to white. The text shadow isn’t needed, but makes it look even nicer. Notice I’m using ‘rgba(…)’ here. RGB stands for red green and blue. ‘a’ is the opacity. Covert RGB – Hex and Hex – RGB here http://www.javascripter.net/faq/hextorgb.htm.

Next style the bar itself.

#popup {
	top: 0;
	width: 100%; 
	padding: 20px;
	background: url(image url)  left bottom repeat-x;
	display: block;
	position: fixed;
}

The distance to the top of the page should be zero, hence ‘top:0’. The width can also be less, but I think 100% looks best. You don’t need to set a height, but you need padding. Set the background to the image you created earlier, the background position to left bottom and repeat-x. Position fixed is very important, as you want the bar to be displayed fixed (meaning it doesn’t move) while the rest of the page scrolls along merrily.

As the text inside the bar shouldn’t have the same style as the body paragraph, you need to style it differently. Here the left margin is very important, otherwise the letter ‘C’ (arrow) will overlap with the bar’s content.

#popup p {
	margin-left: 15px;
	text-shadow: 0 1px 1px rgba(255,255,255,0.8);
	font-size: 13pt;    
	color: #34332d;
}

Now we’ll style the ‘hide’ arrow.

a.hide {
	color: #34332d; 
	text-decoration: none;
	font-family: 'ArrowFont'; 
	-webkit-transform:rotate(-90deg); 
	font-size: 30px; 
	position: absolute;
	text-shadow: -1px 0px 1px rgba(255,255,255,0.8);
	margin-top: -10px;
}

The color should be the same as the paragraph, which depends on your background. I don’t think an underline looks good, but it’s your choice. Now to the important part. We ‘imported’ the Dingbat font earlier (I changed the name to ‘ArrowFont’) through @font-face. Change the font-family to ‘ArrowFont’. By using ‘-webkit-transform’ we can rotate the arrow (it needs position: absolute to rotate). Change the arrow size by setting the font-size to 30px. Set the top margin to a negative value to pull the arrow up a bit.

Change the color of the arrow to #c44f21 when the user hovers over the arrow (:hover pseudo class).

a.hide:hover {
	color: #c44f21; 
}

Next we’ll style the ‘show’ span.

span.showpop {
	display: block;
	position: fixed;
	-webkit-transform:rotate(90deg);
	margin-top: -70px;
}

Just like the bar, it should have a fixed position. The span should display as a block. Rotate it, this time in the opposite direction. Change the top margin to a negative margin to pull it upwards. Now the arrow:

a.showpoplink {
	background: #dde1c1;
	padding: 5px 10px 5px 40px;
	font-family: 'ArrowFont'; 
	font-size: 30px; 
	margin-left: 5px;
	border: 4px solid #c44f21; 
	text-decoration: none;
	border-radius: 10px;
	-webkit-background-clip: padding-box;
	color: #34332d;
}

In it’s normal state, the color is #dde1c1. Add some padding (notice the arrow is rotated, meaning the values are too). Change the font-family to arrowfont, and add a border (#c44f21). Remove the underline, add some round corners and remove the background ‘bleed’ with this little hack: ‘-webkit-background-clip:padding-box’.

Change the arrows color when the user hovers over it…

a.showpoplink:hover {
	color: #c44f21; 
}

And if you’ve added an image, style it’s appearance.

img {
	float: left; 
	padding: 10px 20px 10px 20px;
}

Conclusion

You’ve made it! Splendid job! If you’ve messed around with the colors and overall style, I’d love to see it! Make sure you add the link to your work in the comments.


Eric Hoffman

About the author:

Eric Hoffman is a young American freelance web and brand identity designer based in Switzerland, working under the brand hatchergraphics (portfolio coming soon). He enjoys reading, swimming, going to school (yes, I do) and tweeting. If you’d like to connect with him, you should follow him on Twitter as @erichoffman

Comments:

Scroll back to the top
Content


Receive the top stories from SpyreStudios and the Splashpress Media network every week, right in your Inbox. Relevant and timely content is yours for FREE!