Here’s a quick explanation of what the different parameters are doing:
containment: [-3000, 0, 300, 0], axis:’x’
These allow you to define how far users can drag the menu and along which axis it’s draggable. With this configuration, visitors can drag the menu left and right (the ‘x’ axis) between the bounds that you’ve set (e.g. -3000 and 300).
Here’s exactly what each number means:
[containment.left, containment.top, containment.right, containment.bottom]
Axis x= horizontal
If you want, you can edit the numbers to match your unique situation. Or, you could even get creative and change the axis to ‘y’ if you want to create a vertical draggable menu.
And that’s it! Save your page and preview it in your browser to see the effect in action.