By default, the sub-menu will appear with a simple fade :
With a little bit of CSS, we can easily add some effets. Just add a new class to the menu (.menu1, .menu2...) and use these CSS :
@keyframes oxy-menu-moveup {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.menu1.oxy-nav-menu .menu-item:hover > .sub-menu {
animation-name:oxy-menu-moveup;
animation-duration:0.5s;
}
Or even add a cool 3D effect :
@keyframes oxy-menu-rotx {
from {
opacity: 0;
transform: rotatex(90deg);
}
to {
opacity: 1;
transform: rotatex(0deg);
}
}
.menu2.oxy-nav-menu .menu-item {
perspective: 800px;
}
.menu2.oxy-nav-menu .menu-item:hover > .sub-menu {
animation-name:oxy-menu-rotx;
transform-origin: top;
animation-duration:0.5s;
}
Just change the rotation to -90deg :
@keyframes oxy-menu-rotx {
from {
opacity: 0;
transform: rotatex(-90deg);
}
to {
opacity: 1;
transform: rotatex(0deg);
}
}
.menu3.oxy-nav-menu .menu-item {
perspective: 800px;
}
.menu3.oxy-nav-menu .menu-item:hover > .sub-menu {
animation-name:oxy-menu-rotx;
transform-origin: top;
animation-duration:0.5s;
}
For more effect, check the tranform property :
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
And if you are already using the Animate.css library (or another similar library), you can use their classes and make some funky/weird effect :
.menu4.oxy-nav-menu .menu-item:hover > .sub-menu {
animation-name:jackInTheBox;
animation-duration:0.5s;
}