Member Avatar for <M/>

I am trying to build a rollover content menu... just like the one in the mbusa site (their site menu)... does anyone know how to make one or can show me a reference to one?

Thanks!

  • 4 Contributors
  • 8 Replies
  • 100 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by <M/>

Dani AI

Generated

This thread is about recreating the rollover/mega-style menu seen on mbusa.com. asked for a concrete reference; replies from , and pointed to CSS and JS directions. A reliable pattern combines semantic HTML that works without scripting, CSS for visuals and smooth animation, and minimal JavaScript to handle hover intent, keyboard access, and touch fallbacks.

  • Markup: use a semantic nav with nested ul/li. If a top item is only a toggle, use a button; if it is a link, keep it an a and provide a separate toggle for the panel. Keep the panel markup simple so it degrades gracefully.
  • Styling: position panels absolutely inside relatively positioned parents. Animate transform and opacity (not height or top) for GPU-accelerated transitions. Use a short open/close delay to avoid flicker.
  • Interaction: add/remove an open class and synchronize aria-expanded on the trigger and aria-hidden on the panel. Implement keyboard handling (open on focus, arrow navigation inside the panel, Esc to close).
  • Touch: avoid hover-only behavior on touch devices. Apply hover styles only under @media (hover: hover) and provide click/tap toggles otherwise.

Accessibility and performance are critical. Follow the WAI-ARIA keyboard/menu guidance (WAI-ARIA menu pattern) and MDN notes on ARIA roles (MDN menu role). Respect prefers-reduced-motion and prefer transform/opacity animations; use will-change sparingly. Test with keyboard-only navigation, a screen reader (NVDA/VoiceOver), and on multiple touch devices.

Recommended Answers

All 8 Replies

Member Avatar for hericles

google CCS only drop down menu and you will find plenty of examples. Javascript versions work just as well too.

Member Avatar for <M/>

Do you know of one specific to the one I'm looking for? (look at mbusa.com)

Member Avatar for <M/>

I am probably gonna use our brother google and maybe its sister bing :)
Or read a little more...

Thanks for the 2 links, they'll seem useful for later practices :)

Member Avatar for JorgeM

For these types of effects, I would recommend you play a bit with jQuery. Visit jQuery.com for documentation, tutorials, examples, etc...

If you know JavaScript, jQuery is quick to learn. From there, there are tons of examples on the web.

Member Avatar for <M/>

I did notice how easy it was to understand Jquery, it's actually, by my opinion, just like css (just a little more technical ;) )

Member Avatar for rotten69

That all solves your problem, then mark the thread as solved to let others it is solved!

Member Avatar for <M/>

Yes, it does solve my issues! Thanks you guys!

(do forgive me, i tend to forget to mark things as solved :( )

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.