Logo Mvn Auto: để đúng vị trí logo như trang web template.
Lưu ý: logo khi chưa kéo trang lên thì dùng logo có chữ "MVN" màu trắng để tránh bị chìm với màu nền. Còn khi kéo trang lên, và thanh điều hướng chuyển sang màu trắng thì đổi màu logo có chữ "MVN" màu đen để tránh bị chìm với màu của thanh điều hướng.
Logo màu trắng:Logo màu đen:
Các mục trên thanh điều hướng đúng theo thứ tự sau:
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:
Navigation Structure:
Create a navigation bar containing all the above-listed items.
Use pure HTML, CSS, and JavaScript (no external libraries).
Normal Mode:
The navigation bar background should be transparent initially (before scrolling).
Apply hover and active state styles for navigation items.
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.
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.
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.
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:
The layout should be responsive on all device sizes (mobile, tablet, desktop).
Use media queries to ensure the correct behavior for different screen widths.
Ensure smooth scrolling behavior and proper positioning of sections on different screen sizes.
Default view: navigation bar should be transparent
When user scroll down: navigation bar should stick on the top and background turn to white
Tablet mode: Should hide navigation items, show the More Icon
https://demo.templatemonster.com/demo/273583.html
Navigation Items:
Logo màu trắng: Logo màu đen:
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:
Navigation Structure:
Normal Mode:
Sticky Navigation:
Responsive Behavior:
Smooth Scrolling:
Testing:
Non-Functional Criteria:
Default view: navigation bar should be transparent
When user scroll down: navigation bar should stick on the top and background turn to white
Tablet mode: Should hide navigation items, show the More Icon
When More Icon is clicked: The option expanded