Phase 4Global shell · dark hero
One shell, every page.
This page exists to validate the header, mega menu, search shell, drawer, CTA band and footer on a dark hero. The header starts transparent and gains its blurred teal bar after 24px of scroll.
01Scroll test
Content below the fold so the header state can be tested.
Open each mega menu with the mouse and with the keyboard. Tab through the header, press Escape, click outside, and resize across 1200px.
Keyboard
Tab to a pillar, press ArrowDown to open and jump into the panel, ArrowUp/Down to move between links, Escape to close and return.
Pointer
Click opens. Hover opens after a short dwell so crossing the header does not trigger menus. Leaving the panel closes it.
Drawer
Below 1200px the burger opens a full-height drawer built from the same navigation, with accordion pillars, search and the CTA.
Filler content follows.
Filler section
Long enough to scroll. The footer columns below are generated from the header navigation, so any change to the header list appears in both the drawer and the footer without a second edit.
In Oracle APEX the same list, SITE_NAV, feeds the header, the drawer and the footer through three list templates. Nothing in this page carries navigation twice.
Augment. Specialise. Connect.
A 30-minute consultation with an Oracle PPM specialist: your portfolio, your systems, no generic pitch.