mmenu position & direction 属性从右边滑入
mmenu position & direction attributes to slide in from right
我看了另一个人的问题,询问如何让 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>
从 this page of the plugin documentation 开始,您需要包含 "positioning" 扩展名。我想它已经包含在你的案例中,因为你调用了 all.js
和 all.css
文件。
然后,使用以下代码:
$("#menu").mmenu({
offCanvas: {
position: "right"
}
});
<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>
我看了另一个人的问题,询问如何让 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>
从 this page of the plugin documentation 开始,您需要包含 "positioning" 扩展名。我想它已经包含在你的案例中,因为你调用了 all.js
和 all.css
文件。
然后,使用以下代码:
$("#menu").mmenu({
offCanvas: {
position: "right"
}
});
<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>