Member Avatar for jhonnyboy

Hello everyone I was taking a look at and saw their navigation menu fairly attractive. I believe this can be made in css, but I wanted to know how did they get such a huge "frame" when hovering over the navigation (Shop, Service, About us). Seems like their is some java script involved as well. Can anyone point me to a good tutorial or more or less tell me how this is made? No coding needed just looking for the concept here. Thanks!

Also that image with the black transparent background hovering over the slideshow. Is that css using layers?

Edited by jhonnyboy because: n/a
  • 2 Contributors
  • 2 Replies
  • 127 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by jhonnyboy

Dani AI

Generated

Good catch, . pointed to the right pattern; here is a concise, modern explanation of the mechanics behind that large “frame” and the dark overlay so the idea can be reimplemented cleanly today.

The framed area is usually a separate panel element that lives with the navigation (either as a child or a sibling). It’s positioned absolutely against a relatively positioned nav wrapper and sized to span whatever area you want (full width, centered container, etc.). Styling (background, border, shadow) creates the frame look. The panel is hidden by default and revealed on interaction by switching a class or a CSS :hover rule; for smooth, performant motion animate transform and opacity rather than height or top.

The dark translucent layer over the slideshow is simply an overlay element (or a pseudo-element) that covers the slideshow area and uses a semi‑transparent fill (for example rgba). That overlay should sit below the menu panel in stacking order so the menu remains interactive. Show and hide the overlay in sync with the frame so the page behind appears dimmed only when the panel is open.

Accessibility and touch are important: hover-only behavior fails on touch and keyboard users. Provide a toggle mode (open/close on click/tap), manage focus into the panel, expose aria-expanded/aria-controls on the trigger, close on Escape, and allow clicking outside to dismiss. Progressive enhancement keeps content usable if scripting is disabled.

Practical tips: inspect the live DOM with DevTools to find the panel and overlay elements, prefer CSS3 transforms and opacity for animations, test on small screens (convert the mega panel to a stacked panel on mobile), and replace deprecated plugins with HTML5/CSS/JS solutions for compatibility and performance.

Recommended Answers

All 2 Replies

Member Avatar for pritaeas

The menu pops up using javascript, the image is in flash (you can see it if you right-click it).

menu:

image:
http://www.queness.com/resources/html/slideshow/jquery-slideshow.html

Edited by pritaeas because: n/a
commented: Great Post, Efficient, and to the poitn. Thank you! +2
Member Avatar for jhonnyboy

pritaeas, you are the man! Thank you!! :)

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.