Assignment: Dropdowns & Menus (Bootstrap)

 Assignment: Dropdowns & Menus (Bootstrap)

Task 1: Dropdown Inside a Navbar

Create a responsive navigation bar.

Add a dropdown menu inside the navbar.

The navbar should collapse into a hamburger menu on smaller screens.

The dropdown should work correctly in both desktop and mobile views.

Expected Outcome:

A fully responsive navbar with a working dropdown.

Task 2: Custom Styling

Change the default appearance of the dropdown menu using CSS:

              

Background color

Text color

Hover effect

Ensure the dropdown remains readable and visually balanced.

Expected Outcome:

A customized dropdown menu that still follows good.

Task 3: Dropdown Alignment & Direction

Create:

One right-aligned dropdown

One dropup

Demonstrate how dropdown direction affects user experience.

Expected Outcome:

Properly aligned dropdowns using Bootstrap classes.

Task 4: Accessibility & Usability

Ensure proper use of:

aria-expanded

aria-labelledby

Make sure the dropdown is keyboard accessible.

Add accessibility is important in menus.

______________________________________________

Submission 👩‍🏫

Submit:

HTML file

CSS file (if used)

Include screenshots of:

Desktop view

Mobile view

Add a short explanation (100–150 words) describing:

Challenges faced

What you learned from this assignment

Evaluation Criteria

Criteria

Marks

Correct use of Bootstrap dropdowns

30

Responsiveness

20

Custom styling

20

Accessibility implementation

20

Code structure & clarity

10

Total

100

Complete This Assignment And Submit To Me