Hamburger menu has become one of the most recognizable icon in mobile design, and not only.
There are many names to call it. Hotdog menu, three-line menu, or menu button, to name a few. However, as Norm Cox said himself: “Its graphic design was meant to be very “road sign” simple, functionally memorable, and mimic the look of the resulting displayed menu list. With so few pixels to work with, it had to be very distinct, yet simple.”
And this is what it does and what it represents.
When we design in User Experience tools or we develop a website, it has become a must icon to choose. And probably the first option we think when it comes to mobile design.
From my experience, it might seem to be a smart way to display a menu shouts: “Hey, tap me- I am a menu, I can unfold” but don’t expect everyone to hear it. It is a very clever way to wrap a list of text menu within that icon. However, when it comes to work with the older age group, that menu appears to be your worst option you have on the table. So, don’t be discouraged to consider other approaches to design your menus for smaller devices. Specially, when applies to an old age group, as most of them are not quite familiar with new trends and designs.
There are four ways following with examples of how to build a hamburger menu. All of them appear to be easy enough to understand how they work. Practices that I have been following even now myself as a web developer.
So, let’s see them:
1. Bootstrap Hamburger Menu
The first option, is probably the quickest way to build a hamburger menu.
This is a ready build icon from the infamous CSS Framework. All you need to do is to import a link in your HTML file. And voila! You have it.
To resize your menu here, size values like width & height won’t do any work for you. Instead, you can control the size of your hamburger menu with the CSS property font-size.
Yep… you read well.
Bootstrap 4 is handling the icon as a text, after all the class fa fa-bars is within the Italic tag. The good thing is you can still play around with its properties and treat it as a text.
HTML:
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="navbar" title="menu">
<i class="fa fa-bars"></i>
</div>
</body>
CSS:
.navbar{
color: black;
font-size: 35px;
margin: 25px;
}
2. Unicode Character
The second option is to use a character from the Unicode IT standard. The character ☰ is nothing but a Chinese glyph, meaning the trigram for heaven.
In this case, you have even less lines of code to work on. In this example, the character is treated as a font by the CSS to give size and a color.
Also, I noticed when you display the glyph, there is an underline to it. To remove the underline completely, just set the text-decoration to none.
HTML:
<a id="nav_toggle" href="#"> ☰</a>
CSS:
#nav_toggle{
font-size: 50px;
color: black;
text-decoration: none;
}
3. The Triad of Div
The third option is the one I prefer myself mostly.
The hamburger menu is assembled by 3 divs.
The true benefit is that later on, injecting some CSS you can adjust it to your personal liking, whether it has to do with positioning, colour, size etc. You have a complete control of your menu.
HTML:
<nav>
<div class="hamburger-menu">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</nav>
CSS:
nav{
position: relative;
height: 10vh;
}
.hamburger-menu{
position: absolute;
left: 5%;
top: 50%;
transform: translate(-5%, -50%);
cursor: pointer;
}
.line{
width: 30px;
height: 3px;
background: black;
margin: 5px;
}
4. Pseudo-elements ( :before , :after )
The last creation of a hamburger menu is also an option I recommend too. Injecting your class with the pseudo-elements :before and :after.
HTML:
<nav>
<div class="hamburger"></div>
</nav>
CSS:
nav{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
cursor: pointer;
}
.hamburger{
width: 50px;
height: 6px;
background: black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hamburger:before,
.hamburger:after{
content: '';
width: 50px;
height: 6px;
background: black;
position: absolute;
}
.hamburger:before{
top: -16px;
}
.hamburger:after{
top: 16px;
}
What’s the best approach?
I’d say your approach is dependent on what you’re working on.
Always check the compatibility with each browser, specially with the Unicode character.
Like I said, it depends the type of group that your target audience is and how that menu is recognizable by that particular group.
Still you have to touch the CSS properties to give your menu the style you want.
Considering how big your project is, I’d choose something with the least code lines. And off course, I am totally hands up with having the freedom to control the design of my menu.
Top comments (2)
Thank you so much for this great article!
You welcome! I was hoping it to become a useful info for new devs more importantly