Skip to main content

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?

  1. Desktop View:

    • Hover over menu items to reveal dropdowns.
    • Submenus appear on the right side.
  2. 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.

Comments

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

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()" > ☰ ...

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...