10 Dropdown Animations for Divi Submenu

by | Aug 25, 2016 | Effects, Snippets | 28 comments

Divi theme has some cool dropdown animations built in and you can easily select the desired one in the Customizer settings but I would like to expand this list of dropdown animations by sharing with you 10 more effects. I have been experimenting with menu animations and found some really cool ones. They are based on pure CSS and work well with Divi after I made some CSS code adjustments. 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, hence the submenu disappears immediately. Anyway, the animations look nice, feel free to check out the original demo here and the demo for Divi by clicking the demo button below. If you like what you see then continue reading the implementation instructions. Nothing complicated, as usually, just a copy-paste job.
To get these animations work you will need to copy CSS code snippets and paste them into Divi -> Theme Options -> General -> Custom CSS or into child theme style.css file and add the CSS class indicated for each animation below to the menu item having submenu items like this:
STEP 1: This code changes default styles of submenu (removes shadow, paddings, makes background color transparent, etc.)
Prepare dropdown menu for applying animations

 

/* Prepare the menu for applying animations */

#top-menu-nav ul.sub-menu {
 overflow: hidden;
 background-color: transparent !important;
 padding: 0px !important;
 -webkit-box-shadow: none !important;
 -moz-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 {
 max-height: 2000px ;
}

#top-menu-nav #top-menu li li a {
 width: 240px !important;
 color: #fff !important;
}

#top-menu-nav #top-menu li li {
 padding: 0px !important;
 background-color: #666666 !important;
}

 

STEP 2: Use this CSS code to set transition rules for all animations:
Animation rules defined for all animation effects

/*

 * 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) {
 -webkit-transition-delay: 0s;
 -moz-transition-delay: 0s;
 -ms-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) {
 -webkit-transition-delay: 66ms;
 -moz-transition-delay: 66ms;
 -ms-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) {
 -webkit-transition-delay: 133ms;
 -moz-transition-delay: 133ms;
 -ms-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) {
 -webkit-transition-delay: 200ms;
 -moz-transition-delay: 200ms;
 -ms-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) {
 -webkit-transition-delay: 266ms;
 -moz-transition-delay: 266ms;
 -ms-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) {
 -webkit-transition-delay: 333ms;
 -moz-transition-delay: 333ms;
 -ms-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) {
 -webkit-transition-delay: 400ms;
 -moz-transition-delay: 400ms;
 -ms-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) {
 -webkit-transition-delay: 466ms;
 -moz-transition-delay: 466ms;
 -ms-transition-delay: 466ms;
 -o-transition-delay: 466ms;
 transition-delay: 466ms;
}

/* Default
 ================================================================= */
#top-menu-nav ul.sub-menu li {
 margin: 0px !important;
 opacity: 0;
 -webkit-transition: opacity .4s, -webkit-transform .6s, max-height .6s;
 -moz-transition: opacity .4s, -moz-transform .6s, max-height .6s;
 -ms-transition: opacity .4s, -ms-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 {
 opacity: 1;
 -webkit-transform: none;
 -moz-transform: none;
 -ms-transform: none;
 -o-transform: none;
 transform: none;
}
STEP 3: And these are the 10 new animations for dropdown menu:
#1 - Helix Effect (add CSS class 'helix' to menu item)

/* Helix
 ================================================================= */
#top-menu-nav li.helix ul.sub-menu {
 -webkit-perspective: 400px;
 -moz-perspective: 400px;
 -ms-perspective: 400px;
 -o-perspective: 400px;
 perspective: 400px;
}

#top-menu-nav li.helix ul.sub-menu li {
 -webkit-transform: rotateY(90deg);
 -moz-transform: rotateY(90deg);
 -ms-transform: rotateY(90deg);
 -o-transform: rotateY(90deg);
 transform: rotateY(90deg);
}

 

#2 - Wave Effect (add CSS class 'wave' to menu item)


/* Wave
 ================================================================= */
#top-menu-nav li.wave ul.sub-menu li {
 -webkit-transform-origin: 0% 0%;
 -moz-transform-origin: 0% 0%;
 -ms-transform-origin: 0% 0%;
 -o-transform-origin: 0% 0%;
 transform-origin: 0% 0%;

 -webkit-transform: skewY(-90deg);
 -moz-transform: skewY(-90deg);
 -ms-transform: skewY(-90deg);
 -o-transform: skewY(-90deg);
 transform: skewY(-90deg);
}

#3 - Fan Effect (add CSS class 'fan' to menu item)


/* Fan
 ================================================================= */
#top-menu-nav li.fan ul.sub-menu li {
 -webkit-transform-origin: 0% 0%;
 -moz-transform-origin: 0% 0%;
 -ms-transform-origin: 0% 0%;
 -o-transform-origin: 0% 0%;
 transform-origin: 0% 0%;

 -webkit-transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 -o-transform: rotate(90deg);
 transform: rotate(90deg);
}

#4 - Papercut Effect (add CSS class 'papercut' to menu item)


/* Papercut
 ================================================================= */
#top-menu-nav li.papercut ul.sub-menu {
 -webkit-perspective: 600px;
 -moz-perspective: 600px;
 -ms-perspective: 600px;
 -o-perspective: 600px;
 perspective: 600px;

 -webkit-perspective-origin: 0% 0%;
 -moz-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 {
 -webkit-transform-origin: 0% 0%;
 -moz-transform-origin: 0% 0%;
 -ms-transform-origin: 0% 0%;
 -o-transform-origin: 0% 0%;
 transform-origin: 0% 0%;

 -webkit-transform: skewY(30deg);
 -moz-transform: skewY(30deg);
 -ms-transform: skewY(30deg);
 -o-transform: skewY(30deg);
 transform: skewY(30deg);
}

#5 - Fly Effect (add CSS class 'fly' to menu item)


/* Fly
 ================================================================= */
#top-menu-nav li.fly ul.sub-menu {
 -webkit-perspective: 400px;
 -moz-perspective: 400px;
 -ms-perspective: 400px;
 -o-perspective: 400px;
 perspective: 400px;
}

#top-menu-nav li.fly ul.sub-menu li {
 -webkit-transform-origin: 50% 50% -50px;
 -moz-transform-origin: 50% 50% -50px;
 -ms-transform-origin: 50% 50% -50px;
 -o-transform-origin: 50% 50% -50px;
 transform-origin: 50% 50% -50px;

 -webkit-transform: rotateX( -180deg );
 -moz-transform: rotateX( -180deg );
 -ms-transform: rotateX( -180deg );
 -o-transform: rotateX( -180deg );
 transform: rotateX( -180deg );
}

#6 - Blind Effect (add CSS class 'blind' to menu item)


/* Blind
 ================================================================= */
#top-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 {
/* This should be changed to the normal height of list-items */
 max-height: 40px;
}

#7 - Venitian Effect (add CSS class 'venitian' to menu item)


/* Venitian
 ================================================================= */
#top-menu-nav li.venitian ul.sub-menu li {
 -webkit-transform-origin: 50% 0;
 -moz-transform-origin: 50% 0;
 -ms-transform-origin: 50% 0;
 -o-transform-origin: 50% 0;
 transform-origin: 50% 0;

 -webkit-transform: scale(1,0);
 -moz-transform: scale(1,0);
 -ms-transform: scale(1,0);
 -o-transform: scale(1,0);
 transform: scale(1,0);
}

#8 - Jaws Effect (add CSS class 'jaws' to menu item)


/* Jaws
 ================================================================= */
#top-menu-nav li.jaws ul.sub-menu li {
 -webkit-transform-origin: 50% -100px;
 -moz-transform-origin: 50% -100px;
 -ms-transform-origin: 50% -100px;
 -o-transform-origin: 50% -100px;
 transform-origin: 50% -100px;
}

#top-menu-nav li.jaws ul.sub-menu li:nth-child(odd) {
 -webkit-transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 -o-transform: rotate(90deg);
 transform: rotate(90deg);
}

#top-menu-nav li.jaws ul.sub-menu li:nth-child(even) {
 -webkit-transform: rotate(-90deg);
 -moz-transform: rotate(-90deg);
 -ms-transform: rotate(-90deg);
 -o-transform: rotate(-90deg);
 transform: rotate(-90deg);
}

#9 - Fence Effect (add CSS class 'fence' to menu item)


/* Fence
 ================================================================= */
#top-menu-nav li.fence ul.sub-menu {
 -webkit-perspective: 600px;
 -moz-perspective: 600px;
 -ms-perspective: 600px;
 -o-perspective: 600px;
 perspective: 600px;
}

#top-menu-nav li.fence ul.sub-menu li:nth-child(odd) {
 -webkit-transform-origin: 0 50%;
 -moz-transform-origin: 0 50%;
 -ms-transform-origin: 0 50%;
 -o-transform-origin: 0 50%;
 transform-origin: 0 50%;

 -webkit-transform: rotateY(90deg);
 -moz-transform: rotateY(90deg);
 -ms-transform: rotateY(90deg);
 -o-transform: rotateY(90deg);
 transform: rotateY(90deg);
}

#top-menu-nav li.fence ul.sub-menu li:nth-child(even) {
 -webkit-transform-origin: 100% 50%;
 -moz-transform-origin: 100% 50%;
 -ms-transform-origin: 100% 50%;
 -o-transform-origin: 100% 50%;
 transform-origin: 100% 50%;

 -webkit-transform: rotateY(-90deg);
 -moz-transform: rotateY(-90deg);
 -ms-transform: rotateY(-90deg);
 -o-transform: rotateY(-90deg);
 transform: rotateY(-90deg);
}

#10 - Zipper Effect (add CSS class 'zipper' to menu item)

/* Zipper
 ================================================================= */
#top-menu-nav li.zipper ul.sub-menu li:nth-child(odd) {
 -webkit-transform: translateX(-100%);
 -moz-transform: translateX(-100%);
 -ms-transform: translateX(-100%);
 -o-transform: translateX(-100%);
 transform: translateX(-100%);
}

#top-menu-nav li.zipper ul.sub-menu li:nth-child(even) {
 -webkit-transform: translateX(100%);
 -moz-transform: translateX(100%);
 -ms-transform: translateX(100%);
 -o-transform: translateX(100%);
 transform: translateX(100%);
}

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!

Pin It on Pinterest

Shares