How to Design Better Menus with CSS Animation

Integrating animations with web designing has become a trend for some time now.

These animations have had a great impact on the way users interact with a particular website. By clicking on a link we witness the changes with the blink of an eye. This has persuaded a lot of web designers to integrate the different animations with the design of a website. However, one thing needs to be noted that while integrating the animations a web designer should ensure that their usage is meaningful.

Along with instigating a visual appeal, the animations must add value to the overall website designing. A menu toggle is a common UI design element which can be created with CSS and enhance its usability with animations.

The sole purpose of this article is to guide you about the different ways in which you can design better menus with CSS animation. We also discuss the best web performance practices that will make sure that the animations are smooth.

Initial Process

Firstly, you will have to download a few files which can be done from github. So once you have downloaded the files, you will have to open the index.html file in the browser.

Now you will be able to view three big links which are present against the white background. The first thing that needs to be done is to hide these. In the style.css file, you will have to add the styles to the .menu-overlay.

opacity: 0;
visibility: hidden;

As the overlay has gone there will be a button that will appear in the top-left corner. Over here we will draw our menu icon which will give you something for clicking in order to showcase the overlay. We will be using HTML and CSS which will make it easier to animate. In the index.html you would have got some HTML for menu, a link (.menu-link), a background (.menu-circle), a container (.menu) along with the icon (.menu-icon) with one span for each line.
We will need a separate div for the background as well be adding animations to the circle. We will begin by drawing the lines for the icon. All the lines are equally wide and feature rounded corners. They are absolutely positioned and also have a background corner. Have a look at the below code:

.menu-line {
background-color: #333;
height: 2px;
width: 100%;
border-radius: 2px;
position: absolute;
left: 0;
}

The lines unique class can be used for setting the vertical position.

.menu-line-1 { top: 0; }

.menu-line-2 {
top: 0;
bottom: 0;
margin: auto;
}

.menu-line-3 { bottom: 0; }

For adding a Hover Effect

By adding a hover effect you will be able to make the icon clickable. You will have to create a new selector for the menu-circle in the style.css file for scaling it up while you are hovering over the menu.

.menu:hover .menu-circle { transform: scale(1.4); }

Now you will be able to add an animation which can be done by adding transition: all 0.2s ease-in-out to the .menu-circle {}. By doing this, the browser will animate all the different properties that might change for .menu-circle. When it is scaled up on hover you will see an animation for 0.2 seconds. There will be a timing function of ease-in-out. It is a solid timing function and better than the linear timing functions.

Showing and Hiding the Menu

Now we are going to utilize jQuery for showing and hiding the overlay that has been created. In script.js you will have to toggle the class of open on the .menu-overlay which is inside the existing click handler.

$(“.menu-overlay”).toggleClass(“open”);

Show the overlay when there is a class of open.

.menu-overlay.open {
opacity: 1;
visibility: visible;
}

Connecting the Menu Icon

By implementing the above animation we have already integrated a great fade effect. So, it would be better if better if we connect them visually. This effect can be achieved easily. You will have to enlarge the menu circle when you click it. The overlay will get faded and will create an illusion that the menu icon will transform into an overlay.

$(“.menu”).toggleClass(“open”);

The class can be targeted with CSS and the circle can be expanded when the menu is opened. At the bottom of style.css,you will have to expand the .menu-circle when the .menu has a class of .open.

.menu.open .menu-circle { transform: scale(60);
}

Transforming the Icon

You will be able to transform the visual appearance of the icon by setting three CSS properties. For doing this you will have to hide the middle line when the menu is displayed.

.menu.open .menu-line-2 { opacity: 0; }

Now the other two lines have to be flipped by 45 degrees in the opposite directions.

.menu.open .menu-line-1 {
transform: rotate(-45deg);
}

.menu.open .menu-line-3 {
transform: rotate(45deg);
}

Now you will have to center the two lines vertically. This will be achieved through the below code.

.menu.open .menu-line-1 {
transform: translateY(7px) translateY(-50%) rotate(-45deg);
}

.menu.open .menu-line-3 {
transform: translateY(-7px) translateY(50%) rotate(45deg);
}

Morphing Between the Icons

Morphing between the two states is better than replacing the menu icon with the close icon. This can be done by adding a transition to the .menu-line in the style.css:

transition: all 0.25s ease-in-out;

In The End

All the animations which have been created are meaningful and will enhance the overall navigating experience. All the animations will run quite smoothly. It will avoid the unwanted lag, as the transform and the opacity properties have been animated. This is because the browser’s hardware acceleration support will kick in.

Apart from the CSS animations which have been mentioned above, there are quite a few other animations that can be implemented. However, the one thing which you should ensure is that they are meaning and visually appealing.

So what all CSS animations are you going to integrate with your website from the ones mentioned above? Do let me know about them along with your views about the article in the comments section below.