The menu icon is important for a website because it helps users navigate the website, especially on mobile devices. It also promotes consistency across different websites, and saves space on the webpage.
Today I will show you how to create a simple menu icon using basic HTML, CSS and JavaScript.
This is a basic HTML markup of the icon and CSS codes designed the icon. It will be the three bars.
.menuIcon {
display: inline;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
background-color: #333;
width: 35px;
height: 5px;
margin: 6px 0;
transition: all 0.4s ease;
}
It is the final output of the icon.
It will be the cross (X) icon by clicking on the icon. Here we will add few CSS code like below.
.change .bar1 {transform: translate(0, 11px) rotate(-45deg);}
.change .bar2 {opacity: 0;}
.change .bar3 {transform: translate(0, -11px) rotate(45deg);}
We will change the icon using JavaScript onclick event. The parent div of the icon is:
We used here onclick event and called a function which is toggling the icon.
It is a simple JavaScript function that will add a class name called ```change``` by clicking the icon.
function handleIcon(e) {
e.classList.toggle('change');
}
It is the final output that is changes through the function.
To sum up, the menu icon is a vital part of website design that helps users easily navigate the website, regardless of the device they use. By including a well-designed menu icon, website designers can create a better user experience and improve website functionality.