[SOLVED] mmenu position & direction attributes to slide in from right

mmenu position & direction attributes to slide in from right

I read another person's question asking how to make mmenu slide in from the right side of the screen instead of the left. They responded saying that they got it to work by doing the following, but it does not work in my instance - it still moves in from the left side of the screen, not the right like I want.

The mmenu related files are the latest from http://mmenu.frebsite.nl/, so I do not believe it's a version issue.

<!DOCTYPE html>
<html>
<head>
<title>mmenu test</title>
<script src="jquery-2.1.4.min.js"></script>
<link type="text/css" href="jquery.mmenu.all.css" rel="stylesheet" />
<script type="text/javascript" src="jquery.mmenu.min.all.js"></script>
<script>
    $(document).ready(function() {
        var API = $("#menu").mmenu({
            dragOpen: true,
            position:'right',
            direction:'right'
        }).data( "mmenu" );
        $("#menu-button").click(function() {
            API.open();
        });
    });
</script>
</head>
<body>
<div>
This is some body content
</div>
<button id="menu-button">open/close</button>

<nav id="menu">
<ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About us</a>
</ul>
</nav>
</body>
</html>

Solution

From this page of the plugin documentation, you need to include the "positioning" extension. I guess it is already included in your case, because you call the all.js and all.css files.

Then, use the following code :

$("#menu").mmenu({
   offCanvas: {
      position: "right"
   }
});