mmenu position&方向属性从右侧滑入

时间:2015-12-28 18:55:30

标签: javascript jquery html css mmenu

我读了另一个人的问题,询问如何从屏幕右侧而不是左侧滑入mmenu。他们回应说他们通过执行以下操作让它工作,但它在我的实例中不起作用 - 它仍然从屏幕的左侧移动,而不是像我想要的那样。

mmenu相关文件是http://mmenu.frebsite.nl/中的最新文件,所以我不认为这是版本问题。

<!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>

2 个答案:

答案 0 :(得分:2)

this page of the plugin documentation开始,您需要包含“定位”扩展程序。我想它已包含在您的案例中,因为您调用all.jsall.css文件。

然后,使用以下代码:

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

答案 1 :(得分:0)

<head>
 <script src="path/to/jquery.js"></script>
 <script src="path/to/jquery.mmenu.js"></script>
 <link href="path/to/jquery.mmenu.css" rel="stylesheet" />
 <link href="path/to/jquery.mmenu.positioning.css" rel="stylesheet" />
 <script>
   $(document).ready(function() {
      $("#my-menu").mmenu({
         extensions: ["position-right"]
      });
   });
</script>