For the menu system on the website I’m working on, we want to have a triangular icon that indicates the item has children. The items themselves are stacked vertically and expand when clicked and so we want to icon to have two states:

  • an unopened state, pointing to the right
  • an opened state, pointing downward

To make things more interesting, the color of the item changes when expanded, so the color of the triangle should also change. And for one final request, the icon transitions between the states by rotating. Oh, and if possible, I want to use CSS3 - I’m ok if old browsers don’t get the animation.

Let’s start with what this looks like: