Stripe navigation in CSS

We’re sure you’ve seen it, though it seems like an official name hasn’t stuck yet. It’s that cool hover effect that seems to slide to show different content blocks as you move the mouse over the vertical or horizontal bars. It must require some scripting, right? Not necessarily.

Web Page Design for Designers (terrible name, great site) posted a pure-CSS method to achieve the effect. It’s completely unobtrusive, and your markup is simply an unordered list.

The jury is out on whether this type of ‘navigation’ works for usability. For a client’s project, you’d probably want to at least label the bars. That said, there are plenty of non-navigational uses for this slick technique, so check it out.

Filed under: CSS

Comments are closed.