Chapter 4: Menu Icon

How to create a Menu Icon (also called hamburger menu icon, navigation toggle icon, or mobile menu button).

This is the famous three-line icon ≡ that almost every mobile website and app uses to open a side menu or navigation drawer.

We will build it from scratch in several common ways so you understand the concept deeply and can choose what fits your project best.

What we want to achieve (visual goal)

• Three horizontal lines
• Looks clean and modern
• Changes into an X (close icon) when clicked
• Smooth animation
• Works on mobile and desktop
• Can be done with pure CSS or very little JavaScript

Let’s start with the most common and cleanest approaches.

Method 1 – Pure CSS Hamburger → X (most popular 2024–2026 style)

Step 1 – HTML structure

Important notes about HTML:

• We use <button> (not <div>) → better for accessibility
• aria-label → screen readers understand what it does
• Three <span> elements → these become the three lines

Step 2 – CSS (very detailed)

Step 3 – Tiny bit of JavaScript (to toggle the class)

Result: You now have a very clean hamburger icon that smoothly turns into an X when clicked.

Method 2 – Using only one element (very modern & minimal)

Many designers now prefer this version because it has fewer DOM elements.

Same tiny JavaScript:

This version is cleaner in HTML and very popular in 2025–2026 minimalist designs.

Method 3 – Animated with scale + rotation (fancy version)

This one feels more playful — good for creative websites.

Just add class=”menu-toggle fancy” and it gives a nice twist effect.

Quick checklist – things good teachers always remind students

• Always use <button> (not div) → accessibility
• Always add aria-label=”Open menu” or aria-expanded=”false/true”
• Use transition with cubic-bezier for smoother feel
• Make sure there is enough padding around the icon (44×44 px minimum for touch targets)
• Test on mobile — tap area must feel good
• When the menu opens → change aria-label to “Close menu”

Example with aria-expanded:

Variations you should know

1. Thicker bars (bold style) → height: 4.5–5px
2. Rounded bars → border-radius: 4px
3. Color change on active → .active .bar { background: #e63946; }
4. Scale effect on hover → transform: scale(1.1);
5. Animated dots version (like LinkedIn mobile) → three dots → X
6. Only icon changes, no text → common on mobile
7. Icon + word “Menu” → better for some desktop layouts

Your next practice tasks

1. Make the X red when active
2. Add a very subtle scale animation when clicking
3. Make the bars shorter when open (like many apps do)
4. Create a version that becomes an arrow instead of X
5. Combine it with an actual side menu that slides in

Would you like me to explain any of these next steps in detail?

Examples of things I can show you:

• How to make the side menu slide from left when clicking
• How to do it with only CSS (no JavaScript at all)
• How to make it with SVG instead of spans
• How to animate it with Framer Motion (React)
• How to make it look like popular apps (Instagram, YouTube, Spotify…)
• How to make it accessible for keyboard & screen readers
• Common beginner mistakes and how to avoid them

Just tell me which direction you want to go next — I’ll explain it slowly and with complete examples. 😊