CSS Sidebar Navigation Menu

A modern sidebar navigation menu built using HTML5 and CSS3. The sidebar opens and closes using the CSS Checkbox Hack, eliminating the need for JavaScript while providing smooth transitions and an elegant user experience.

✨ Features

• Responsive Sidebar Navigation
• Pure CSS Toggle (No JavaScript)
• CSS Checkbox Hack
• Smooth Slide Animation
• Font Awesome Icons
• Google Fonts Integration
• Hover Effects
• Full-Screen Background Image
• Modern UI Design

---

🛠️ Technologies Used

• HTML5
• CSS3
• Font Awesome
• Google Fonts

---

📚 Concepts Practiced

• CSS Positioning
• Fixed & Absolute Position
• CSS Transitions
• Hover Effects
• Box Shadow
• Opacity
• Flexbox Basics
• CSS Checkbox Hack
• Background Images
• Custom Fonts
• Icons Integration

---

📁 Project Structure

css-sidebar-menu/
│
├── index.html
├── style.css
├── photo.jpg
├── screenshot.png
└── README.md

---

🚀 How to Run

1. Clone this repository.
2. Open the project folder.
3. Open index.html in your browser.

---

📸 Preview

Add a screenshot named screenshot.png in the project folder.

---

🎯 Learning Outcome

This project was created while learning advanced CSS concepts, especially responsive navigation menus, CSS transitions, positioning, hover animations, and the CSS Checkbox Hack.

---

👨‍💻 Author

Amit Chauhan

If you found this project helpful, feel free to ⭐ the repository.🫣

🌐 Live Demo

🔗 https://amitx231.github.io/css-sidebar-menu/