How to Create an Animated Drop Down Menu with CSS3? – A Tutorial

2 Apr , 2014  HTML & CSS 

How to create a cool 3D drop down navigation menu with CSS3. Pure CSS drop down navigation with cool animated effects on mouse hover.

CSS3 has nice options to create cool animations. It has never been so much easy to create wonderful UI stuffs using only CSS. CSS is getting powerful with the advent of CSS3. There are many tutorials on CSS3 animations, effects and transistions already. And, pure CSS3 drop downs are something which is really interesting to try out. In one of our previous tutorial, we have already seen how to create a drop down navigaton with jQuery.

I’ve been fiddling with a drop down menu recently. And then thought of posting it as a tutorial. The specialty of this tutorial is; we are going to create an animated 3D drop down menu with CSS3.

Cool Drop Down with 3D animation on Mouse Hover With CSS3

DEMO | DOWNLOAD

The Tutorial

Step 1: Create the HTML skeletal structure of the drop down menu

The HTML contains combination of ul and li tags as shown below:

HTML Markup

We have also added a section tag and a nav tag to create a proper navigation backbone.

This is how the menu would look like(without styles)

3D navigation without CSS

Step 2: Adding the Styles to the Menu

All the elements on the page needs to be reset with margin and padding set to 0. Also, the elements are set with box-sizing to bordered-box property.

Now, the top-bar needs some styling. Height, line-height, position and background of the top-bar is specified.

Step 2

The next step is to remove the bullets from the lists by using the list-style:none.

Then, the ul > li elements needs to be aligned and needs transitions.

Simple Menu

Now, that the initial menu is ready. We need to concentrate on the submenu or the drop downs. We start this by setting an initial perspective of 800px as shown below:

Also, the child elements(drop downs) needs to preserve the 3D.

Background color for the main menu on hover.

The drop downs need a rotation everytime they appear from their perspective of 800px, when you hover on the main menu. Rotation angle of 180 degree is set.

Drop Down Ready For Menu

As you see that the drop down menu is ready. Now, the focus is to create the sub-dropdowns.

Setting the background colors for the sub-dropdowns, and on hover. Also, the position, alignments, visibility is set to hidden initially until you hover the mouse and finally some transitions and opacity to cover up.

The Complete CSS3

Multi-level dropdown menu ready

DEMO | DOWNLOAD

Conclusion

This tutorial has thought us how to create a 3D multi-level drop down menu using pure CSS3 elements. This tutorial works best on Firefox, Chrome, Opera and Webkit browsers. CSS3 is the future for designing interactive elements. Stick to latest browsers to enjoy the fun. Hope this tutorial is inspiring and find it useful.



, , , ,

Comments are closed.