Introduction to Menu Icon in CSS
The web pages that we access, have evolved at a sky rocketing pace and are continuing to do so. However, the basic structure of the pages continues to be similar to the earlier ones with more dynamics added to it. There are certain things that a web page must mandatorily have. One such checkpoint for validating a web page is the triple bar menu icon, which upon clicking, opens like an accordion to give a visitor an overview of what all they can explore on the website.
Examples of Menu Icon in CSS
In this article, we will explore various methods of how we can create a menu icon with the help of CSS and HTML. Let’s have a look at the example:
Example #1 – Creating a basic menu icon through CSS.
We will write a simple CSS code to create the bar with specific height and width and call for the tag in the HTML page three times, to get the resultant triple bar icon.
a. Create a style sheet (namely MenuIcon.css), and write the definition for the <div> tag as specified below:
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
b. Now, create an HTML page, TestIcon.html. We will call the stylesheet and use it to create a menu.
4.5 (5,878 ratings)
View Course
<html>
<head>
<link rel = "stylesheet" href = "MenuIcon.css">
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
c. Save the page and open the HTML file through IE/Chrome/Firefox to see the result. There will be a menu icon on the top left corner of the page.
In this example, there have been height and width of each horizontal bar specified. The margin adds some distance between each bar and the background color of black, highlights each bar, to look like a menu bar together.
Example #2 – Animating the Menu Icon using CSS.
a. In this example, the bars have created a CSS class menu within which we created specifications for div and created its pseudo-elements of CSS, i.e. After and Before. The size of the menu is defined which will encapsulate the bars of the menu icon, the size, and margins for div is defined which will be the middle bar and the pseudo-elements after and before will be the upper and lower bar of the menu icon.
.menu{
margin: 1em;
width: 40px;
}
.menu:after,
.menu:before,
.menu div {
background-color:black;
border-radius: 3px;
content: '';
display: block;
height: 5px;
margin: 7px 0;
transition: all .2s ease-in-out;
}
b. Now, we will be working on the animation of the icon using the first and the third bar, which are pseudo-elements Before and After.
.menu:hover:before {
transform: translateY(12px) rotate(135deg);
}
.menu:hover:after {
transform: translateY(-12px) rotate(-135deg);
}
.menu:hover div {
transform: scale(0);
}
c. The logic for animation is such that, the upper bar (before) and the lower bar (after) rotate to the specified angle and direction when hovered upon. The middle bar (div) transforms to 0 i.e. vanishes, upon hovering.
d. Here is the complete CSS code for this animation:(menuIcon.css)
.menu{
margin: 1em;
width: 40px;
}
.menu:after,
.menu:before,
.menu div {
background-color:black;
border-radius: 3px;
content: '';
display: block;
height: 5px;
margin: 7px 0;
transition: all .2s ease-in-out;
}
/* Move the upper bar */
.menu:hover:before {
transform: translateY(12px) rotate(135deg);
}
/* Move the lower bar */
.menu:hover:after {
transform: translateY(-12px) rotate(-135deg);
}
/* Make the mid bar fade out */
.menu:hover div {
transform: scale(0);
}
e. Now, we will use this CSS code through an HTML file to see the final output.
<html>
<head>
<link rel = "stylesheet" href = "MenuIcon.css">
</head>
<body>
p>Hover over the Menu Icon to change it to X:</p>
<div class="menu">
<div></div>
</div>
</body>
</html>
The output for the same is:
Example #3 – Writing CSS and JavaScript functions to animate the menu icon.
a. Another method is to create a CSS icon with the transformation of each bar and call it on click-through a javaScript function.
b. For writing the CSS code, we will define a menu class similar to the previous example. Instead of pseudo-elements, we will create three classes for each bar (before, mid and after). We will apply to transform logic on each icon accordingly and make our CSS code ready (menuIcon2.css)
.menu{
margin: 1em;
width: 40px;
}
.before, .mid, .after {
background-color: #333;
width: 40px;
height: 5px;
margin: 6px 0;
transition: all .2s ease-in-out;
}
/* Animate bar#1 */
.change .before {
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* make bar#2 vanish post tranformation */
.change .mid {
transform: scale(0);
}
/* Animate bar#3 */
.change .after {
transform: rotate(45deg) translate(-8px, -8px) ;
}
c. Once this CSS code is ready, we will write a small function to trigger the transformation of the menu icon into a cross icon. We will be calling this function in the HTML file, such that the transformation of icon to X happens on the click of the mouse.
function menuIcon(x) {
x.classList.toggle("change");
}
d. We will call this function in an <script> in our HTML file along with calling the CSS classes created. The final HTML file should look like this:
<html>
<head>
<link rel = "stylesheet" href = "MenuIcon2.css">
<script>
function menuIcon(x) {
x.classList.toggle("change");
}
</script>
</head>
<body>
<p>Click on the Menu Icon to change it to X:</p>
<div class="menu" onclick="menuIcon(this)">
<div class="before"></div>
<div class ="mid"></div>
<div class="after"></div>
</div>
</body>
</html>
e. When we check the HTML file, the output should look like this:
On clicking the menu icon, it will transform to X:
Conclusion
So, these were some examples of how we can create and animate menu icon using simple CSS and HTML. More options can be tried by modifying the transform logic. There are many other types of transformation on the menu icon that we come across every day on different web pages. Some of them are very interesting to look at. But now that we know the basic logic to create the iconic menu icon, trying different transform logics will rather be fun.
Recommended Articles
This is a guide to Menu Icon CSS. Here we discuss the basic concept and various examples of menu icon in CSS. You may also have a look at the following articles to learn more –
