10 Dropdown Animations for Divi Submenu

by | Aug 25, 2016 | Effects, Header, Menu, Snippets, Tutorials | 37 comments

Last update: 17.09.2021 – added support for the Menu Module.

Divi theme has some cool dropdown animations built in and you can easily select the desired one in the Theme Customizer settings(for the default header) and in the Menu Module settings.

In this tutorial I would like to expand this list of dropdown animations by sharing with you 10 more effects.

I have been experimenting with different menu animations and found some really cool ones. These are pure CSS animations and work well with Divi after I’ve applied some adjustments to the original CSS.

The only problem is that the backwards animation does not work due to the fact that Divi adds et-dropdown-removing CSS class to the dropdown menu on mouse leave which hides dropdown menu by applying display:none; rule which is not animatable, that’s why the submenu disappears immediately.

Anyway, these animations look nice, check out the live demo.

To enable these animations for the default header of Divi theme you will need to copy the CSS snippets and paste them into Divi -> Theme Options -> General -> Custom CSS or into the child theme style.css file.

However, if you want to use the Menu module to create you website header then I’d recommend you to use the Code module to add the CSS to the header template so that this CSS gets loaded only on the pages which this header template is assigned to (remember to wrap the CSS with the style tag when adding it into the Code module).

And if you want these effects to apply to a certain Menu module only then you should assign it a CSS class in the Menu Settings -> Advanced -> CSS ID & Classes -> CSS Class and use it in the CSS selectors to target that specific Menu module.

For example, I’ve used the dvcs_submenu_effects CSS class in the CSS below, you can use the same class or replace it with any other class you like.

Then add the CSS class indicated for each effect below to the parent menu item(s) of your menu in Appearance -> Menus -> Your Menu like this:

Prepare submenu for applying animations

This CSS changes the default styles of submenu (removes shadow, paddings, makes background color transparent, etc.)
/* Prepare the submenu for applying animations */
#top-menu-nav ul.sub-menu,
.dvcs_submenu_effects .et-menu-nav ul.sub-menu {
    overflow: hidden;
    border-top: 0;
    border-radius: 3px;
    background-color: transparent !important;
    padding: 0px !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
#top-menu-nav ul#top-menu > li:hover ul.sub-menu, 
#top-menu-nav ul#top-menu > li:focus ul.sub-menu,
.dvcs_submenu_effects .et-menu-nav ul.et-menu > li:hover ul.sub-menu, 
.dvcs_submenu_effects .et-menu-nav ul.et-menu > li:focus ul.sub-menu {
    max-height: 2000px ;
}
#top-menu-nav #top-menu li li a,
.dvcs_submenu_effects .et-menu-nav .et-menu li li a {
    width: 240px !important;
    color: #ffffff !important; /* submenu item link color */
}
#top-menu-nav #top-menu li li,
.dvcs_submenu_effects .et-menu-nav .et-menu li li {
    padding: 0px !important;
    background-color: #0b15c4 !important; /* submenu item background color */
}

CSS common to all animation effects

Add this CSS to set transition rules used by all animations. Here it’s assumed that your menu has submenus with up to 8 (eight) items, however, if there are more than eight items then you can add additional CSS rules following the same pattern.

/*
 * Menu Effects: A collection of CSS3 menu effects (degrades gracefully in IE8).
 *
 * Don't hesitate to create new effects and remove the ones you don't need.
 *
 * latest version and complete README available on Github:
 * https://github.com/louisremi/menu-effects
 *
 * Copyright 2012 @louis_remi
 * Licensed under the MIT license.
 */
/* Progressive Animations
 * ==================================================================
 * This is a lot of redundant code but the result is worth it
 * This should be edited for menus with more or much less than 8 items 
 */
/* forward */
#top-menu-nav ul#top-menu > li:hover ul.sub-menu li:nth-child(1),
.dvcs_submenu_effects .et-menu-nav ul.et-menu > li:hover ul.sub-menu li:nth-child(1) {
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}
#top-menu-nav ul#top-menu > li:hover ul.sub-menu li:nth-child(2),
.dvcs_submenu_effects .et-menu-nav ul.et-menu > li:hover ul.sub-menu li:nth-child(2) {
    -webkit-transition-delay: 66ms;
    -o-transition-delay: 66ms;
    transition-delay: 66ms;
}
#top-menu-nav ul#top-menu > li:hover ul.sub-menu li:nth-child(3),
.dvcs_submenu_effects .et-menu-nav ul.et-menu > li:hover ul.sub-menu li:nth-child(3) {
    -webkit-transition-delay: 133ms;
    -o-transition-delay: 133ms;
    transition-delay: 133ms;
}
#top-menu-nav ul#top-menu > li:hover ul.sub-menu li:nth-child(4),
.dvcs_submenu_effects .et-menu-nav ul.et-menu > li:hover ul.sub-menu li:nth-child(4) {
    -webkit-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}
#top-menu-nav ul#top-menu > li:hover ul.sub-menu li:nth-child(5),
.dvcs_submenu_effects .et-menu-nav ul.et-menu > li:hover ul.sub-menu li:nth-child(5) {
    -webkit-transition-delay: 266ms;
    -o-transition-delay: 266ms;
    transition-delay: 266ms;
}
#top-menu-nav ul#top-menu > li:hover ul.sub-menu li:nth-child(6),
.dvcs_submenu_effects .et-menu-nav ul.et-menu > li:hover ul.sub-menu li:nth-child(6) {
    -webkit-transition-delay: 333ms;
    -o-transition-delay: 333ms;
    transition-delay: 333ms;
}
#top-menu-nav ul#top-menu > li:hover ul.sub-menu li:nth-child(7),
.dvcs_submenu_effects .et-menu-nav ul.et-menu > li:hover ul.sub-menu li:nth-child(7) {
    -webkit-transition-delay: 400ms;
    -o-transition-delay: 400ms;
    transition-delay: 400ms;
}
#top-menu-nav ul#top-menu > li:hover ul.sub-menu li:nth-child(8),
.dvcs_submenu_effects .et-menu-nav ul.et-menu > li:hover ul.sub-menu li:nth-child(8) {
    -webkit-transition-delay: 466ms;
    -o-transition-delay: 466ms;
    transition-delay: 466ms;
}
/* Default */
#top-menu-nav ul.sub-menu li,
.dvcs_submenu_effects .et-menu-nav ul.sub-menu li {
    margin: 0px !important;
    opacity: 0;
    -webkit-transition: opacity .4s, -webkit-transform .6s, max-height .6s;
    -o-transition: opacity .4s, -o-transform .6s, max-height .6s;
    transition: opacity .4s, transform .6s, max-height .6s;
}
#top-menu-nav ul#top-menu > li:hover ul.sub-menu li,
#top-menu-nav ul#top-menu > li:focus ul.sub-menu li,
.dvcs_submenu_effects .et-menu-nav ul.et-menu > li:hover ul.sub-menu li,
.dvcs_submenu_effects .et-menu-nav ul.et-menu > li:focus ul.sub-menu li {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

Animations CSS Snippets

And these are the 10 new animations for dropdown menu:

Helix Effect

CSS Class: helix
/* Helix Effect */
#top-menu-nav li.helix ul.sub-menu,
.dvcs_submenu_effects .et-menu-nav li.helix ul.sub-menu {
    -webkit-perspective: 400px;
    -ms-perspective: 400px;
    -o-perspective: 400px;
    perspective: 400px;
}
#top-menu-nav li.helix ul.sub-menu li,
.dvcs_submenu_effects .et-menu-nav li.helix ul.sub-menu li {
    -webkit-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    transform: rotateY(90deg);
}
/* END Helix Effect */

Wave Effect

CSS Class: wave
/* Wave Effect */
#top-menu-nav li.wave ul.sub-menu li,
.dvcs_submenu_effects .et-menu-nav li.wave ul.sub-menu li {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: skewY(-90deg);
    -ms-transform: skewY(-90deg);
    transform: skewY(-90deg);
}
/* END Wave Effect */

Fan Effect

CSS Class: fan
/* Fan Effect */
#top-menu-nav li.fan ul.sub-menu li,
.dvcs_submenu_effects .et-menu-nav li.fan ul.sub-menu li {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
/* END Fan Effect */

Papercut Effect

CSS Class: papercut
/* Papercut Effect */
#top-menu-nav li.papercut ul.sub-menu,
.dvcs_submenu_effects .et-menu-nav li.papercut ul.sub-menu {
    -webkit-perspective: 600px;
    -ms-perspective: 600px;
    -o-perspective: 600px;
    perspective: 600px;
    -webkit-perspective-origin: 0% 0%;
    -ms-perspective-origin: 0% 0%;
    -o-perspective-origin: 0% 0%;
    perspective-origin: 0% 0%;
}
#top-menu-nav li.papercut ul.sub-menu li,
.dvcs_submenu_effects .et-menu-nav li.papercut ul.sub-menu li {
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: skewY(30deg);
    -ms-transform: skewY(30deg);
    transform: skewY(30deg);
}
/* END Papercut Effect */

Fly Effect

CSS Class: fly
/* Fly Effect */
#top-menu-nav li.fly ul.sub-menu,
.dvcs_submenu_effects .et-menu-nav li.fly ul.sub-menu {
    -webkit-perspective: 400px;
    -ms-perspective: 400px;
    -o-perspective: 400px;
    perspective: 400px;
}
#top-menu-nav li.fly ul.sub-menu li,
.dvcs_submenu_effects .et-menu-nav li.fly ul.sub-menu li {
    -webkit-transform-origin: 50% 50% -50px;
    -ms-transform-origin: 50% 50% -50px;
    transform-origin: 50% 50% -50px;
    -webkit-transform: rotateX( -180deg );
    -ms-transform: rotateX( -180deg );
    transform: rotateX( -180deg );
}
/* END Fly Effect */

Blind Effect

CSS Class: blind
/* Blind Effect */
#top-menu-nav li.blind ul.sub-menu li,
.dvcs_submenu_effects .et-menu-nav li.blind ul.sub-menu li {
    max-height: 0;
}
#top-menu-nav li.blind:hover ul.sub-menu li, 
#top-menu-nav li.blind:focus ul.sub-menu li,
.dvcs_submenu_effects .et-menu-nav li.blind:hover ul.sub-menu li, 
.dvcs_submenu_effects .et-menu-nav li.blind:focus ul.sub-menu li {
    /* This should be changed to the normal height of list-items */
    max-height: 40px;
}
/* END Blind Effect */

Venitian Effect

CSS Class: venitian
/* Venitian Effect */
#top-menu-nav li.venitian ul.sub-menu li,
.dvcs_submenu_effects .et-menu-nav li.venitian ul.sub-menu li {
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(1,0);
    -ms-transform: scale(1,0);
    transform: scale(1,0);
}
/* END Venitian Effect */

Jaws Effect

CSS Class: jaws
/* Jaws Effect */
#top-menu-nav li.jaws ul.sub-menu li,
.dvcs_submenu_effects .et-menu-nav li.jaws ul.sub-menu li {
    -webkit-transform-origin: 50% -100px;
    -ms-transform-origin: 50% -100px;
    transform-origin: 50% -100px;
}
#top-menu-nav li.jaws ul.sub-menu li:nth-child(odd),
.dvcs_submenu_effects .et-menu-nav li.jaws ul.sub-menu li:nth-child(odd) {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
#top-menu-nav li.jaws ul.sub-menu li:nth-child(even),
.dvcs_submenu_effects .et-menu-nav li.jaws ul.sub-menu li:nth-child(even) {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
/* END Jaws Effect */

Fence Effect

CSS Class: fence
/* Fence Effect */
#top-menu-nav li.fence ul.sub-menu,
.dvcs_submenu_effects .et-menu-nav li.fence ul.sub-menu {
    -webkit-perspective: 600px;
    -ms-perspective: 600px;
    -o-perspective: 600px;
    perspective: 600px;
}
#top-menu-nav li.fence ul.sub-menu li:nth-child(odd),
.dvcs_submenu_effects .et-menu-nav li.fence ul.sub-menu li:nth-child(odd) {
    -webkit-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    transform: rotateY(90deg);
}
#top-menu-nav li.fence ul.sub-menu li:nth-child(even),
.dvcs_submenu_effects .et-menu-nav li.fence ul.sub-menu li:nth-child(even) {
    -webkit-transform-origin: 100% 50%;
    -ms-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transform: rotateY(-90deg);
    -ms-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
}
/* END Fence Effect */

Zipper Effect

CSS Class: zipper
/* Zipper Effect */
#top-menu-nav li.zipper ul.sub-menu li:nth-child(odd),
.dvcs_submenu_effects .et-menu-nav li.zipper ul.sub-menu li:nth-child(odd) {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
}
#top-menu-nav li.zipper ul.sub-menu li:nth-child(even),
.dvcs_submenu_effects .et-menu-nav li.zipper ul.sub-menu li:nth-child(even) {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
}
/* END Zipper Effect */
Hope you’ll find these snippets useful. Feel free to share your thoughts and suggestions below and don’t forget to share this post with your friends! 😉 Cheers!

Subscribe To Our Newsletter

Join our mailing list to download Divi freebies and get notified of our discounts, latest news and updates.

You have Successfully Subscribed! Please confirm your email address.

Divi MadMenu Coming Soon!

Join our mailing list to get notified when the Divi MadMenu module is released! Check out the sneak peek...

You have Successfully Subscribed! Please confirm your email address.

Free Download Divi Section Layouts

Download 19 ready-to-use Divi templates for FREE!

You have Successfully Subscribed! Please confirm your email address.

Black Friday Is Coming!

Subscribe to get notified when the biggest SALE starts!

You have Successfully Subscribed! Please confirm your email address.

Pin It on Pinterest

Share This