Grow your CSS skills. Land your dream job.

Pop From Top Notification

Published by Chris Coyier

Have you seen that design pattern where a notification pops down from the top of the browser window, then slides away? We can rock that in pure CSS.


View Demo   Download Files

We'll just make a div:

<div id="note">
    You smell good.
</div>

Then we'll style it and put it on the top of the screen:

#note {
    position: absolute;
    z-index: 101;
    top: 0;
    left: 0;
    right: 0;
    background: #fde073;
    text-align: center;
    line-height: 2.5;
    overflow: hidden; 
    -webkit-box-shadow: 0 0 5px black;
    -moz-box-shadow:    0 0 5px black;
    box-shadow:         0 0 5px black;
}

Let's animate it

With a keyframe animation, we can "hide" it above the browser window and bring it down for a short while:

@-webkit-keyframes slideDown {
    0%, 100% { -webkit-transform: translateY(-50px); }
    10%, 90% { -webkit-transform: translateY(0px); }
}
@-moz-keyframes slideDown {
    0%, 100% { -moz-transform: translateY(-50px); }
    10%, 90% { -moz-transform: translateY(0px); }
}

Er... let's consider other browsers quick

But let's consider browsers that don't have transforms and animations for a second. For those, we'd want to default to just showing the notification bar at all times, with the ability to dismiss it.

So we'll make a custom build of Modernizr to test for transforms and animations, load that up, then we can write CSS to test for those features and only fire off the animations if we're in a browser that supports them.

.cssanimations.csstransforms #note {
    -webkit-transform: translateY(-50px);
    -webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;
    -moz-transform:    translateY(-50px);
    -moz-animation:    slideDown 2.5s 1.0s 1 ease forwards;
}

The 1.0s in there is the delay before the animation runs. Best to wait a minute to make the notification more noticeable.

Now we'll add a close button into the HTML:

<div id="note">
    You smell good. <a id="close">[close]</a>
</div>

And a tiny bit of JavaScript at the bottom of the page so that the non-supporting browsers can close the notification.

<script>
 close = document.getElementById("close");
 close.addEventListener('click', function() {
   note = document.getElementById("note");
   note.style.display = 'none';
 }, false);
</script>

Look ma, no libraries.

Since we don't need that close button in browsers that do support the animations, we'll hide it:

.cssanimations.csstransforms #close {
  display: none;
}

For the record, this should work OK on mobile browsers (tested Mobile Safari). There is no fixed positioning used here, only absolute, and that's going to be less of a problem moving forward anyway (might want to consider making it fixed so even if the user is scrolled down the page they'll get it).

Enjoy

View Demo   Download Files

Comments

  1. Permalink to comment#

    Another idea under the shower? ;-)

  2. T.J. Crowder
    Permalink to comment#

    Cool tip! But:

    Look ma, no libraries.

    …and also no support for IE6, IE7, or IE8, which don’t have addEventListener. I’m normally a big supporter of DOM2-style handler attachment (with fallback to attachEvent), but for such a simple use case, old-fashioned DOM0 works:

    close.onclick = function() {
      note = document.getElementById("note");
      note.style.display = 'none';
    };

    You’re also falling prey to The Horror of Implicit Globals, creating global close and note variables. Recommend either

    <script>(function() {
      var close = document.getElementById("close");
      close.onclick = function() {
        var note = document.getElementById("note");
        note.style.display = 'none';
      };
    })();</script>

    or

    <script>
    document.getElementById("close").onclick = function() {
      document.getElementById("note").style.display = 'none';
    };
    </script>
    • Excellent, thanks T.J.!

      Obviously, I suck at JavaScript.

      I’m just going to make it jQuery. Obviously there is a lot to learn about even such simple things and I’d rather use and recommend something that just works.

    • I for one like to implement these “notifications from top” inside the markup and then call them after a certain XHR request finishes or a JavaScript related task is done doing some magic. Since that’s not on a DOM based event and the JavaScript itself already knows when to fire the element, the firing of the element could be done with JavaScript anyways.

      xhr.get('http://css-tricks.com');
      xhr.isDone(displayNote);
      
      var displayNote = function(){
          var n = document.getElementById('note');
          n.innerHTML = xhr.responseText;
          n.style.visibility='visible'; // Of course we should animate this IRL
          setTimeOut(hideNote,5e3); // Hide after 5 seconds
      },
      hideNote = function(){
          var n = document.getElementById('note');
          n.style.visibility='hidden'; // You could also choose for display block/none
      }

      (Note: in this example, I make use of the XHR Object I’m developing, but the usage should be clear.)

      Now, you could append a class to the element to achieve the effect, but then again, the browser support is still not there yet, so you want to fall back to JavaScript anyways. Still, a great demonstration, but in this case I think you chose a wrong use case. I would like for anyone to contradict me and see the usefulness of such a message onload or at another DOM event.

  3. Torsten
    Permalink to comment#

    This is just great, and accidentally right in time when i needed such little banner.

    My question is, what would the approach be if i want to make this banner appear only once per visit and not every time i reload the page on a normal html page?

    Do i have to do that with session cookies and such?

    Torsten

  4. Keith
    Permalink to comment#

    Hi Chris, thanks for posting this.

    One note, I get a js error in IE8 on the demo page.

    “Object doesn’t support this action, PopFromTopMessage, line 77, character 4.”

    • T.J. Crowder
      Permalink to comment#

      See my comment above, IE8 doesn’t support addEventListener. Alternate code given there should work.

    • Keith
      Permalink to comment#

      Thanks T.J.

      Actually, I wasn’t looking to use this code, I just wanted to give Chris a heads-up about the error. Looks like he’s changed the code now and the error is no longer there.

      :)

  5. Dave
    Permalink to comment#

    This would seem like a nice neat way to ‘suggest’ that your users try a different browser.

    Detect the browser they are on, and if it is IE or an old FF or something, pop down the bar suggesting they upgrade/try alternatives.

    Well, it would be a good idea if it wasn’t for the problems I’m reading above in IE7/8 :)

    • You still could do that. There are other event listeners in IE and you could still do a browser detection and suggest that, but I wouldn’t force it on your visitors.

  6. This is one of those grey areas where we should lean more towards using JavaScript, although CSS can be useful. I wouldn’t go out of my way to pull this off with CSS, but there might be cases where you run a JavaScript-less website and still want to achieve this. I for one could see people make a curtain effect as an intro to the landing page.

  7. cnwtx
    Permalink to comment#

    You can also use a sticky bar from Dynamic Drive. Simply put a line saying that this browser is not recommended, then they mouse over, and get the links to browsers you recommend. You can read more at http://www.dynamicdrive.com/dynamicindex17/stickybar.htm.
    And no, I don’t work for them, just a satisfied user.

  8. i don’t like the idea of doing animation with css. that’s not what it should be for. css is for styling, not for interaction. javascript should manage the animation.

    • Respectfully disagree. JavaScript is for behavior and interaction, I agree, but the animation itself is part of the design and the ideal is keeping that to the CSS.

      WHEN this message is appended and WHY is JavaScript concern, but WHAT it looks like, how long it’s there, how it slides down, what color it is, etc, feels good in CSS.

    • I read somewhere earlier “If you can see it, use CSS” and I have to say I agree. I know where still a little off of having awesome CSS3 stuff just be the go to and we’ll have to deal with JS fallbacks for a while to come, but you’ve got to think we’re right around the corner from this being the case.

  9. Lea Verou has something similar on her site and I like this one quite a bit. It’s like a little alert without being completely annoying.

  10. hey, why that thing is dissapear here? something wrong with demo page? or anything else?

    I wanna see the demo :((

  11. Permalink to comment#

    Really cool how you did it with just CSS.. but I have one problem the note div actually blocks the the “back home” button, I think instead of just moving it out of view you should display:none; as well.

  12. Chris, I don’t know if you’re aware but here in the UK the government have passed a bill making it law for all UK websites to ask the users permission BEFORE storing cookies.

    It’s a stupid law, but they’ve done it nonetheless. UK websites have until sometime next year to comply.

    Anyway, basically I’m thinking this could be a way for us to do this. There’s only two problems, the first is browser compatibility, the second is it vanishes on its own, I’d like it to have a “close” button.

  13. Lauri
    Permalink to comment#

    Great article as usual.

    And I love css-tricks.com’s design. I’ts elegant and beautiful.
    Awesome.

    -Lauri from Finland

    P.S. Mikael Granlunds goal against Russia at hockey WC2011….wadup

  14. jsdev
    Permalink to comment#

    @Chris, did you mean for the second demo link to point to first demo up top. Because in the code that precedes the 2nd Demo link it includes [close] click functionality I don’t see in the Demo. Surprised no else noticed.

    • You’ll only see the close click functionality if you are viewing in a browser that doesn’t support the transitions and transforms.

  15. Nice tutorial as always. It seems to be a lot of work to do this in CSS though, so I’m wondering what the benefits are over a simple JQuery bit.

    $("#topnote").hide();
    $("#topnote").delay('2000').slideToggle('slow');
    $("#topnote").delay('10000').slideToggle('slow');

    does this just fine, and you don’t have to worry about the cross-browser compatability issues.

    Mike

  16. Permalink to comment#

    Cool tutorial. It would be nice it shows up again when the mouse moves close to the top.

  17. Permalink to comment#

    Is there a nice WP plugin for this?
    And will I get notified of reply? :-)
    Thanks

  18. Gvidas
    Permalink to comment#

    Hi,very good article,but just one question,is it possible to do something like in http://salleedesign.com/portfolio/ when message staying until you turning that off? thanks!

    • Gvidas
      Permalink to comment#

      Sorry,to view that message if not showing then you going to that website you need to press green button in the right side on header! :)

  19. Chris Pearce
    Permalink to comment#

    Nice technique.

    Just on semantics, you should be using a button for the close not an anchor e.g.

    &ltbutton type=”button”>close&lt/button>

    &ltinput type=”button” value=”close”>

    • Gvidas
      Permalink to comment#

      Oh thanks,i didnt saw that..Btw how to make for example if i pressed that once i dont wanna show that again? thanks !

    • @Chris Pearce, what’s your argument for a button tag being more semantically correct as opposed to a link?

  20. This seems to have a bug in Safari that prevents you from clicking anything that was covered by the Note div until you click it 5 times or more. I’m not quite sure what to change, since it works fine in Chrome.

  21. Vinny
    Permalink to comment#

    Hey, I was using this on a site I am making but I have a question. How would I make this for multiple notifications? I’m kinda new to coding so any help would be appreciated.

  22. Hannah
    Permalink to comment#

    Hey.. very nice site for a beginner like me..
    I like to use this feature. Problem is my site is in Joomla 1.7 and do not know how the home page is generated. My problem is posted here.

    http://forum.joomla.org/viewtopic.php?f=619&t=650761

    Can some one please help so that I can use this bit of code in my site.

    Thanks a lot in advance.

  23. Hannah
    Permalink to comment#

    Ok further investigation reveals that it’s index.php in the root of Joomla 1.7 which generates the home page. So the question is how can I use this code in index.php

    I know a little css and should be comfortable however do not really know where I can add this But do not know where I need to add this html tag :

    div id=”note”>
    This site is best viewed with Firefox.
    /div>

    (I know the pasted code is wrong)

  24. Hannah
    Permalink to comment#

    Hi ..I now have solved this problem. But this notification is now coming in every page and every time I refresh the site. What I want is for this notification to come only once per visit and once visitor closes it for that session it should not appear even if the visitor refreshes the site. How can this be achieved please?

    I am a newbie.

  25. Permalink to comment#

    Hi,
    Great feature!

    I tried playing around with it; however, my bar starts off on-screen.

    How do I fix that? Which pixel settings do I change?

    Many thanks,

    Lee

    • Permalink to comment#

      never mind, I found a solution:

      to fix this, make the amount of pixels less than the screen (in the css #note) :
      -moz-transform: translateY(-550px)

  26. I love this top notification slider. Would be nice to have a plug in for wordpress.
    Nice work guys.

  27. Itay
    Permalink to comment#

    Thanks a bunch!

    I played with it a bit to figure out a way to trigger functionality with JS.

    To trigger the animation, separate the animation to a unique CSS class and then when needed assign the class to the notification bar.

    The problem is that once it’s done, it won’t trigger the animation again. The solution, set up a setTimeout function to remove the animation class when the animation is over. That way, your script can restart the animation over and over again.

    Good luck!

  28. Robson
    Permalink to comment#

    It’s awesome!!

    But… How can I trigger the message by javascript? I would show notifications in that top bar message.

  29. palaykkatu
    Permalink to comment#

    Hi,

    Is it possible to show this only once on a browsing session. As a cookie alert window. You accept the cookie policy and then this will not pop down again!…any script for this?? :)

    thanks in advance

  30. Todd Thelin
    Permalink to comment#

    I am running into a problem where the animation is not working. What could I possibly be doing wrong?

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".