ITDCFeD – Week #8 | Advanced Responsive Navbar + Sidebar Menu + Theme Switcher + Scroll Effects

, , , , , , ,


 

1. تعارف

آئی ٹی درسگاہ سرٹیفائیڈ فرنٹ انڈ ڈویلپر (ITDCFeD) پروگرام کے آٹھویں ہفتے میں خوش آمدید۔ اس Week #8 میں ایک professional Advanced Navigation System بنایا جائے گا جو modern websites کا core component ہے۔

یہ navbar hamburger menu animation، smooth sidebar slide، dark/light theme switcher، smooth scroll اور scroll-triggered effects سمیت مکمل navigation solution ہے جو آپ کے portfolio کا highlight بنے گا۔

2. اس لیکچر / پروجیکٹ کے اہداف

Week #8 کے اختتام تک آپ:

  • Advanced CSS Animations (hamburger → X, sidebar slide, staggered menu items)

  • CSS Custom Properties (theme switching: --primary-color, --bg-primary وغیرہ)

  • Smooth Scroll (scrollIntoView() + data-scroll="smooth")

  • Intersection Observer (scroll-triggered section animations)

  • Responsive Sidebar (desktop: always visible, mobile: toggle)

  • Performance Optimized (Observer API + efficient event handling)

3. Live Demo اور Source Code (CodePen)

🔗 Live Demo + Source Code (CodePen):
https://codepen.io/mmshahid73/pen/pvbpmQb

استعمال کا طریقہ:

  • Hamburger Menu (☰) click → animated sidebar open

  • Sidebar Links پر click → smooth scroll + sidebar auto-close (mobile)

  • Theme Switcher (🌙/☀️) → instant dark/light mode

  • Scroll کریں → sections fade/slide in animations

  • Resize browser → responsive behavior test کریں

  • Navbar scroll پر glass effect (backdrop-filter)

4. پروجیکٹ کی ساخت – Step-by-Step وضاحت

4.1 HTML – Semantic Structure

text
- Fixed Navbar: 80px width → 320px expanded
- Hidden Checkbox: #sidebar-toggle, #theme-toggle (CSS-only toggles)
- Sidebar Overlay: Backdrop blur + click-to-close
- CSS Variables: :root + [data-theme="dark"] switching
- Sections: #home → #week8 + scroll targets

4.2 CSS – Advanced Animations + Theming

text
✅ Hamburger Animation: 3 spans → rotate X (45°/-45° + opacity:0)
✅ Sidebar Slide: translateX(-100%) → 0 + cubic-bezier easing
✅ Staggered Menu: @keyframes slideIn + nth-child delays
✅ Glassmorphism: backdrop-filter: blur(20px) + rgba backgrounds
✅ Theme System: CSS vars (--primary-color, --bg-primary) toggle
✅ Scroll Reveal: opacity 0→1 + translateY(50px→0)

4.3 JavaScript – Interactive Features

text
1. toggleNavbar(): classList.toggle('expanded') + overlay
2. Theme Toggle: document.documentElement.setAttribute('data-theme', 'dark')
3. Smooth Scroll: scrollIntoView({behavior: 'smooth'})
4. Intersection Observer: Performance-optimized scroll animations
5. Navbar Glass Effect: scrollY > 100px پر backdrop-filter
6. Mobile Auto-close: window.innerWidth < 768px پر link click

5. Week #8 اسائنمنٹ / Homework

لازمی کام:

  1. CodePen Fork کریں: https://codepen.io/mmshahid73/pen/pvbpmQb

  2. 3 نئے Sections add کریں (Week #9, Portfolio, About وغیرہ)

  3. Customization (2 changes):

    • Colors/gradients (--primary-color بدلیں)

    • Menu items یا logo text

  4. Mobile Test: Phone میں sidebar toggle + scroll test

  5. Forum Share: CodePen لنک + screenshot + customization details

Bonus Challenges:

  • Search Bar sidebar میں (sections filter)

  • Active Link Highlight (current scroll section)

  • Submenu Dropdown (Week #1-4 sub-items)

  • Sticky Sub-nav scroll پر

6. Real-World Applications + Portfolio Value

یہ Advanced Navbar industry-standard ہے:
✅ SaaS Dashboards (admin panels)
✅ Portfolio Sites (project navigation)
✅ E-learning Platforms (course menus)
✅ Agency Websites (service sections)
✅ Corporate Sites (multi-page navigation)

Week #1-8 Portfolio Complete: Personal → Form → To-Do → Pricing → Gallery → Dashboard → Quiz → Advanced Navbar = Full-Stack Frontend Developer!

7. اختتامی پیغام

Week #8 کا یہ advanced navigation system آپ کو professional-level animations, theming, اور performance optimization سکھا دیتا ہے۔ اب fork کریں، customize کریں، mobile test کریں اور فورم پر share کر کے ITDCFeD 8-week certification track مکمل کریں!

-
Tags: , , , , , , ,

کوئی تبصرے نہیں:

ایک تبصرہ شائع کریں

سبسکرائب کریں در: تبصرے شائع کریں (Atom)