A clean, premium, and fully responsive navigation menu with a smooth dark overlay and an interactive changing hamburger icon. Built using modern CSS and HTML.
Documentation Update (2026): Added live deployment link - https://udaybodana-dev.github.io/animated-navigation/
- Dynamic Icon: Hamburger icon smoothly transitions into a close ("X") icon when active.
- Glassmorphism Overlay: Premium dark glass effect background using
backdrop-filter: blur. - Sleek Animations: Smooth slide-in, staggered animations for menu items.
- Pure CSS Solution: Uses the CSS Checkbox Hack for menu state management (no JavaScript required).
- Responsive Design: Optimized for all devices, from mobile phones to large desktops.
- Open Menu: Click on the hamburger menu icon located in the corner of the page.
- Explore Links: Hover over navigation links to trigger subtle micro-animations.
- Close Menu: Click the "X" icon or anywhere outside the menu to dismiss the overlay.
- HTML5
- CSS3
- Clone or download this repository.
- Open
index.htmldirectly in any web browser, or use a local development server like Live Server in VS Code.
© Designed & Developed by Uday Bodana