alang-dev / auto-parts

A comprehensive training project aimed at teaching HTML, CSS, and JavaScript by developing a static website about auto parts.
https://auto-ca86d.web.app/
2 stars 0 forks source link

Navigation Bar #12

Open alang-dev opened 1 month ago

alang-dev commented 1 month ago

https://demo.templatemonster.com/demo/273583.html

Navigation Items:

Logo màu trắng: Image Logo màu đen: Image

Các mục trên thanh điều hướng đúng theo thứ tự sau:

Tạo icon web từ logo Mvn Auto bằng link này: https://image.online-convert.com/convert-to-ico và sau đó thay cho web

Lưu ý: Logo và các mục ở thanh điều hướng khi rê chuột vào sẽ phóng to lên khoảng 2 pixel. Màu sắc của các mục trên thanh điều hướng là màu trắng, nhưng tăng kích thước lên một chút so với template.

Acceptance Criteria:

  1. Navigation Structure:

    • Create a navigation bar containing all the above-listed items.
    • Use pure HTML, CSS, and JavaScript (no external libraries).
  2. Normal Mode:

    • The navigation bar background should be transparent initially (before scrolling).
    • Apply hover and active state styles for navigation items.
  3. Sticky Navigation:

    • When the user scrolls, the navigation should become sticky (fixed at the top).
    • The background should change to a solid color when the user scrolls.
  4. Responsive Behavior:

    • For small screens:
      • Hide the navigation menu and replace it with a "more" icon.
      • When the "more" icon is clicked, the full navigation menu should slide in or expand.
      • Provide a "close" icon to hide the menu again after it is revealed.
      • Use CSS transitions for smooth show/hide animation.
    • Ensure the "more" icon is intuitive and easy to use on touch screens.
  5. Smooth Scrolling:

    • When a navigation item is clicked, the page should scroll smoothly to the corresponding section.
    • Implement offset adjustment to account for the sticky navigation when scrolling to sections.
  6. Testing:

    • Test the navigation bar functionality on different screen sizes (mobile, tablet, and desktop).
    • Ensure smooth scrolling, proper sticky behavior, and the show/hide functionality work across all devices.

Non-Functional Criteria:

Default view: navigation bar should be transparent Image

When user scroll down: navigation bar should stick on the top and background turn to white Image

Tablet mode: Should hide navigation items, show the More Icon Image

When More Icon is clicked: The option expanded Image