Docs

[dividen1]

I want drop down menu animation to whirl, some thing similar to dropdown effect at this link https://www.script-tutorials.com/demos/364/index.html

can you guys please help me achieve that.

Thanks

[Rad]

Hi there,

Thanks for posting in.

Ah, that will be a complex customization which we can’t really cover. The menu structure is different from X theme and Ubermenu. But yes, still possible through custom development.

Thanks for understanding.

[dividen1]

Thanks for the reply. Can you please help me do animation for simple animation for each item.

[Paul R]

Hi,

Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[dividen1]

Hi,

Thanks I understand it.

I was adding this code in custom CSS for dropdown menu to do the effect but it is not appearing as it should

.x-nav li:hover .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;
}
.x-nav li:hover .sub-menu li:nth-child(2) {
-webkit-transition-delay: 50ms;
-moz-transition-delay: 50ms;
-ms-transition-delay: 50ms;
-o-transition-delay: 50ms;
transition-delay: 50ms;
}
.x-nav li:hover .sub-menu li:nth-child(3) {
-webkit-transition-delay: 100ms;
-moz-transition-delay: 100ms;
-ms-transition-delay: 100ms;
-o-transition-delay: 100ms;
transition-delay: 100ms;
}
.x-nav li:hover .sub-menu li:nth-child(4) {
-webkit-transition-delay: 150ms;
-moz-transition-delay: 150ms;
-ms-transition-delay: 150ms;
-o-transition-delay: 150ms;
transition-delay: 150ms;
}
.x-nav li:hover .sub-menu li:nth-child(5) {
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-ms-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
}

and have also tried

.x-navbar .desktop .x-nav li:hover .sub-menu li#menu-item-110 {
-webkit-transition-delay: 0s !important;
-moz-transition-delay: 0s !important;
-ms-transition-delay: 0s !important;
-o-transition-delay: 0s !important;
transition-delay: 0s !important;
}
.x-navbar .desktop .x-nav>li:hover .sub-menu li#menu-item-109 {
-webkit-transition-delay: 50ms !important;
-moz-transition-delay: 50ms !important;
-ms-transition-delay: 50ms !important;
-o-transition-delay: 50ms !important;
transition-delay: 50ms !important;
}
.x-navbar .desktop .x-nav>li:hover .sub-menu li#menu-item-108 {
-webkit-transition-delay: 100ms !important;
-moz-transition-delay: 100ms !important;
-ms-transition-delay: 100ms !important;
-o-transition-delay: 100ms !important;
transition-delay: 100ms !important;
}
.x-navbar .desktop .x-nav>li:hover .sub-menu li#menu-item-107 {
-webkit-transition-delay: 150ms !important;
-moz-transition-delay: 150ms !important;
-ms-transition-delay: 150ms !important;
-o-transition-delay: 150ms !important;
transition-delay: 150ms !important;
}
.x-navbar .desktop .x-nav>li:hover .sub-menu li#menu-item-106 {
-webkit-transition-delay: 200ms !important;
-moz-transition-delay: 200ms !important;
-ms-transition-delay: 200ms !important;
-o-transition-delay: 200ms !important;
transition-delay: 200ms !important;
}

can you please tell where i am doing wrong… ?

Thanks

[Jade]

Hi there,

As mentioned on our first and second response, this is a customization we cannot cover as much as we want to help you. Kindly contact a developer who could help you out with the customization you want to achieve.

Thanks for understanding.

[Author]

Posts