In this challenge, you have to implement the adaptive menu "Hamburger".
The essence of such a menu is simple: at a given screen width, the menu disappears, and an icon appears in its place. This icon is usually in the form of three lines under each other. Because of the unintentional resemblance of the icon to the well-known dish, this implementation of the menu was called "Hamburger".
As of now, the menu adapts without hiding menu items. Your task is to hide the menu when the width is less than 500 pixels, and display the icon in its place. Clicking on an icon opens a menu below it.
Unexpanded menu when the width is less than 500px
Expanded menu when the width is less than 500px
Menu implementation for viewport width over 500px should remain the same.
Exercise
Implement a hamburger menu using a label + checkbox bundle, with which you can track when the icon is clicked and the menu expands.
Icon size: 50px
Hints
- You can see the final results at different resolutions in the directory __tests_/_image_snapshots__
- The icon is located in the assets directory
- The checked pseudo-class will help you solve the problem
- Implement the icon using the background image of the pseudo-element
For full access to the challenge you need a professional subscription.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.