Click here to Skip to main content
14,602,455 members

Menu (Hamburger) Button using CSS

Rate this:
5.00 (2 votes)
Please Sign up or sign in to vote.
5.00 (2 votes)
16 Nov 2014CPOL
How to create the hamburger menu button using CSS

Introduction

This example shows how to create the hamburger menu button using CSS. It also does color transition when you mouse over. The first button is created using 3 div elements. The second button is created using Unicode character: 9776. You can download it here: Test.zip.

Image 1

Using the Code

Here is the CSS code:

.hamburger-unicode{
    margin: 0;
    width: 28px;
    height: 28px;
    padding: 14px;
    font-size: 30px;
    color: #666666;
    cursor: pointer;    
    border: 1px solid gray;
}

.hamburger-unicode:hover{
    color: #8fc045;
    transition-property: color;
    transition-duration: 200ms;
}

.hamburger {
    margin: 0;
    padding: 15px;
    width: 25px;
    height: 25px;
    cursor: pointer;
    border: 1px solid gray;
}

.hamburger div {
    margin: 4px 0;
    padding: 0;
    background-color: #666666;
    border-radius: 2px;
    border-style: none;
    height: 3px;
}

.hamburger:hover div {
    background: white;
    transition-property: background;
    transition-duration: 200ms;
}

.hamburger:hover {
    background: #414141;
    transition-property: background;
    transition-duration: 200ms;
}

Points of Interest

If you liked this, you might also be interested in how to create a "callout box" using CSS. http://cssarrowplease.com.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Igor Krupitsky
Web Developer
United States United States
Igor is a business intelligence consultant working in Tampa, Florida. He has a BS in Finance from University of South Carolina and Masters in Information Management System from University of South Florida. He also has following professional certifications: MCSD, MCDBA, MCAD.

Comments and Discussions

 
QuestionIE 8 Pin
Member 1124784619-Nov-14 9:39
MemberMember 1124784619-Nov-14 9:39 
AnswerRe: IE 8 Pin
Igor Krupitsky19-Nov-14 20:03
mvaIgor Krupitsky19-Nov-14 20:03 
I am not sure. Do you have IE 8 to test with?
GeneralMy vote of 5 Pin
Tokinabo17-Nov-14 10:28
professionalTokinabo17-Nov-14 10:28 
SuggestionWrong Article Type Pin
DaveAuld16-Nov-14 0:54
professionalDaveAuld16-Nov-14 0:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Tip/Trick
Posted 15 Nov 2014

Tagged as

Stats

26.1K views
7 bookmarked