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

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

Next Steps in Web Development: Learn CSS, JavaScript & Build Projects

  So, you've mastered HTML and created your first webpage—what's next? 🚀 To take your web development skills to the next level, you need to: ✅ Learn CSS to style and enhance your webpage’s appearance. ✅ Explore JavaScript to add interactivity and dynamic behavior. ✅ Practice by building projects like a portfolio website or a blog page . Let’s dive deeper into each step and see how you can level up your skills! 1. Learn CSS: Make Your Webpages Visually Appealing 🎨 HTML gives structure to a webpage, but CSS (Cascading Style Sheets) makes it visually appealing. With CSS, you can change colors, adjust layouts, add animations, and much more. Why Learn CSS? 🎨 Customize Colors & Fonts – Define unique themes for your website. 📏 Control Layouts – Arrange elements using Flexbox and Grid . 🎭 Add Animations & Effects – Make your website more engaging. 📱 Make Websites Responsive – Ensure your site looks great on all devices. Quick CSS Example body { background...
Post a Comment
Read more