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.

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 :).

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.

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.

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.

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.

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:

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.

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).

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.

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).

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:

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.

Comments

“Next open an ‘article’ tag, which is the same as a div, just cleaner.”

This iteration of the purpose of the ‘article’ tag doesn’t do a lot of good for those interested in understanding HTML5’s newly introduced structural tags. This is a good tutorial, and your usage of the ‘article’ tag is surely justifiable, but the wording in this part could have unknowing developers replacing all of their future ‘div’ tags with ‘article’ tags, because they are seemingly “cleaner”, which is not totally HTML5’s goal in trying to make it standardized markup. I know I’m sucking the fun out of it, but within the relative freedom that HTML5 is giving us, there should come a sense of development responsibility. ‘Div’ tags should still serve as fundamental (key word) structural elements. I stress “fundamental” because HTML5 is giving us much more semantic tags to use, but developers should understand that, like all tags, they should serve a specific purpose and usage that differentiates them from any other tag. Kind of like ‘div’ vs. ‘span’. While some may not understand it, and their “misuse” certainly doesn’t “break” the web, there is a fundamental difference in the purpose of the two.

I’ll get to the point now. Tutorials about HTML5 don’t need to include the full specifications for every new tag that is used in the example, but as tutorial writers, we should, within reason, understand how to effectively sum up the reason that we chose them, in a way that justifies why the authors of the spec created them in the first place.

Slick, and a very complete walkthrough. Test-drove it in Opera, and it works, though there’s no “close” element of any sort to remove it or hide it that displays in that browser, and it blocks the top of the page from view without any way to display that top section.

Trackbacks

Today well be creating a bar that pops up at the top of a page, and stays above the content. We will use HTML5, jQuery and CSS3 as well as some @font-face. That bar can be used to display information….

[…] How to Create a Cute Popup Bar With HTML5, CSS3 and jQuery Here we’ll be creating a bar that pops up at the top of a page, and stays above the content (similar to ‘hellobar’). This has only been tested in Chrome and Safari and may not work in other browsers: […]