What is mmenu?
A super fun, versatile, nicely designed mobile menu jQuery plugin.
Pros
- Looks beautiful right out of the box
- Can do some things Webflow’s native widget can’t.
- My favorite are how nested navigation works - it’s much easier to work with longer navs with deep inside pages.
Cons
- Like any custom code, you can’t work with it in the Designer
- You have to host the plugin files yourself
- Requires purchase of a license for commercial or client use
- Tricky to implement
- You must manually duplicate your desktop navigation to be your moblie mmenu navigation
How to set it up
1. Purchase the appropriate license and download the plugin from http://mmenu.frebsite.nl/
2. Host the files you need and note the url to those files. I typically just use
- jquery.mmenu.all.min.js
- query.mmenu.all.css
3. Structure your page in Designer.
- The page needs to be wrapped in its own div, and the menu should be outside.
- The menu is an unordered list. For sub-menus, nest another unordered list inside an li after the parent page link.
- Wrap the unordered list in a div and change the tag to nav. Give the nav an id of my-menu
- Create a link somewhere on the page to open the menu. Create a text link or link block and give it an id of menu-button and link it to A Section on this Page > my-menu
- You need to create your desktop navigation manually and hide it when you want to show the mobile menu.
- There is no need to style your mmenu in the Designer since mmenu comes with a light and dark theme out of the box which looks very nice.
- This is also the time to hide your mobile nav on desktop. Set display to none on the nav element. Hide the button too, then set it back to show on wherever you want the mobile menu to be available.
4. Back to your custom code.
In the Head Code we must link to jQuery. In the Footer Code, we will link to our mmenu files and add the mmenu script.
Head Code - I use the google API for my jQuery link.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
Footer Code - first, link to your two mmenu files
<script src="link to the mmenu js file"></script>
<link href="link to the mmenu css file" />
Then add your mmenu script. There are SO many options you can use! Play around on the mmenu website and see what works for you. Here’s the script to have the menu slide in from the left, have submenus slide in from the left and animate, and dim the page. But really, play around with it!
<script>
$(document).ready(function() {
$("#my-menu").mmenu({
offCanvas: {
position : "left",
},
extensions: [
"pagedim-black",
"border-full",
"effect-menu-slide",
"effect-listitems-slide"
]
});
});
</script>
NOTES:
I know that Webflow already comes with jQuery, but I couldn’t get this to work without re-adding the jQuery link to the head.
This isn’t necessarily the most graceful implementation but hey - it worked for me. Very happy to hear if anyone has had better success.