Step-by-Step Tutorial to Make Navigation Bar using Pure HTML CSS And JavaScript

Created: 16th Sep 24 4 Views
Review needed
Verified
Loading...
Loading...
Comments

Table of Contents

Introduction to Creating a Navigation Bar

In this tutorial, we'll walk through the process of creating a responsive navigation bar using HTML, CSS, and JavaScript. We'll start with a basic structure and gradually enhance it with styling and functionality.

Step 1: HTML Structure

Let's start by creating the basic HTML structure for our navigation bar:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Bar Tutorial</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="navbar">
        <div class="logo">Logo</div>
        <ul class="nav-links">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

    <script src="script.js"></script>
</body>
</html>

At this point, your page will look like this:

Logo
  • Home
  • About
  • Services
  • Contact

Step 2: Basic CSS Styling

Now, let's add some basic CSS to style our navigation bar:

/* styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.navbar {
    background-color: #333;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.logo {
    font-size: 1.5em;
    font-weight: bold;
}

.nav-links {
    list-style-type: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.nav-links li {
    margin-left: 20px;
}

.nav-links a {
    color: white;
    text-decoration: none;
}

.nav-links a:hover {
    text-decoration: underline;
}

After applying this CSS, your navigation bar will look like this:

Step 3: Responsive Design

Let's make our navigation bar responsive by adding a hamburger menu for smaller screens:

/* Add to HTML */
<div class="hamburger">
    <span></span>
    <span></span>
    <span></span>
</div>

/* Add to CSS */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 2px 0;
}

@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 60px;
        left: 0;
        background-color: #333;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        margin: 10px 20px;
    }
}

After these changes, your navigation bar will be responsive:

Logo

Step 5: JavaScript Functionality

Finally, let's add some JavaScript to toggle the mobile menu:

// script.js
document.addEventListener('DOMContentLoaded', function() {
    const hamburger = document.querySelector('.hamburger');
    const navLinks = document.querySelector('.nav-links');

    hamburger.addEventListener('click', function() {
        navLinks.classList.toggle('active');
    });
});

This JavaScript adds interactivity to your mobile menu:

Final Touches

Congratulations! You've created a responsive navigation bar with a dropdown menu and mobile functionality. Here's a summary of what we've accomplished:

  • Created a basic HTML structure for the navigation bar
  • Styled the navigation bar using CSS
  • Made the design responsive for mobile devices
  • Added a dropdown menu for desktop view
  • Implemented JavaScript functionality for the mobile menu

Remember to test your navigation bar thoroughly on different devices and screen sizes to ensure a smooth user experience across all platforms.

Comments & Discussion

Facing issues? Have questions? Post them here! We're happy to help!

Latest Posts
More Posts
    Random Posts