A sidebar navigation that slides in and "pushes" the main content to the side when opened. Built on a CSS checkbox toggle — no JS required for basic use. Nested items are extracted into sliding sub-panels automatically.
Click the hamburger icon to open the menu. Try nested items like "Settings" or "Projects" to see sub-panel navigation.
The menu toggle is an <input type="checkbox" class="navigation">. CSS sibling selectors translate the checked state into .pushed classes on .main-header, .push-menu, and .push-content. PushMenu.init() then adds nested <ul> sub-panel behaviour.
Clicking a menu item with children slides to a new panel showing only that subtree, with a back button to return. Closing the menu resets all panels to the root.
| Method | Description |
|---|---|
PushMenu.init() | Finds required DOM elements, builds sub-panels, and binds events. Call once on DOMContentLoaded. |
PushMenu.open() | Opens the menu programmatically. |
PushMenu.close() | Closes the menu programmatically. |
PushMenu.isOpen() | Returns true if the menu is currently open. |
PushMenu.destroy() | Removes all event listeners and resets state. |
PushMenu.refresh() | Re-queries DOM elements — useful after dynamic DOM changes. |
| Selector | Purpose |
|---|---|
.navigation | The checkbox input that drives open/close state. |
.push-menu | The <nav> sidebar element. |
.push-content | The main content wrapper that gets pushed. |
.main-header | The top bar that moves with the content. |
.push-menu-backdrop | Overlay that closes the menu on click. |