Setup Menus in Admin Panel

  • LOGIN
  • No products in the cart.

How to add zoom effect on sub menu

Jquery for the animation effect on sub menu


jQuery(document).ready(function()
{
jQuery(".main-navigation").find("li").hover(function()
{
jQuery(this).find("ul").toggleClass("show");
jQuery(".main-navigation").find("li").find("ul").find("ul").removeClass("show");
});
jQuery(".main-navigation").find("li").find("ul").find("li").hover(function()
{
jQuery(this).find("ul").toggleClass("show");
});
});

Cssfor the animation effect on sub menu

.main-navigation li ul
{
-webkit-transform-origin: top left;
transform-origin: top left;
}
.main-navigation li ul.show
{
opacity: 1;
-webkit-animation: showIn .5s;
animation: showIn .5s;
display: block
}
@-webkit-keyframes showIn {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1
}
}

@keyframes showIn {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1
}
}

@-webkit-keyframes showOut {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1
}
99% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0;
display: none
}
100% {
z-index: -1
}
}

@keyframes showOut {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1
}
99% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0;
display: none
}
100% {
z-index: -1
}
}

March 9, 2020

0 responses on "How to add zoom effect on sub menu"

Leave a Message

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

Developed by: ERA IT Solutions. All rights reserved 2020.
X