Skip to main content

Multilevel dropdown menu with icons, mega menus, and smooth transitions.

🚀 New Features Added:

✅ Icons for each menu item
✅ Mega Menu Support (for large content sections)
✅ Smooth CSS transitions for better UX

1️⃣ Updated HTML Structure (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enhanced Multilevel Dropdown Menu</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</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="#"><i class="fas fa-home"></i> Home</a></li>
            <li class="dropdown">
                <a href="#"><i class="fas fa-cogs"></i> Services ▼</a>
                <ul class="dropdown-menu">
                    <li><a href="#"><i class="fas fa-laptop-code"></i> Web Development</a></li>
                    <li class="dropdown">
                        <a href="#"><i class="fas fa-paint-brush"></i> Design ▼</a>
                        <ul class="dropdown-menu">
                            <li><a href="#"><i class="fas fa-user-edit"></i> UI/UX</a></li>
                            <li><a href="#"><i class="fas fa-image"></i> Graphic Design</a></li>
                        </ul>
                    </li>
                    <li><a href="#"><i class="fas fa-search"></i> SEO</a></li>
                </ul>
            </li>
            <li class="dropdown mega-menu">
                <a href="#"><i class="fas fa-box-open"></i> Products ▼</a>
                <div class="mega-content">
                    <div class="mega-column">
                        <h3>Software</h3>
                        <a href="#">CRM Tools</a>
                        <a href="#">Project Management</a>
                        <a href="#">Accounting</a>
                    </div>
                    <div class="mega-column">
                        <h3>Hardware</h3>
                        <a href="#">Laptops</a>
                        <a href="#">Monitors</a>
                        <a href="#">Accessories</a>
                    </div>
                    <div class="mega-column">
                        <h3>Cloud Services</h3>
                        <a href="#">AWS</a>
                        <a href="#">Google Cloud</a>
                        <a href="#">Azure</a>
                    </div>
                </div>
            </li>
            <li><a href="#"><i class="fas fa-envelope"></i> Contact</a></li>
        </ul>
    </nav>

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

2️⃣ Updated 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: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.3s ease;
}

.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: 200px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

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

.dropdown-menu a {
    padding: 12px;
    display: flex;
    align-items: center;
}

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

/* Multi-Level Dropdown */
.dropdown-menu .dropdown {
    position: relative;
}

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

/* Mega Menu Styling */
.mega-menu {
    position: relative;
}

.mega-content {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    width: 600px;
    background: #444;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
    padding: 20px;
    display: flex;
    justify-content: space-between;
}

.mega-menu:hover .mega-content {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.mega-column {
    flex: 1;
    padding: 10px;
}

.mega-column h3 {
    color: white;
    margin-bottom: 10px;
}

.mega-column a {
    display: block;
    color: white;
    padding: 5px 0;
    transition: color 0.3s;
}

.mega-column a:hover {
    color: yellow;
}

/* 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️⃣ Updated JavaScript for Mobile Menu (script.js)

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

📌 How It Works?

  1. Icons in Menu Items

    • Font Awesome icons added to all items.

  2. Mega Menu for Products

    • Three columns for Software, Hardware, and Cloud Services.

  3. Smooth CSS Transitions

    • Dropdown menus fade in and slide down smoothly.

  4. Responsive Design

    • Mobile menu toggle works with a hamburger icon.

🚀 Why This Menu Stands Out?

✅ Fully customizable and scalable
✅ Supports unlimited nested dropdowns
✅ Smooth animations for a better experience
✅ Mega menu enhances large content accessibility

Labels:

Comments

Post a Comment

Popular posts from this blog

Web Application Development with Jitendra .....

Post a Comment
Read more
AI and ML Cryptography and Network Security Data structure and Algorithm IntroToOOP Normalization in DBMS OOPS java osi-tcp SSL-TLS protocol
Post a Comment
Read more

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 ...
Post a Comment
Read more