HTML

How to Create a Responsive Navbar With Additional Features Like Submenus, Animations, And a Dark Mode toggle

2025-02-21 12:00:15 • Vue

Creating a responsive navbar with additional features like submenus, animations, and a dark mode toggle enhances the user experience significantly. Below is a detailed guide that includes the full source code and explanations.

Key Features of the Navbar

Responsive Design - Works on both desktop and mobile devices.
Hamburger Menu - Appears on smaller screens for navigation.
Submenus - Dropdown options for categories.
Animations - Smooth transitions for a modern look.
Dark Mode Toggle - Allows switching between light and dark themes.

Step 1: HTML Structure

We will create a navigation bar with:

A logo
A main menu with submenus
A hamburger icon
A dark mode toggle button

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Navbar with Features</title>
    <link rel="stylesheet" href="styles.css">
    <script defer src="script.js"></script>
</head>
<body>

    <nav class="navbar">
        <div class="logo">MyLogo</div>
        <ul class="nav-links">
            <li><a href="#">Home</a></li>
            <li class="dropdown">
                <a href="#">Services</a>
                <ul class="submenu">
                    <li><a href="#">Web Development</a></li>
                    <li><a href="#">App Development</a></li>
                    <li><a href="#">SEO Optimization</a></li>
                </ul>
            </li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li>
                <button class="dark-mode-toggle">🌙</button>
            </li>
        </ul>
        <div class="hamburger">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </nav>

</body>
</html>

Explanation

Submenu (.submenu) is placed inside the Services list item.
Dark Mode Toggle button is inside the navbar.
The hamburger menu will be used for mobile navigation.

Step 2: CSS Styling

We will style the navbar, submenu, animations, and dark mode.

/* styles.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* Default Light Theme */
body {
    background: white;
    color: black;
    transition: background 0.3s ease, color 0.3s ease;
}

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

/* Logo */
.logo {
    font-size: 24px;
    font-weight: bold;
}

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

.nav-links li {
    position: relative;
    margin: 0 15px;
}

.nav-links a {
    text-decoration: none;
    color: white;
    font-size: 18px;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: #f4a261;
}

/* Submenu Styling */
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #444;
    list-style: none;
    padding: 10px 0;
    width: 200px;
    border-radius: 5px;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(10px);
}

.submenu li {
    padding: 10px;
}

.submenu a {
    color: white;
    display: block;
}

.submenu a:hover {
    background: #555;
}

/* Show submenu on hover */
.dropdown:hover .submenu {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Hamburger Menu */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.hamburger span {
    width: 30px;
    height: 3px;
    background: white;
    margin: 5px 0;
    transition: transform 0.3s ease;
}

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

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

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

    .hamburger {
        display: flex;
    }

    /* Rotate Hamburger Icon */
    .hamburger.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

/* Dark Mode Styles */
.dark-mode {
    background: black;
    color: white;
}

.dark-mode .navbar {
    background: #222;
}

.dark-mode .submenu {
    background: #333;
}

.dark-mode .nav-links a {
    color: white;
}

.dark-mode-toggle {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: white;
}

Explanation

Smooth animations for submenu dropdown.
Dark mode toggle applies a .dark-mode class to the body.
Hamburger menu styling for mobile view.

Step 3: JavaScript for Interactivity

Now, let's add JavaScript to handle menu toggle, submenu animations, and dark mode switching.

// script.js
document.addEventListener("DOMContentLoaded", function () {
    const hamburger = document.querySelector(".hamburger");
    const navLinks = document.querySelector(".nav-links");
    const darkModeToggle = document.querySelector(".dark-mode-toggle");

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

    // Dark mode toggle
    darkModeToggle.addEventListener("click", () => {
        document.body.classList.toggle("dark-mode");

        // Store user preference in localStorage
        if (document.body.classList.contains("dark-mode")) {
            localStorage.setItem("theme", "dark");
        } else {
            localStorage.setItem("theme", "light");
        }
    });

    // Load theme preference
    if (localStorage.getItem("theme") === "dark") {
        document.body.classList.add("dark-mode");
    }
});

Explanation

Toggles the navbar on mobile view when the hamburger icon is clicked.
Applies dark mode when the toggle button is clicked and saves the preference in localStorage.

Final Features

✅ Responsive Navigation
✅ Hamburger Menu for Mobile
✅ Dropdown Submenus with Animation
✅ Dark Mode Toggle with Local Storage
✅ Smooth Transitions & Styling

Would you like any further customizations, such as sticky navbar, advanced animations, or extra features?

Connectez-vous pour aimer, partager et commenter!

How to Create a Responsive Navbar With Additional Features Like Submenus, Animations, And a Dark Mode toggle

Key Features of the Navbar

Step 1: HTML Structure

Explanation

Step 2: CSS Styling

Explanation

Step 3: JavaScript for Interactivity

Explanation

Final Features

Lire la suite

How Big Data is Transforming Healthcare

Local Flavor and Fresh Finds: Grocery Options in Vail, CO

How to Make Money Through Passive Income & Investments

Steps on How to Create Form Using PHP

Supermarkets in Pigeon Forge: Where to Stock Up During Your Smoky Mountain Getaway

Nous rejoindre

Langues

How to Create a Responsive Navbar With Additional Features Like Submenus, Animations, And a Dark Mode toggle

Key Features of the Navbar

Step 1: HTML Structure

Explanation

Step 2: CSS Styling

Explanation

Step 3: JavaScript for Interactivity

Explanation

Final Features

Lire la suite

How Big Data is Transforming Healthcare

Local Flavor and Fresh Finds: Grocery Options in Vail, CO

How to Make Money Through Passive Income & Investments

Steps on How to Create Form Using PHP

Supermarkets in Pigeon Forge: Where to Stock Up During Your Smoky Mountain Getaway