Lets Create a Dropdown Menu Icon
We see a menu button like the one above a lot on the internet. We can prepare such an icon without using images or other things, just using Css.
Let's write the following codes where the icon will be located. In this example, we used 3 empty div elements inside the a tag. If we want, we can use span or other elements by making a block instead of a div.
<div class="menu">
<a href="javascript:void(0);" class="menuIcon" onclick="menuOpen()">
<div></div>
<div></div>
<div></div>
</a>
</div>
The href property of the "a" tag has been edited so that the page does not scroll up when clicked.
A function has been assigned to the onclick property, probably because a menu will be opened when this icon is clicked. We will not use this function here, but you can find the opened and hidden version of the menu in the next topic.
When you set the appearance of the icon with the following Css codes, the process is complete.
.menu .menuIcon div {
width: 35px;
height: 5px;
background-color: green;
margin: 5px 0;
}
For example, you can see the working version in the examples section below and try it yourself.
create menu button with css, css menu icon, css menu icon, popup menu button, prepare 3-line menu icon, prepare your own menu button
EXERCISES
Read 825 times.