Meny

菜单

这是一个三维且空间效率高的菜单。Meny 在支持 CSS 3D 转换的浏览器中表现最佳，但对于旧版浏览器则会回退到 2D 动画。支持移动设备的触摸事件。 查看演示页面。

说明

1. 下载

将 meny.js 添加到您的项目中。meny.js 文件是唯一需要的文件，但如果您想获取默认样式，可以选择克隆仓库。 或者,您可以从 cdnjs 加载 meny.js 文件,请参阅 https://cdnjs.com/libraries/meny.>

2. 标记

Meny 要运行需要两个 HTML 元素: 菜单和页面 内容。库不使用类名,因此可以选择任何你想要的名称。

<body>
  

  

</body>

在标记和样式方面需要注意的一些规则、说明和最佳实践如下：

• 菜单和内容应具有相同的父元素。
• 当 Meny 打开时，在 内容 后面显示的背景并非由库添加。您需要将所需的背景设置为 父 元素。默认样式可在 demo.css 中找到。
• 当 Meny 关闭时显示的箭头也不是由库添加的，如果您需要它，可以轻松从 demo.css 中复制样式。
• 菜单容器将根据配置选项自动调整大小。
• Meny 在滚动页面上也能正常工作，因为菜单本身是固定的。

3. 初始化

接下来，您需要创建一个 Meny 实例，并告知它使用哪些 HTML 元素。这应该在将 meny.min.js 包含到您的页面之后完成。使用上面的 HTML 示例：