Article Categories

Selected Reading

How to create a Menu Icon with CSS?

CSS Web Development Front End Technology

A menu icon, commonly known as a "hamburger menu," consists of three horizontal lines stacked vertically. This icon is widely used in responsive web design to represent a navigation menu that can be toggled on mobile devices.

Syntax

.menu-icon {
    width: value;
    height: value;
    background-color: color;
    margin: value;
}

Example: Basic Menu Icon

The following example creates a simple menu icon using three div elements −

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    .menu-icon {
        width: 35px;
        height: 5px;
        background-color: #333;
        margin: 6px 0;
        border-radius: 2px;
    }
    
    .menu-container {
        padding: 20px;
    }
</style>
</head>
<body>
    <div class="menu-container">
        <h2>Menu Icon</h2>
        <div class="menu-icon"></div>
        <div class="menu-icon"></div>
        <div class="menu-icon"></div>
    </div>
</body>
</html>

A menu icon appears with three dark gray horizontal lines, each 35px wide and 5px tall, stacked vertically with 6px spacing between them and slightly rounded corners.

Example: Styled Menu Icon with Hover Effect

Here's an enhanced version with hover effects and better styling −

<!DOCTYPE html>
<html>
<head>
<style>
    .hamburger {
        cursor: pointer;
        padding: 15px;
        display: inline-block;
    }
    
    .hamburger .line {
        width: 30px;
        height: 3px;
        background-color: #2c3e50;
        margin: 5px 0;
        transition: 0.3s;
        border-radius: 2px;
    }
    
    .hamburger:hover .line {
        background-color: #3498db;
    }
</style>
</head>
<body>
    <h2>Interactive Menu Icon</h2>
    <div class="hamburger">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
    </div>
</body>
</html>

An interactive menu icon appears with three dark lines that change to blue when hovered over. The icon has a cursor pointer and smooth color transitions.

Key Properties

Property	Purpose
`width`	Controls the length of each line
`height`	Controls the thickness of each line
`margin`	Creates spacing between the lines
`border-radius`	Adds rounded corners to the lines
`transition`	Creates smooth hover effects

Conclusion

Creating a menu icon with CSS is straightforward using multiple div elements styled as horizontal bars. Adding hover effects and transitions enhances the user experience and makes the icon more interactive.

AmitDiwan

Updated on: 2026-03-15T14:13:58+05:30

995 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next