Welcome to CSS Project 3 - Responsive Navigation Menu

This project will guide you through creating a responsive navigation menu using HTML and CSS. It's designed for beginners with basic knowledge of HTML and CSS.

Hardware Setup

Ensure you have the following hardware components:

A computer with internet access.
A keyboard and mouse for typing and navigation.

Software Requirements

Here are the software tools you'll need for this project:

Any code editor (e.g., Visual Studio Code, Sublime Text).
A web browser (e.g., Chrome, Firefox).

Knowledge Prerequisites

To successfully complete this project, you should be familiar with the following concepts:

Basic understanding of HTML and CSS.

Difficulty Rating

Easy Difficulty

Project Time!!!

“Design is not just what it looks like and feels like. Design is how it works.” - Steve Jobs

Project Steps:

Done

Download and install Visual Studio Code or your preferred code editor.
Open your code editor and create a new folder for your project.
Inside the folder, create a new file named index.html and another file named styles.css.

Done

Open index.html and add the following basic HTML structure:





    
    
    Responsive Navigation Menu
    


    
        MySite
        
            Home
            About
            Services
            Contact

Done

Open styles.css and add the following CSS to style your navigation menu:


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    padding: 1em;
}

.navbar .logo {
    color: #fff;
    font-size: 1.5em;
}

.navbar .nav-links {
    list-style: none;
    display: flex;
}

.navbar .nav-links li {
    margin: 0 1em;
}

.navbar .nav-links a {
    color: #fff;
    text-decoration: none;
}

.burger {
    display: none;
    cursor: pointer;
}

.burger div {
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 5px;
}

@media (max-width: 768px) {
    .navbar .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
    }
    
    .burger {
        display: block;
    }
}

Save the file and open index.html in your web browser to see your styled navigation menu.

Done

Create a new file named script.js and add the following JavaScript to make the menu responsive:


const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');

burger.addEventListener('click', () => {
    nav.classList.toggle('nav-active');
});

Add the following CSS rule to styles.css to enable the toggling effect:


.nav-active {
    display: flex;
}

Welcome to CSS Project 3 - Responsive Navigation Menu

Hardware Setup

Software Requirements

Knowledge Prerequisites

Difficulty Rating

Easy Difficulty

Project Time!!!

Project Steps:

Congratulations! You've created a responsive navigation menu using HTML, CSS, and JavaScript. Now you're ready to tackle more complex projects.