cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
user profile image

This is a hidden top-menu that slides down (then back up) on click - with no javascript. I'm using the :target pseudo-selector and a simple transition that makes the experience kind of pleasant.


  1. Very nice! Any idea how I could modify it so when the button is pressed and it slides downwards that it pushes the body content down with it as well? I'm afraid the menu might cover up important header text, so I'd like it to push everything down.

  2. Hmm. I think you might be able to make that work if instead of positioning the banner off the page like I'm doing, you set its original height to something like 10 or 20px, then with :target--you can optionally swap that with :hover--you make the banner appear to slide down with padding-top: 40px;. I wonder if the banner being position:fixed; has the same effect as being absolutely positioned ..., but I think the padding trick could work.

    Twitter Bootstrap does exactly what you're talking about. Brad Frost talks about this in his writeup about responsive navigation patterns. Here's a link: http://bradfrostweb.com/blog/web/responsive-nav-patterns/#toggle

  3. Nice, I really like it!

  4. Nice! I really appreciate the descriptive comments!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.