How TO - Menu Icon
<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]-->
How TO - Menu Icon
❮ Previous
Next ❯
Learn how to create a menu icon with CSS.
How To Create a Menu Icon
If you are not using an icon library, you can create a basic menu icon with CSS:
Menu Icon:
Try it Yourself »
Animated Menu Icon (click on it):
Try it Yourself »
function myFunction(x) {
x.classList.toggle("change");
}
Step 1) Add HTML:
Example
<div></div>
<div></div>
<div></div>Step 2) Add CSS:
Example
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}Try it Yourself »
Example Explained
The width and the height property specifies the width and height
of each bar.
We have added a black background-color, and the top and bottom margin
is used to
create some distance between each bar.
<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]-->
Animated Icon
Use CSS and JavaScript to change the menu icon to a "cancel/remove" icon when it is clicked on:
Step 1) Add HTML:
Example
<div class="container" onclick="myFunction(this)">
<div
class="bar1"></div>
<div class="bar2"></div>
<div
class="bar3"></div>
</div>Step 2) Add CSS:
Example
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate
first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the
second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform:
rotate(45deg) translate(-8px, -8px) ;
transform:
rotate(45deg) translate(-8px, -8px) ;
}Step 3) Add JavaScript:
Example
function myFunction(x) {
x.classList.toggle("change");
}Try it Yourself »
Example Explained
HTML & CSS: We use the same styles as before, only this time, we wrap a
container element around each <div> element and we specify a class name for
each.
The container element is used to show a pointer symbol when the user moves
the mouse over the divs (bars). When it is clicked on, it will execute a
JavaScript function that adds a new class name to it, which will change the
styles of each horizontal bar: the first and the last bar is transformed and
rotated to the letter "x". The bar in the middle fades out and becomes
invisible.
❮ Previous
Next ❯
