How to Create a Menu Icon with HTML and CSS and without using a Library
Icons and Menus
How To, for Web Applications
By: Chrysanthus Date Published: 19 Feb 2025
Two examples are used for illustration in this tutorial. The first example is a small figure having three narrow horizontal black stripes, of the same length, placed one below the other. The second example is the same figure with some transformation and transition (see below for description of the transformation and transition). A bit of JavaScript is used to toggle the two designs for the second example.
The HTML skeleton code for either of the icons is as follows:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
The icon is a small container div element (not shown above), which will be coded in the body element of this HTML code. The small horizontal black stipes are smaller div elements inside the container div element. The container div element is inline-block, so that other inline elements can be placed on the left or right side of the container div.
An inline-block element allows the specification of width and height and can contain block elements, which the browser has to respect, while the browser does not have to respect the width and height expectations for just an inline element.
The JavaScript element in the head element will be left empty for the first example, as JavaScript is not expected to be used to produce the icon.
The styles (CSS rules) for the icons of the two examples, will be coded inside the style element in the head element.
The reader should save and open the two HTML files given below, in order to experience the two icons.
Icon without Transformation and without Transition
This section is for the first example. The code for the container div element is as follows:
<div class="container">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
Note that each inner div element is empty (has empty content).
The outer div element is the container. The three inner div elements are the short narrow horizontal black stripes. Since these 3 div elements together occupy a small area, and they are the only content of the container div element, the container div element also occupies a relatively small area; and so the icon is small, as the container div element is considered, the icon.
The background-color of each of the inner div element is black. Note that it is the background-color that is black and not the foreground-color. In fact, there is no real foreground-color for an HTML element. There is foreground-color for text, simply referred to as color. The color of the margin of each of the narrow bars, is the default color, which is white. This margin color can be seen as the foreground color for the div element, but such naming is not really correct. No "foreground-color" and no background-color is specified for the container div element, and so the browser chooses the default white color for the container (div).
Each inner div has a size of 35px-by-5px. Each inner div has a top and bottom margin of 6px, which gives separations between the black stipes. Each inner div has a left and right margin of 0px.
With all that, the code for the CSS rules is:
div.container {
display: inline-block;
}
div.container .bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
And there you have it: code for a non-animated icon. The compete HTML/CSS code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.container {
display: inline-block;
}
div.container .bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</body>
</html>
Save the file with a name and the extension, .html; and then open the file in a browser. You should see the icon at the top-left corner of the opened page.
Tooltip for the Icon
If the icon is not accompanied by text on its side, to indicate what it is, then there should be a tooltip for the icon to indicate what the icon is. This is achieved by giving the container div element an HTML title attribute with value. The value text is the indicator. The following code illustrates this:
<div class="container" title="Open Sidebar">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
The value of the title attribute is the text, "Open Sidebar". When the mouse pointer goes over the icon, the tooltip, "Open Sidebar" will appear. However, code to open any sidebar has not been addressed in this tutorial (see one of the next part of this series for that).
Different Background Color on Mouse Over
It is also good to have a slightly different background color, when the mouse pointer is over the icon. To achieve this, use the CSS :hover pseudo-class on the div container, in the style element as follows:
div.container:hover {
background-color: lightgray;
}
When the mouse pointer goes over the icon, the background color of the container div, becomes light-gray. Of course, when the mouse pointer goes out of the icon, the background color goes back to its original value. There is no extra coding for this going out of mouse pointer.
Converting the Icon into a Hyperlink
To convert the icon into a hyperlink, place the div container as content for the anchor element as follows:
<a href="https://www.examplee.com">
<div class="container">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</a>
Icon with Transformation and Transition
The above icon is used here with transformation and transition. Those combined two effects can be seen as animation, though animation has its own CSS coding scheme. Here, transformation involves translation and rotation. Transition refers to the time taken, between start of transformation and end of transformation. For the animation, when the icon is clicked, the middle bar fades out in 0.4 second, the top bar is translated and rotated in the same 0.4s, and the bottom bar is translated and rotated in the same 0.4s. The result is an icon of the X symbol (character). When the icon is clicked again, the complete reverse takes place. So, the start tag of the outer div element needs an onclick event, for this toggling effect. The div elements assembly becomes:
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
The difference between this code and its previous counterpart, is the presence of the onclick event here.
When the mouse pointer goes over the icon, it should become the hand indicator, to show that if clicked, some transformation with transition will take place. So the first code segment for the content of the style element is:
div.container {
display: inline-block;
cursor: pointer;
}
where "cursor: pointer" specifies that when the mouse
pointer goes over the icon, it becomes a hand indicator.
When this animation icon is clicked, it changes from bars to X. When clicked again, it changes from X to bars. There are three "change" CSS rules to cause the change from bars to X. There is a short JavaScript code to oversee the toggling either way. The word, "toggle" here, means change from one form to another, and then change back to the original form. The three change CSS rules are:
/* Rotate first bar */
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
/* Fade out the second bar */
.change .bar2 {opacity: 0;}
/* Rotate last bar */
.change .bar3 {
transform: translate(0, -11px) rotate(45deg);
}
The first rule here, causes some translation and rotation of bar1. The third rule here, causes some translation and rotation of bar2. The third rule here causes bar2 to fade out completely. All these three changes take place in the same 0.4s. The reverse takes place in the same 0.4s. With the transformation and transition, the CSS rule for the container div element becomes:
div.container .bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
transition: 0.4s;
}
This code is the same as the container rule for the non-animated icon, but with the exception of the inclusion of the last declaration, "transition: 0.4s;" . Note that 0.4s is only typed once, for the complete HTML/CSS code. The JavaScript code to oversee the toggling is:
<script type="text/javascript">
function myFunction(va) {
va.classList.toggle("change");
}
</script>
This JavaScript and the style script should be in the HTML head element. JavaScript has a property for HTML element, called classList. This property has a toggle() method. The toggle() method takes as argument, a class-name. When called the first time, the toggle() method executes the CSS rules (forward direction). When called the second time, the toggle() method does the reverse, on its own. This toggling repeats after every other call, if the calling (clicking) repeats.
And there you have it; the complete code for the icon with transformation and transition is:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.container {
display: inline-block;
cursor: pointer;
}
div.container .bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
/* Fade out the second bar */
.change .bar2 {opacity: 0;}
/* Rotate last bar */
.change .bar3 {
transform: translate(0, -11px) rotate(45deg);
}
</style>
<script type="text/javascript">
function myFunction(va) {
va.classList.toggle("change");
}
</script>
</head>
<body>
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</body>
</html>
Save this file with a filename and the extension, .html; and then open the file in a browser. Click the icon repeatedly to appreciate the toggling effect.
Conclusion
An icon can be created today, by skillfully coding HTML with CSS. Do not forget to include a tool-tip for the icon, if the icon is not accompanied with its short descriptive text, especially at the final web page.
Chrys