Stackoverflow-like top information bar
HTML
<div id="notification">
<p>Here is your notification</p>
<a href="#" class="close">x</a>
</div>
<div id="content">
<p>Click the button below to get the notification showing up.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<a href="#" class="clickMe">Click Me</a>
</div>
CSS
#content {margin: 1em 0}
#notification {display: none; background: #aa4444; padding:0.5em 0.5em 1em; position:relative}
.close {display: block; position:absolute; right: 0.5em; top: 0.5em; width: 1em; line-height: 1em; padding: 3px; border: 1px solid #fff; text-decoration: none; color: white; text-align: center}
JavaScript
$(function () {
$('a.clickMe, a.close').bind('click', function (e) {
$('#notification').fadeToggle('slow');
e.preventDefault();
});
});