search

aimeos / ai-admin-jqadm

Aimeos e-commerce Vue.js+Bootstrap based admin interface
https://aimeos.org
GNU Lesser General Public License v3.0
177 stars 43 forks source link

Improve slide-out of tree-menu #123

Closed rowild closed 4 years ago

rowild commented 4 years ago

Currently, the tree-menu (sub menu of locales and types) disappears immediately as soon as there is no :hover applied anymore. This is due to the fact that on "hover-out" visibility is immediately set to hidden. In order to circumvent that problem, it is necessary to assign a delay value to the visibility param of the same duration as transform. Then, this very delay-value has to be set to 0 on the :hover pseudo-class on li.

Furthermore, the "slide-out" motion requires the attribute left to be set to 3rem (smallest [mobile] value) on the .tree-menu class itself, not in its :hover pseudo-class, and it must be included in the transition animation, too, otherwise there is a nasty abrupt jump in the animation.

Tested on Chrome, Safari, Firefox, Brave. Not IE/Edge!

Question: in @media (min-width: 992px) { there is .aimeos .sidebar-menu > li:hover > .tree-menu { as well as .aimeos .sidebar-menu li:hover .tree-menu {. Why? In my tests the first one worked fine.

aimeos commented 4 years ago

Thanks a lot! The second CSS selector applies to all menu levels while the first one only to the first level. This should make a difference in the Locale submenu for example