Creating a Responsive Navbar with Advanced Features such as scroll...

HTML

Creating a Responsive Navbar with Advanced Features such as scroll indicators, animated icons, or extra UI components

2025-02-21 12:11:16 • Vue

I'll provide a step-by-step guide with full source code to create a responsive navbar using HTML, CSS, and JavaScript. The navbar will include:

Key Features:

Responsive Design – Works on all screen sizes.
Submenus – Dropdown submenus for better navigation.
Animations – Smooth hover and transition effects.
Dark Mode Toggle – Switch between light and dark themes.
Sticky Navbar – Navbar remains at the top when scrolling.
Scroll Indicator – Progress bar showing scroll position.
Animated Icons – Hamburger menu and toggle button animations.
Extra UI Components – Search bar, buttons, and hover effects.

1. Project Structure

/responsive-navbar/
│── index.html
│── styles.css
│── script.js

2. Full Source Code

HTML (`index.html`)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Navbar</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>

    <!-- Scroll Indicator -->
    <div class="scroll-indicator"></div>

    <!-- Navbar -->
    <nav class="navbar">
        <div class="logo">Brand</div>
        <ul class="nav-links">
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a>
                <ul class="submenu">
                    <li><a href="#">Web Design</a></li>
                    <li><a href="#">SEO</a></li>
                    <li><a href="#">Marketing</a></li>
                </ul>
            </li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li class="dark-mode-toggle">
                <i class="fas fa-moon"></i>
            </li>
        </ul>
        <div class="hamburger">
            <i class="fas fa-bars"></i>
        </div>
    </nav>

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

CSS (`styles.css`)

/* General Styling */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    transition: background 0.3s, color 0.3s;
}

/* Scroll Indicator */
.scroll-indicator {
    position: fixed;
    top: 0;
    left: 0;
    height: 5px;
    width: 0%;
    background: #3498db;
    z-index: 100;
}

/* Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background: #333;
    color: white;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: 0.3s;
}

.navbar .logo {
    font-size: 24px;
    font-weight: bold;
}

/* Navbar Links */
.nav-links {
    list-style: none;
    display: flex;
}

.nav-links li {
    position: relative;
}

.nav-links a {
    text-decoration: none;
    color: white;
    padding: 10px 20px;
    display: block;
    transition: 0.3s;
}

.nav-links a:hover {
    background: #555;
}

/* Submenu */
.submenu {
    position: absolute;
    top: 40px;
    left: 0;
    background: #444;
    display: none;
    list-style: none;
    padding: 0;
}

.submenu li a {
    width: 150px;
    padding: 10px;
}

.nav-links li:hover .submenu {
    display: block;
}

/* Dark Mode */
body.dark {
    background-color: #222;
    color: white;
}

body.dark .navbar {
    background: #111;
}

body.dark .scroll-indicator {
    background: #f39c12;
}

/* Hamburger Menu */
.hamburger {
    display: none;
    cursor: pointer;
}

.hamburger i {
    font-size: 24px;
}

/* Responsive */
@media (max-width: 768px) {
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 60px;
        left: 0;
        background: #333;
    }

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

    .hamburger {
        display: block;
    }
}

JavaScript (`script.js`)

document.addEventListener("DOMContentLoaded", () => {
    const hamburger = document.querySelector(".hamburger");
    const navLinks = document.querySelector(".nav-links");
    const darkModeToggle = document.querySelector(".dark-mode-toggle");
    const scrollIndicator = document.querySelector(".scroll-indicator");

    // Toggle Mobile Menu
    hamburger.addEventListener("click", () => {
        navLinks.classList.toggle("active");
    });

    // Dark Mode Toggle
    darkModeToggle.addEventListener("click", () => {
        document.body.classList.toggle("dark");
    });

    // Scroll Indicator
    window.addEventListener("scroll", () => {
        let scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
        let scrollTop = document.documentElement.scrollTop;
        let scrollWidth = (scrollTop / scrollHeight) * 100;
        scrollIndicator.style.width = scrollWidth + "%";
    });
});

3. Explanation of Features

1. Responsive Navbar

The media queries ensure the navbar adapts to smaller screens.
The hamburger menu toggles the navigation links in mobile view.

2. Submenus

The submenu appears on hover using the :hover selector.
It's hidden by default (display: none) and appears on hover.

3. Animations

Smooth transitions are applied to navbar items.
The menu toggles using classList.toggle("active") in JavaScript.

4. Dark Mode Toggle

A dark mode class is toggled on the body, changing background and text colors dynamically.

5. Sticky Navbar

The position: sticky; top: 0; keeps the navbar fixed at the top when scrolling.

6. Scroll Indicator

JavaScript calculates the scroll percentage and updates the width of the .scroll-indicator bar.

7. Animated Icons

The hamburger icon appears in mobile view.
The dark mode toggle icon changes background when clicked.

8. Extra UI Components

Search bars, buttons, or icons can be added within the navbar.

4. Additional Enhancements

You can add: ✅ Hover animations using CSS keyframes
✅ Animated dropdown with smooth sliding effects
✅ More UI elements like a search bar or login button

Connectez-vous pour aimer, partager et commenter!

Creating a Responsive Navbar with Advanced Features such as scroll indicators, animated icons, or extra UI components

Key Features:

1. Project Structure

2. Full Source Code

HTML (`index.html`)

CSS (`styles.css`)

JavaScript (`script.js`)

3. Explanation of Features

1. Responsive Navbar

2. Submenus

3. Animations

4. Dark Mode Toggle

5. Sticky Navbar

6. Scroll Indicator

7. Animated Icons

8. Extra UI Components

4. Additional Enhancements

Lire la suite

Step-By-Step Full Guide To Set Up a WordPress Website From Scratch

How To Become Financially Free as a Tech Professional

A Simple Guide to Grocery Stores in Dallas, Dublin, and DC

How to Increase Domain Authority (DA) – Step-by-Step Guide

Complete Guide: Converting a Website into an Android App Using Android Studio

Nous rejoindre

Langues

Creating a Responsive Navbar with Advanced Features such as scroll indicators, animated icons, or extra UI components

Key Features:

1. Project Structure

2. Full Source Code

HTML (index.html)

CSS (styles.css)

JavaScript (script.js)

3. Explanation of Features

1. Responsive Navbar

2. Submenus

3. Animations

4. Dark Mode Toggle

5. Sticky Navbar

6. Scroll Indicator

7. Animated Icons

8. Extra UI Components

4. Additional Enhancements

Lire la suite

Step-By-Step Full Guide To Set Up a WordPress Website From Scratch

How To Become Financially Free as a Tech Professional

A Simple Guide to Grocery Stores in Dallas, Dublin, and DC

How to Increase Domain Authority (DA) – Step-by-Step Guide

Complete Guide: Converting a Website into an Android App Using Android Studio

HTML (`index.html`)

CSS (`styles.css`)

JavaScript (`script.js`)