MenusLesson 3Free preview

Menu Icon

This lesson is part of How To · All levels

Summary

This lesson reviews the creation of a hamburger menu icon with pure animation with CSS. This component is the default de-facto button trigger for navigation menus on mobile devices, which transforms seamlessly into the 'X' cross symbol when clicked.

Key points

The burger icon is built using three simple horizontal lines (<div>)
Apply CSS Transform (rotate and translate) to convert lines into a crossword (X)
The smooth transition provides interactive visual feedback
Short JavaScript is used to toggle the class .change on the icon container when clicked

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.