Sidebar Menu

A sliding sidebar navigation menu built with HTML, CSS, and vanilla JavaScript. Click the hamburger icon to slide in a side panel with a dimmed overlay behind it — a common pattern for mobile-friendly site navigation.

Features

• Hamburger button toggles the sidebar open/closed
• Sliding animation for the sidebar panel
• Dark overlay behind the sidebar when open (click to close)
• Dedicated close (✕) button inside the sidebar
• No frameworks or dependencies — pure HTML/CSS/JS
• Accessible button labels (aria-label) on open/close controls

Tech Stack

• HTML5
• CSS3
• Vanilla JavaScript (ES6)

Project Structure

Sidebar-Menu/
├── index.html     # Page structure: topbar, sidebar, overlay, content
├── styles.css      # Layout, slide animation, and overlay styling
└── script.js       # Handles opening/closing the sidebar

Getting Started

No build tools or installs required.

1. Clone the repo:

   git clone https://github.com/FazarathAhamed/Sidebar-Menu.git

2. Open index.html in your browser.

Preview

*

Possible Improvements

• Add keyboard support (close on Esc, trap focus while open)
• Highlight the active nav link
• Add a collapsed "mini" state for larger screens

License

MIT — feel free to use and adapt.