JS Behaviors Test Page

1 — Nav (yg-nav.js)

Mobile toggle: Resize the window to mobile width — a hamburger button appears in the header above. Tap it to open/close the nav.

Scroll class: Scroll down — the header gains .is-scrolled (visible in DevTools; theme.css can hook into it for a shadow or background change).

Escape key: While the mobile nav is open, press Escape to close it.

1a — Simple dropdown (panel anchors to its parent wrapper)


1b — Mega menu (same data-yg-dropdown, panel anchors to the nav bar)

The only structural difference: position: relative is on the <nav>, not the <li>. So .mega-panel { left: 0; width: 100% } spans the full nav width.


✓ Click one dropdown → others close. ✓ Click outside → closes. ✓ Escape → closes. ✓ Same data-yg-dropdown attribute for both patterns.

2 — Accordion (yg-accordion.js)


✓ Single-open mode: opening one closes others. ✓ Keyboard accessible.

3 — Lightbox (yg-lightbox.js)

Mountain landscape at sunrise Ocean waves at sunset Forest path in autumn City skyline at night Desert sand dunes Snowy mountain peaks

✓ Click any image to open. ✓ Arrow buttons + keyboard arrows to navigate. ✓ Escape or click outside to close. ✓ Swipe on touch.

4 — Carousel (yg-carousel.js)

Slide 1 — Autoplay
This carousel autoplays every 4 seconds. Hover to pause. Use arrow keys when focused.
Slide 2 — Swipe
On touch devices, swipe left or right to navigate between slides.
Slide 3 — Accessible
ARIA labels and live regions are managed automatically. Autoplay pauses on focus.

✓ Autoplay pauses on hover/focus. ✓ Prev/next buttons. ✓ Dot indicators. ✓ Keyboard arrows. ✓ Touch swipe.