The only Megamenu jQuery plugin + Bootstrap4 you ever want.
Updated: November 21, 2019
This MegamenuJS is inspired by the (https://github.com/marioloncarek/megamenu-js) from @marioloncarek.
- Bootstrap4 support
- Cross-browser compatibility
- Smart - knows when to show megamenu, and when to show a normal dropdown
- 100% responsive, works on all devices
- Seamless wordpress integration
- Super fast
- Uses jquery animations (IE8 compatible)
- Easy to use
- Uses ionicons
- Super small
- Free to use and abuse (MIT licence)
Download and open index.html or:
Live demo on Codepen: megamenu.js demo
- This version uses Bootstrap4 CSS for the Demo index.html, so include the stylesheet from CDN:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
1.1) Copy CSS from style.css or style.less
1.2) megamenu.js uses ionicons for icons, so include stylesheet in your project:
<link rel="stylesheet" href="css/ionicons.min.css">
- Include jquery just before closing body tag
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
- Include megamenu.js below jquery
<script src="js/megamenu.js"></script>
- Wrap your menus HTML in megamenu.js wrappers and see the magic :)
<div class="menu-container">
<div class="menu">
<ul>
<li><a>Link</a></li>
<li>
<a>Mega Link</a>
<div class="mega-menu"><!-- Whatever, basic html menu(lists)! Dont worry megamenu.js will know --></div>
</li>
</ul>
</div>
</div>
This version uses Bootstrap4 to build HTML content inside the Mega-menu HTML containers.
Use the custom HTML5 Walker to build the structure of your Wordpress menu that matches the Megamenu-JS example above:
1) In your functions.php add these lines (taken from HTML5blank by @toddmotto)
That customizes the menu from everything Wordpress has added and from this point the menu is like you are doing a static version.
2) Then simply wrap the wordpress menu with megamenu.js wrappers!
<div class="menu-container">
<div class="menu">
<?php wp_nav_menu(); ?>
</div>
</div>