CSS3 Animated Dropdown Menu without Javascript

In CSS Animation, CSS Tutorial Oct 12, 2016
CSS3 Animated Dropdown Menu

Today we have found any excellent example of a drop-down menu, and we are going to build CSS3 Animated Dropdown Menu without using javascript. This menu provides you beautiful animation on hover. The drop-down menu makes with pure CSS3, and you don’t require any javascript to build it. Also the important thing about this animated menu, you can easily copy and paste the source code to get implement. We already wrote a couple of posts about the dropdown menu, and you can find one of our recent example about Multi Level Dropdown Menu here to learn more about it.

Build such animation isn’t easy, and you need to rely on javascript or jquery, but this is possible with only CSS and especially CSS3. There is one issue about CSS3; it doesn’t support the older version of browsers, but at the same time, we know there are very fewer users of the older version of the browser. If you still need the support for the previous version, you can add the fallback.

CSS3 Animated Dropdown Menu Implementation

Let’s have a look the HTML code and the code is simple. All we need to list the menus using standard HTML element UL and LI. We will place the whole menu list under the div class name AniNav. Next, we will Ul. The UL element will also hold the all the menu list.

Each Li element itself a menu link and if we need to add the drop-down menu under any li, we simply need to place ul and li. Let’s see it as simplest way as possible.

 <div class="AniNav"> <ul class="AniNavList"> <li class="AniNavMenu">Home</li> <li class="AniNavMenu">Property </li> </ul> </div> 

You see above code is only have two menus and don’t have any drop-down menu, Now let’s say we need to add drop-down menu under the Home than our code will look this:

 <div class="AniNav"> <ul class="AniNavList"> <li class="AniNavMenu">Home <ul class="nav__menu-lists nav__menu--1-lists"> <li class="nav__menu-items">Services</li> <li class="nav__menu-items">About</li> <li class="nav__menu-items">Contact</li> <li class="nav__menu-items">Product</li> <li class="nav__menu-items">Cart</li> </ul> </li> <li class="AniNavMenu">Property </li> </ul> </div> 

What we did here is to define the list of menu using UL and li. Similar if you need to add the dropdown menu under the property or any other menu, you simply need to do the same thing.

CSS3 Animated Dropdown Menu Styles

Let’s have a look the implementation of CSS. First of all, we need to do some basic stuff. We need to add a background color, some margin and text alignment. We also do implement the height and width of AniNavMenu class and add background color on hover. Our basic CSS here.

 .AniNav { background: #3f4c6b none repeat scroll 0 0; margin-top: 30px; text-align: center; width: 100%; } .AniNavList { display: inline-block; } .AniNavMenu { float: left; width: 140px; height: 65px; line-height: 65px; text-transform: uppercase; background-color: #3f4c6b; cursor: pointer; } .AniNavMenu:hover { background-color: #0C2868; } .AniNavMenu:hover > .nav__menu-lists li { display: block; } 

The next thing needs to do with CSS is to create animation. We will use the nth-child element to handle each menu item that has a dropdown. The nth-child will utilize with li, and we will add ease in out animation. To create the animation effect on hover, we will use keyframes for each menu. We do rotate the menu at x-as by giving the value of -180deg.

 .AniNavMenu:hover > .nav__menu--1-lists li:nth-child(1) { opacity: 0; -webkit-animation: menu1 ease-in-out forwards; animation: menu1 ease-in-out forwards; -webkit-animation-duration: 300ms; animation-duration: 300ms; -webkit-animation-delay: 0ms; animation-delay: 0ms; } @-webkit-keyframes menu1 { from { opacity: 0; -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } to { opacity: 1; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } } @keyframes menu1 { from { opacity: 0; -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } to { opacity: 1; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } } 

We will keep using the same technique with all the dropdown menu, but the animation-delay will change accordingly. The animation-duration almost remain same for all the menus, but the animation-delay will modify like for second menu item, the delay will be 150ms whereas the delay is zero for the first menu item.

That is the small css3 tutorial about creating animations for the dropdown. Hope you find it suitable to used for your upcoming project.

Leave a Reply

Your email address will not be published. Required fields are marked *