OiO.lk Blog CSS How can I create a fly-out column menu
CSS

How can I create a fly-out column menu


I’m trying to develop the following vertical navigation. If parent item has children, show those children in a smooth transition (i’ve used translateX) in a column next to the first one. So for the first level of children, show a new column.

But if those children have child items, you need to show them under each of its parents. From level 2 children, no column layout.

I’ve already created a small poc: https://codepen.io/dennisperremans/pen/MWNvVod But still a lot of issues:

  • in the case of lots of items a scrollbar is shown (which is a must in our case). But the scrollbar causes that I can’t hover the second column because. It disappears before I can even hover it.
  • the transition animation isn’t visible. Probably because of the display: none; on the .menu .menu element ?

General question:

  • What about the mobile navigation? That probably should be done with Javascript because hover isn’t possible.



You need to sign in to view this answers

Exit mobile version