Mega Menu

2022-07-26

I previously built a mega menu for an org. so they could place a preview or an update of their most recent material there. The technique or solution I came up with at the time was quite hacky, but it works!

Now that re-visit, I feel like I can improvise so I started a PoC.

Home
About
Test

This is a body content

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Soluta optio dolore nisi tempora dignissimos quidem eveniet sequi incidunt assumenda. Sunt minima atque placeat! Esse dolorem doloremque laboriosam nobis similique repellendus?

The checklist of Mega Menu:

  • The mega menu content is hidden by default, but it will show when the user hovers over the menu item
  • Hover the menu item will open the mega menu content and it will still open even the cursor is point inside of the menu content
  • An indicator which shows the current menu item is highlighted when hover or visit the page
  • Should only usable on desktop, not suitable for mobile
  • Hover on or outside the menu should give some time before the menu content will display or hide so we prevent accidental hover - we call this hover intent