HTML: Adaptive menu

Last update: 22 May 23:20
1
Student
100%
Completion rate

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

Unexpanded menu when width is less than 500px

Expanded menu when the width is less than 500px

Unexpanded menu when 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.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests