How To Delay Menu Expansion In Admin?

Developers Dev talks
1

Poked around with this for about an hour today without any real results so thought I'd pose the question here.

Is there some jQuery I can apply that will delay the mouseenter unfolding of the admin main menus for maybe 1/2 second so that moving the mouse from top to bottom of the screen or side to side doesn't unfold the menus till the delay period has expired?

2

I don't have an answer but funny you asked. I have designed my site specifically not to use any mouse over menus just for the fact that it drives me crazy when I visit a site and everything is popping everywhere.

3

We have just done similar feature with the transition property. Please try:

.no-touch .ty-menu__item:hover .ty-menu__submenu-items, .is-hover-menu .ty-menu__submenu-items {
    opacity: 1;
    -webkit-transition: none;
}
.ty-menu__submenu-items {
    display: block;
    opacity: 0;
    -webkit-transition: opacity 1s ease-out;
}

Not tested on mobile

4

Trying to do this for the backend.

I've tried several different combinations of selectors and can't seem to get it to behave.

Either the menu items disappear completely or there is no effect.

I've used many variations. Closest I've been able to get is:

.hover-show li.dropdown ul.dropdown-menu {
    opacity: 0;
    -webkit-transition: none;
}
.nav-pills .dropdown-menu {
    display: block;
    opacity: 1;
    -webkit-transition: opacity 1s ease-in;
}

But the submenus don't display.

My goal is to simply delay (don't really need an effect) the submenu display by some period of time.

So from my logic, the above says:

Start with opacity = 0 (transparent)

Then, when this changes to display:block, transition the opacity from 0 - 1 over 1 second duration.

Any pointers/help would be greatly appreciated.