Stylish Mega Menu - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Stylish Mega Menu</title> <style> body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; background: #f9f9f9; } nav { background: #2c3e50; color: #fff; padding: 15px 0; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .menu-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; } .menu { display: flex; list-style: none; padding: 0; margin: 0; } .menu li { position: relative; margin: 0 20px; } .menu > li > a { text-decoration: none; color: #fff; padding: 10px 20px; display: block; transition: background 0.3s; } .menu > li:hover > a { background: #34495e; } .mega-menu { position: absolute; left: 0; top: 100%; background: #ecf0f1; color: #333; display: none; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); padding: 20px; z-index: 10; animation: fadeIn 0.5s ease-in-out; white-space: nowrap; } .menu > li:hover .mega-menu { display: flex; } .mega-menu-column { padding: 10px; margin-right: 20px; } .mega-menu-column h4 { margin-top: 0; } .mega-menu-column a { display: block; text-decoration: none; color: #2c3e50; padding: 5px 0; transition: color 0.3s; } .mega-menu-column a:hover { color: #34495e; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } /* Custom emoji and icon styles */ .menu a::before { content: "🔧 "; } .mega-menu-column a::before { content: "🛠️ "; } /* Responsive styles */ @media (max-width: 768px) { .menu-container { flex-direction: column; align-items: flex-start; } .menu { flex-direction: column; width: 100%; } .menu li { width: 100%; } .menu > li > a { width: 100%; } .mega-menu { position: static; width: 100%; } .mega-menu-column { width: 100%; } } </style> </head> <body> <nav> <div class="menu-container"> <ul class="menu"> <li> <a href="#">All Tools</a> <div class="mega-menu"> <div class="mega-menu-column"> <h4>Development</h4> <a href="#">HTML</a> <a href="#">CSS</a> <a href="#">JavaScript</a> </div> <div class="mega-menu-column"> <h4>Design</h4> <a href="#">UI/UX</a> <a href="#">Graphics</a> <a href="#">Animations</a> </div> <div class="mega-menu-column"> <h4>Productivity</h4> <a href="#">Task Management</a> <a href="#">Time Tracking</a> <a href="#">Collaboration</a> </div> </div> </li> <li> <a href="#">Coding Hub</a> <div class="mega-menu"> <div class="mega-menu-column"> <h4>Languages</h4> <a href="#">Python</a> <a href="#">Java</a> <a href="#">C++</a> </div> <div class="mega-menu-column"> <h4>Frameworks</h4> <a href="#">React</a> <a href="#">Angular</a> <a href="#">Vue</a> </div> <div class="mega-menu-column"> <h4>Libraries</h4> <a href="#">NumPy</a> <a href="#">Pandas</a> <a href="#">D3.js</a> </div> </div> </li> <li> <a href="#">ThemeStore</a> <div class="mega-menu"> <div class="mega-menu-column"> <h4>WordPress</h4> <a href="#">Business</a> <a href="#">Blog</a> <a href="#">Portfolio</a> </div> <div class="mega-menu-column"> <h4>Shopify</h4> <a href="#">E-commerce</a> <a href="#">Fashion</a> <a href="#">Electronics</a> </div> <div class="mega-menu-column"> <h4>Wix</h4> <a href="#">Personal</a> <a href="#">Agency</a> <a href="#">Restaurant</a> </div> </div> </li> <li> <a href="#">Backgrounds</a> <div class="mega-menu"> <div class="mega-menu-column"> <h4>Abstract</h4> <a href="#">Geometric</a> <a href="#">Fluid</a> <a href="#">Patterned</a> </div> <div class="mega-menu-column"> <h4>Nature</h4> <a href="#">Mountains</a> <a href="#">Forests</a> <a href="#">Oceans</a> </div> <div class="mega-menu-column"> <h4>Urban</h4> <a href="#">Cityscapes</a> <a href="#">Streets</a> <a href="#">Architecture</a> </div> </div> </li> <li> <a href="#">Blog</a> <div class="mega-menu"> <div class="mega-menu-column"> <h4>Latest Posts</h4> <a href="#">Tech Updates</a> <a href="#">Design Trends</a> <a href="#">Development Tips</a> </div> <div class="mega-menu-column"> <h4>Popular Posts</h4> <a href="#">How-Tos</a> <a href="#">Tutorials</a> <a href="#">Case Studies</a> </div> <div class="mega-menu-column"> <h4>Categories</h4> <a href="#">Technology</a> <a href="#">Design</a> <a href="#">Development</a> </div> </div> </li> </ul> </div> </nav> </body> </html>