Multilevel dropdown menu using HTML, CSS, and JavaScript.

Features of this Menu:

✅ Supports multiple levels of dropdowns
✅ Works on hover for desktop & click for mobile
✅ Fully responsive with a hamburger menu on small screens
✅ Smooth animations using CSS transitions

🛠️ Code Implementation:

1. HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multilevel Dropdown Menu</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <!-- Navigation Bar -->
    <nav class="navbar">
        <div class="logo">My Website</div>
        <button class="menu-toggle" onclick="toggleMenu()">☰</button>
        <ul class="nav-links" id="navMenu">
            <li><a href="#">Home</a></li>
            <li class="dropdown">
                <a href="#">Services ▼</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Web Development</a></li>
                    <li class="dropdown">
                        <a href="#">Design ▼</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">UI/UX</a></li>
                            <li><a href="#">Graphic Design</a></li>
                        </ul>
                    </li>
                    <li><a href="#">SEO</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#">Products ▼</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Software</a></li>
                    <li class="dropdown">
                        <a href="#">Hardware ▼</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Laptops</a></li>
                            <li><a href="#">Accessories</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

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

2. CSS Styling (styles.css)

/* General Styling */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

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

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

/* Navigation Links */
.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.nav-links li {
    position: relative;
}

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

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

/* Dropdown Menu */
.dropdown-menu {
    display: none;
    position: absolute;
    background: #444;
    list-style: none;
    padding: 0;
    margin: 0;
    top: 100%;
    left: 0;
    min-width: 180px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

.dropdown-menu li {
    width: 100%;
}

.dropdown-menu a {
    padding: 10px;
    color: white;
}

/* Show Dropdown on Hover (for Desktop) */
.dropdown:hover > .dropdown-menu {
    display: block;
}

/* Submenu (Multilevel Dropdown) */
.dropdown-menu .dropdown {
    position: relative;
}

.dropdown-menu .dropdown-menu {
    top: 0;
    left: 100%;
}

/* Mobile Menu */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
}

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

    .nav-links li {
        text-align: center;
    }

    .dropdown-menu {
        position: static;
        box-shadow: none;
    }

    .menu-toggle {
        display: block;
    }

    .show-menu {
        display: flex;
    }
}

3. JavaScript for Mobile Menu (script.js)

function toggleMenu() {
    document.getElementById("navMenu").classList.toggle("show-menu");
}

📌 How It Works?

Desktop View:
- Hover over menu items to reveal dropdowns.
- Submenus appear on the right side.
Mobile View:
- Clicking the ☰ button toggles the navigation menu.
- Dropdowns stay open when clicked instead of hover.

🚀 Why Use This Menu?

✅ Supports unlimited levels of dropdowns
✅ Fully responsive on all devices
✅ Easy to customize and extend
✅ Lightweight and fast performance

💡 Next Step: Integrate animations or JavaScript-based enhancements like active link highlighting for a better UX.

HTML Basics: A Beginner’s Guide to Web Development

Introduction HTML ( HyperText Markup Language ) is the backbone of web development. It provides the structure for web pages and allows developers to organize and display content effectively. Whether you’re a beginner stepping into the world of coding or someone looking to refresh their knowledge, understanding HTML is the first step towards creating stunning websites. In this guide, we’ll cover: ✅ What HTML is ✅ Basic structure of an HTML document ✅ Essential HTML tags ✅ Formatting and styling text ✅ Adding images, links, and lists ✅ Forms and tables By the end, you’ll be able to write and understand basic HTML code! 1. What is HTML? HTML is a markup language that structures content on the web. Unlike programming languages like JavaScript or Python, HTML doesn’t have logic or calculations—it simply defines the arrangement of elements like headings, paragraphs, images, and links on a webpage. 👉 HTML files have the extension .html and are read by web browsers to display content ...

jitendra

Search This Blog