Exercise 7: Create a Responsive Navigation Menu

Objective: Design and implement a responsive navigation menu using HTML, CSS, and JavaScript. The menu should be functional on both desktop and mobile devices.

Instructions:

  1. Setup the HTML Structure:

    • Create a new HTML file (index.html).
    • Set up the basic structure with <!DOCTYPE html>, <html>, <head>, and <body> tags.
    • In the <body> tag, create a <nav> element to house your navigation menu.
    • Inside the <nav> element, add a logo or a heading.
    • Add an unordered list (<ul>) with at least 4 list items (<li>) for the navigation links (e.g., Home, About, Services, Contact).

  2. Style the Navigation Menu for Desktop:

    • Create a CSS file (styles.css) and link it to your HTML file.
    • Use flexbox or CSS grid to horizontally align the menu items.
    • Style the menu items with padding, margin, and hover effects to make them visually appealing.
    • Position the navigation menu at the top of the page and make it sticky.

  3. Make the Menu Responsive:

    • Use CSS media queries to handle screen widths below 768px (mobile view).
    • For mobile screens, style the menu to stack vertically instead of horizontally.
    • Hide the navigation menu by default on mobile devices and replace it with a “hamburger” menu icon (three horizontal lines).

  4. Add JavaScript for Interactivity:

    • Create a JavaScript file (script.js) and link it to your HTML file.
    • Add functionality to toggle the visibility of the navigation menu when the hamburger icon is clicked.
    • Ensure that the menu opens and closes smoothly with a sliding or fading effect.

  5. Bonus Task (Optional):

    • Implement a dropdown menu for one of the navigation items. When the user hovers or clicks on this item, a submenu should appear.
    • Add a transition effect for the dropdown to make it appear smoothly.

Submission Requirements:

  • Your final project should consist of three files: index.html, styles.css, and script.js.
  • Ensure that the navigation menu is fully responsive and works on both desktop and mobile screens.
  • The code should be clean and well-commented to explain key sections.
  • Host your project on GitHub or another platform.