Horizontal menu first level submenu (details) animation

[pdanpdan]

@saadeghi
Because the ul submenu of horizontal menu is absolutelly positioned it will not animate on open/close.

We can use one of the following solutions:

• scale: https://play.tailwindcss.com/TyAtvTaOOp?file=css
• size: https://play.tailwindcss.com/OYArnK8RLG?file=css

[saadeghi]

I think for a vertical menu it would make sense to animate it from start to end, because the hidden content are being added in the middle of existing content.

But for this floating submenu, I think an effect similar to dropdown would be better:
https://play.tailwindcss.com/2PhHsLjAqg

Instant open, then fade out + scale down on close.

[pdanpdan]

In vertical menu all is good as it is now. I'll check how to implement the dropdown behaviour for horizontal.

[pdanpdan]

I think this should be good: https://play.tailwindcss.com/mBjqHDQogK?file=css

Just to validate - in current implementation menu is not designed to work well in a case where the default is menu-horizontal and menu-vertical is applied let's say on lg: because of this:

:where(& > li:not(.menu-title) > details > ul) {
  @apply bg-base-100 rounded-box;
  box-shadow:
    0 1px 3px 0 oklch(0% 0 0/0.1),
    0 1px 2px -1px oklch(0% 0 0/0.1);
}

I did not try to fix that (I don't think it is possible because on of vertical/horizontal must win), and as a side effect I left the animation in that case as if it was a horizontal menu - the aspect is nice from my point of view)

[saadeghi]

I think this should be good: https://play.tailwindcss.com/mBjqHDQogK?file=css

Yes it looks great 👍

Just to validate - in current implementation menu is not designed to work well in a case where the default is menu-horizontal and menu-vertical is applied

Yeah that's an issue. I will look into it.
This works well tho:

- menu-horizontal lg:menu-vertical
+ max-lg:menu-horizontal

[pdanpdan]

Yes, only menu-vertical does not completely revert menu-horizontal. But I have an idea. I'll be back with an example.

https://play.tailwindcss.com/rihKTE49dm?file=css