mobile menu preset · fullscreen
The full screen mobile menu, drawn for Zero2Webmaster
The menu fills the screen under the bar, on the deep ground, with very large bold items and nothing else. Children open in place. The social icons are pinned at the bottom.
How it behaves
- A native details element whose panel is position: fixed from under the bar to the bottom of the viewport.
- Items at 28px, weight 700, on rows at least 56px tall.
- Children open as nested details accordions. The source replaces the list with a sub-level, which needs script; the accordion opens in place without it.
- Closes from the summary in the bar, from the close button drawn by the summary's ::after, or by keyboard. Scroll lock via :has(); Escape is a gap.
To see this menu, make the window narrower than 1010px, or open the page on a phone, then press Menu in the bar. It opens and closes by tap and by keyboard: Tab to Menu, Enter, Tab through the items, Shift+Tab back and Enter again.
When to use it
Short menus that want to feel like a destination. Big type and nothing else on the screen.
Source. blackdiamondequipment.com, measured at 390 on 2026-09-23; its ~24px items read from the screenshot, raised here to 28px
What this page is showing
Every page in the kit carries all three components, so the one under review is seen in a real page rather than in a card. This page's three presets, and the brand they are drawn in:
- Header
- Classic bar
- Mobile menu
- Full screen
- Footer
- Minimal footer
- Brand
- Zero2Webmaster — primary
#82C92B, accent#FFD700, Plus Jakarta Sans - Breakpoint
- 1010px: the bar's links show from there up; below it the full screen menu takes over
- Client script
- none — every disclosure is a details element
Measured from
The mobile menu presets were modelled on pages measured off the live DOM at 1440×900 and 390×844 on 2026-09-23. The structure was taken; the sizes were not, because three of the four sources set type below this organisation's floor.
docs.zernio.com/platforms/shopify
Taken: a full-height panel at 85% width from the right edge with the page still visible beside it, links first, actions and socials last. Not copied: 15px items (below the floor) and the script that drives the panel.
| panel | aside fixed to the right edge, 332 of 390px (85%), full height, white, shadow, left border |
|---|---|
| items | 35 links, 15px / 400, 39px rows, a leading icon each, a chevron on items with children |
| groups | plain-text group headings; the current page is a tinted pill |
| panelFooter | pinned to the bottom: primary button, icon links, theme toggle |
| backdrop | none |
greenmusic.org.au
Taken: the left side, the dimmed backdrop and the brand ground as the other end of each drawer axis; the CTA blocks stacked at full width; the socials centred beneath. Not copied: the 0.4s slide transition's script.
| panel | 350 of 390px (90%), full height, brand-green ground, slides in over 0.4s, dimmed full-screen backdrop |
|---|---|
| items | 20px / 700 / uppercase |
| ctas | three full-width blocks under the links |
| socials | centred beneath the blocks |
blackdiamondequipment.com
Taken: a full-width panel under the bar with big bold type and nothing else on the screen. Not copied: the drill-down that replaces the list with a sub-level (script), and the 11px / 800 uppercase desktop nav.
| panel | full width from under the 50px bar to the bottom, 390×756 at y=90, black |
|---|---|
| items | 8 top-level items at about 24px on a 44px row pitch, read from the screenshot (the DOM probe hit the hidden desktop mega menu) |
| drillDown | a chevron on every item with children opens a sub-level |
| pinned | four social icons and Log in at the bottom |