Pure CSS Info-Bar
how to get one..
This page describes how to create a 100% pure CSS animated drop-down information bar for your web site, like the one at the top of this page. No Javascript is required.
I use it for my site notice. The "welcome to corz.org!" message tab appears the first time you visit corz.org. If you hover your mouse over the tab, a neat information panel drops down with the current site notice (sometimes they change daily!).
The next time you visit, it's gone (if you came to this page directly, you will get a double-menu! - the usual welcome notice, and underneath that, the one I added for this page! - refresh the page to remove the welcome message and view the example underneath!).
I will show you how you can easily tweak the info-bar, have it appear only one time (like here at corz.org) or all the time like this page, fix it to the top of the viewport, move the tab left and right, create multiple info-bars, alter the animation and more.
And of course it doesn't need to be an information bar. It would be a fine place to put navigation, as well as some other things I can think of. One of those daft IE warning bars would be easy to do. In essence, it is a big chunk of HTML that you can keep off-screen until the user needs it. The possibilities are limitless.
When I get a chance, I will explain how each part works, so you can not only reproduce but understand the code. Here goes..
The "Trick"..
It's not much of a trick, elephants don't disappear, but still, a huge information panel, does. Simply put, we set the top-margin off-screen by a set height, and when the (CSS-generated) tab is hovered over, we switch the top-margin to zero using a CSS transition to animate the entire effect.
It's simple and as you can see, highly effective.
The HTML Markup..
Simply create a <div> with a class or id you can get to in your CSS..
<div class="site-notice-bar" data-tab-text="welcome to corz.org!">
<p>This is the content of the information panel.
</div>
It doesn't matter too much where it goes in your markup (I spit mine out from the footer) - we will use CSS (obviously!) to place it in the desired physical location. You will want it outside any positioned contained, so that it can be set absolutely to the top of the page. Directly after your opening <body> tag or navigation, or just before the <footer>, is ideal.
Note the extra property for the <div>, "data-tab-text". This is where you put whatever text you want inside the visible tab. Keeping it inside the <div> enables the CSS to be completely portable and re-usable. All the text can be set from within the markup.
And that's all there is to having a permanent CSS Info-Bar on your page. That, and a little CSS magic, of course..
* Note, that string used for the name of the attribute is completely arbitrary, you could use "my-funky-text" if you desire, so long as the markup and CSS match. I tend to use "data-something" for data attributes, so that I can instantly recognise their purpose in the future.
The CSS..
There isn't that much to it. We start with a small (narrow) screen version, which simply dumps the info-bar as a nice big box, at wherever it is in the markup. The big margins ensure it is noticed. Essentially, this is a "fall-back" mode for smaller screens.
As I mentioned, my notice is spat out in the foot of the markup, so on small screens the notice appears at the foot of the page, after a scroll, if they even do. If your notice is extremely important, you will want to either;
-
Place the
<div>near the top of your markup, like I did on this page. Or.. - Don't have a separate version for small screens.
In this case, you will probably want to consider using smaller
content(thedata-tab-text), so the tab doesn't cover the entire screen! Instead of"welcome to my domain", you might place a cute wee background image with a descriptive icon. I'll leave that as an exercise, for now.
Here is the chunk of CSS code that performs the magic..
note: the colors are generated from my default (oranges) scheme./*
Pure CSS Animated Drop-Down Info-Bar
Regular version
;o) @ corz.org
*/
.site-notice-bar::before, .site-notice-bar {
transition: all 300ms ease-out;
position: relative;
display: block;
background-color: #f9e7aa;
color: #E8910D;
border: solid .2rem #fbb627;
font-weight: bold;
font-size: 110%;
}
.site-notice-bar {
width: 90%;
padding: 1rem;
margin: 10rem auto 3rem;
box-shadow: 0 0 1rem #FFC44D;
border: solid .2rem #FFC44D;
border-radius: .5rem;
-khtml-opacity: 1;
opacity: 1;
}
.site-notice-bar > p {
margin: 1rem auto;
max-width: 90%;
}
@media screen and (min-width: 921px) {
.site-notice-bar::before, .site-notice-bar {
position: absolute;
border-top: none;
border-bottom-right-radius: .5rem;
border-bottom-left-radius: .5rem;
padding: 0;
}
.site-notice-bar::before {
content: attr(data-tab-text);
left: 27%;
margin-top: 12rem;
padding: .5rem 1rem;
cursor: pointer;
z-index: 100;
display: block;
}
.site-notice-bar {
top: 0;
margin-top: -12rem;
height: 12rem;
width: 80%;
left: 10%;
z-index: 101;
-khtml-opacity: 0.66;
opacity: 0.66;
}
.site-notice-bar:hover {
margin: 0;
-khtml-opacity: 1;
opacity: 1;
}
}
If you are paying attention, you will spot that the style sheet is back-to-front from the usual @media query method. If I had the time, I'd re-code the entire site this way. One day!
If you would prefer a version which works in the traditional @media query if smaller than {px} do this, see here.
Tweaking the code
There is no limit to the variation you can apply to the Info-Bar, being simply HTML + CSS. Here are a few examples..
-
Fixed Position
The first thing you may want, is to fix the panel to the top of the viewport, so no matter how far the user scrolls down the page, it remains at the top of the viewport.
-
Movable Tab Position
It's trivially easy to have a left or right-hand tab.
-
Multiple Tabs!
One more div, a line of CSS and Wham! There's another tab!
-
Multiple Nested Tabs!
Finally, we put a
<div>inside a<div>inside a<div>and shake it all about! This is probably my favourite multi-tab example. Not only can you access all the tabs with all the panels expanded, but it just looks neat.
Creating a One-time Drop-Down Notice Panel.
As I mentioned, I use this for my site notice, which appears the first, and only the first time you visit corz.org on any particular day. To achieve this, we use cookies.
Everyone knows what HTTP cookies are by now, surely! If not, they are small chunks of data web sites place in storage in your own personal computer's browser. Usually they are used to remember things about your site (or other) preferences.
Cookies are sent with every request you make to the site that placed them. After you first visit to corz.org, you will have a cookie in your browser from corz.org named "notice" and its value will (hopefully!) be set to "seen".
My site's back-end checks for the existence of this cookie when deciding whether or not to show you the site notice. Simple.
Here's how, in php..
highlighted source generated dynamically with corz distro machine..<?php
/*
php code to set a one-time daily notice.
for use with the Pure CSS Drop-Down Info-Bar, or whatever you like.
cor + corz.org ;o)
*/
// this is a flag which will be checked in the footer.
// if set to true, we will print out the site notice..
$site_config['do_notice'] = false;
// check for existence of cookie..
if (empty($_COOKIE['notice'])) {
// set the notice flag..
$site_config['do_notice'] = true;
// set the cookie..
setcookie ('notice', 'seen', time() + (60*60*24), '/'); // 24 hours
}
?>
You will want to perform this sort of checking in your page/site initialization, rather than on the page. For starters, setcookie() will fail if any content has already been sent to the browser. (hint, use ob_start(); right at the start of your site code!)
Then it's simply a question of checking for the flag in your footer, and if set to true, spit out your notice!
highlighted source generated dynamically with corz distro machine..<?php
/*
php code to print a one-time daily notice.
cor + corz.org ;o)
*/
if (isset($GLOBALS['site_config']['site_notice']) and $GLOBALS['site_config']['site_notice'] == true) {
echo '
<div class="site-notice-bar nocontent" data-tab-text="welcome to this page!">
<p class="bigger">Welcome to my Site!
<p>There is so much going on today, I don\'t know where to start!
</div>';
}
?>
If you are already in php omit the <?php?> tags!
That's it!
So there you have it - a beautiful, functional, animated drop-down information panel in pure CSS.
What more could a page want?
for now..
;o) corz.org