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 :).
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.
[html]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=’Content-Type’ content=’text/html; charset=utf-8′ />
<title>CuteBar</title>
</head>
<body>
</body>
</html>
[/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.
[html]
<article>
<p>ADD TEXT HERE</p>
<img src=image.jpg>
<p>ADD SOME MORE TEXT</p>
</article>
[/html]
Above the ‘article’ tag, paste the following code.
[html]
<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>
[/html]
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.
[html]
<span class=showpop>
<a href=# class=showpoplink>C</a>
</span>
[/html]
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.
[html]
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js’></script>
[/html]
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.
[html]
<script src=’http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js’></script>
[/html]
Start out by pasting this code. This is jQuery 101 ;)
[html]
$(document).ready(function(){
});
[/html]
Next, inside the before pasted code, paste this.
[html]
$(‘#popup’).show(‘bounce’, { times:3 }, 300);
$(‘.showpop’).hide();
[/html]
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.
[html]
$(‘.hide’).click(function(){
$(‘#popup’).slideUp();
$(‘span.showpop’).fadeIn(‘slow’);
return false;
});
[/html]
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:
[html]
$(‘a.showpoplink’).click(function(){
$(‘#popup’).show(‘bounce’, { times:3 }, 300);
$(‘.showpop’).hide();
return false;
});
[/html]
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.
[html]
@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;
}
[/html]
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).
[html]
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;
}
[/html]
Add this code.
[html]
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;
}
[/html]
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.
[html]
#popup {
top: 0;
width: 100%;
padding: 20px;
background: url(image url) left bottom repeat-x;
display: block;
position: fixed;
}
[/html]
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.
[html]
#popup p {
margin-left: 15px;
text-shadow: 0 1px 1px rgba(255,255,255,0.8);
font-size: 13pt;
color: #34332d;
}
[/html]
Now we’ll style the ‘hide’ arrow.
[html]
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;
}
[/html]
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).
[html]
a.hide:hover {
color: #c44f21;
}
[/html]
Next we’ll style the ‘show’ span.
[html]
span.showpop {
display: block;
position: fixed;
-webkit-transform:rotate(90deg);
margin-top: -70px;
}
[/html]
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:
[html]
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;
}
[/html]
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…
[html]
a.showpoplink:hover {
color: #c44f21;
}
[/html]
And if you’ve added an image, style it’s appearance.
[html]
img {
float: left;
padding: 10px 20px 10px 20px;
}
[/html]
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.
Author: Eric Hoffman
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
Dev says
November 20, 2010 at 2:13 amHmm… just a thought:
“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.
http://dev.w3.org/html5/spec/Overview.html#the-article-element
VJ says
November 20, 2010 at 4:17 amgood one — thanks
Big6b says
November 20, 2010 at 5:54 amQuite good tutorial on creating a pop-up bar using html5 and css3
BlackMaxDesign says
November 20, 2010 at 6:06 amSlick, 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.
Anonymous says
November 20, 2010 at 9:17 amDoesn’t work in FireFox and ie probably too, but still very nice tutorial and result.
Max2010 says
November 22, 2010 at 2:10 amUm. It works in Firefox 3.5.7
I’m tempted to use this but it’s only a matter of time before it becomes overused and someone comes out with a blocker for it.
Eko Setiawan says
November 22, 2010 at 7:50 amGreat tutorial, thanks..
shpyo says
November 22, 2010 at 8:46 amNice effect, but the whole code of JS should go to the bottom of the page.
Nick Alberti says
November 22, 2010 at 5:38 pmCool tutorial!
Da-fuzz says
November 23, 2010 at 1:20 amWorks in IE8 and even in IE6, only thing that IE doesn’t like is the font replacement.
Madeline Talent says
November 23, 2010 at 3:57 amNice tutorial. I’ll have to try it!
Emilicus says
November 23, 2010 at 8:55 amWorks on ipod touch. Cool!
Eric Hoffman says
November 24, 2010 at 2:03 pmThanks for the positiv comments guys!
Rostam says
November 24, 2010 at 3:08 pmNice one, thanks! is there any way to modify this so that the sliding-bar is at the bottom of the page and slides from left to right? I’ve tried it but without success yet :-(
Appreciate your help :-)
Luis Manfredotti says
November 25, 2010 at 2:12 amNice Tutorial :-)
Eric Hoffman says
November 26, 2010 at 5:13 pm@rostam you should check out: http://docs.jquery.com/UI/Effects/Slide
Positioning would probably be: ‘bottom: 0’
Good luck!
Kobold Avenger says
December 6, 2010 at 7:48 pmYou should add:
-moz-transform
(and optionally -0-transform)
transform
after ever instance of -webkit-transform
as well as after -webkit-background-clip:
-moz-background-clip (FF 3.6 and lower)
background-clip (FF 4.0, Opera & possibly some newer version of Chrome that dropped the prefix already)
matt says
December 14, 2010 at 9:56 pmIs there an easy edit to the js to make the panel hide by default on page load?
Abba says
January 21, 2011 at 4:11 pm‘article’ tag, which is the same as a div, just cleaner.
don’t say that. use ‘article’ for articles and use ‘div’ for things that are undefined.
Muneeb says
May 2, 2011 at 12:19 amI’d love to create a WordPress plugin based on your cute popup bar am I allowed or there are any license issues please let me know I’m waiting thanks.
mike says
July 29, 2011 at 4:24 amFail – wildly divergent behaviors on three browsers tested.
In fireFox 5, there is a right arrow which when clicked, turns into a little box with a fat arrow that does not go away.
Pretty cool, I thought, until I tested with IE 7 on XP -both with and without compatibility mode.
The right arrow and the popup goes away, with no way to summon the popup to return -other than a page refresh.
on Safari, the down button pulls it down, this gets turned into an up button..which hides it again.
overall..fail :(
it looks cute tho!