When we check the HTML file, the output should look like this: The final HTML file should look like this:Ĭlick on the Menu Icon to change it to X:Į. We will call this function in an in our HTML file along with calling the CSS classes created. 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.ĭ.
Css3 menu codes code#
Once this CSS code is ready, we will write a small function to trigger the transformation of the menu icon into a cross icon. * make bar#2 vanish post tranformation */ We will apply to transform logic on each icon accordingly and make our CSS code ready (menuIcon2.css)
![css3 menu codes css3 menu codes](https://freefrontend.com/assets/img/css-menu/dropdown-navigation.png)
Instead of pseudo-elements, we will create three classes for each bar (before, mid and after).
![css3 menu codes css3 menu codes](https://i.pinimg.com/originals/32/a8/79/32a879637c1c7190e977538d14730383.gif)
For writing the CSS code, we will define a menu class similar to the previous example. Another method is to create a CSS icon with the transformation of each bar and call it on click-through a javaScript function.ī. P>Hover over the Menu Icon to change it to X:Įxample #3 – Writing CSS and JavaScript functions to animate the menu icon.Ī. Now, we will use this CSS code through an HTML file to see the final output. Here is the complete CSS code for this animation:(menuIcon.css)Į. The middle bar (div) transforms to 0 i.e. 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. Transform: translateY(12px) rotate(135deg) 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. 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.ī. 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. Example #2 – Animating the Menu Icon using CSS.Ī. The margin adds some distance between each bar and the background color of black, highlights each bar, to look like a menu bar together. In this example, there have been height and width of each horizontal bar specified. There will be a menu icon on the top left corner of the page. Save the page and open the HTML file through IE/Chrome/Firefox to see the result.