Tom’s Two Cents: Style Navigation Menus with CSS

January 8, 2015

Blog | Development | Tom’s Two Cents: Style Navigation Menus with CSS
Tom’s Two Cents: Style Navigation Menus with CSS

There are many ways to style navigation menus with CSS, and since I like messing around with different styles (it’s the best way to learn and it’s fun!), I wanted to see what I could come up with.

Before we dig into the demo for styling navigation menus, let’s take a look at what CSS animations and transitions (both used for my demo) are. The folks over at Mozilla sum it up nicely:

CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints along the way. CSS transitions, which are part of the CSS3 set of specifications, provide a way to control animation speed when changing CSS properties.

CSS animations are neat and add a little extra to your site interactions. For this post, I put together a basic navigation implementation that I think looks really clean and clear.  I especially like how the ‘hamburger menu’ transitions into a ‘close’ button.

Check out the native demo, or you can view it full screen.

Tom Deluca, Front-End Developer, GeekHive

Tom DeLuca

Developer
Tags
  • CSS
  • Tutorial

Recent Work

Check out what else we've been working on