50 Projects in 50 Days, Day 14: Animated Navigation

50 Projects in 50 Days, Day 14: Animated Navigation

This quick little project from 50 Projects in 50 Days leans heavily on CSS transformations and transitions to achieve a neat expanding/contracting effect along with a fun animation on the 'X' used to contract the menu. It's also the first of the projects in the course to be presented by Florin Pop.

There are actually several simultaneous uses of the CSS transition effect:

  • The width property for the navigation bar expands or collapses
  • As that happens, a transform applies a rotateY() to each of the items in the navigation list, which gives the effect that the items are spinning while the menu bar shrinks or expands
  • There are two tiny divs that, via some fancy positioning, cross to form an 'X' when the menu bar is expanded or rotate into an "=" when the bar is collapsed

The CSS to achieve that last effect ended up being much simpler than I thought it would be when I was watching the overview video:

nav.active .icon .line1 {
  transform: rotate(-765deg) translateY(5.5px);
}

nav.active .icon .line2 {
  transform: rotate(765deg) translateY(-5.5px);
}

Altogether a fun little project and some neat uses of CSS.

My Project: Animated Navigation