最新资源
简介
Mmenu是一个简单而强大的JavaScript/jQuery插件，用于为您的移动网站创建响应迅速、可访问、模块化、灵活、移动友好和类似应用程序的滑动菜单，所有这些都具有无限数量的子菜单。
它支持垂直或水平滑动子菜单和固定标题。
根据CC-BY-NC-4.0许可证进行许可。兼容Bootstrap 4和Bootstrap 3。
该插件还附带了Light（紧凑型）版本，您可以在此处查看mmenu Light插件。
重要提示：
最新的Mmenu（8.0+）已经删除了jQuery依赖项。
对于jQuery用户，请在此处下载Mmenu 7.x。
查看更多信息：
- 前50个画布外导航jQuery插件
参见：
- jQuery mhead：一个漂亮的移动导航标题，伴随着你网站和网络应用程序上的jQuery.menu导航菜单。
- Mmenu Light：Mmenu插件的最低版本。
安装：
# NPM $ npm install jquery.mmenu # Bower $ bower install jquery.mmenu
如何使用它:
1.在网页上包含Mmenu插件的JavaScript。
<!-- v8 Vanilla JS Version --> <!-- polyfills are needed for Internet Explorer 10 and 11 --> <script src="mmenu.js"></script> <script src="mmenu.polyfills.js"></script> <!-- v7 jQuery Version --> <script src="jquery.min.js"></script> <script src="jquery.mmenu.js"></script>
2.在页面上包含所需的CSS文件。
<!-- v8 Vanilla JS Version --> <link rel="stylesheet" href="mmenu.css" /> <!-- v7 jQuery Version --> <link rel="stylesheet" href="jquery.mmenu.css" />
3.在页面上包含您选择的扩展。所有可能的CSS扩展：
- 注释.borderstyle.css：在菜单中添加缩进边框。可用样式：“border-full”和“border-none”。
- 注释.effects.css：应用将附加效果应用到菜单。可用样式：“fx菜单幻灯片”、“fx面板无”、“fx-panels-slide-0”、“fx-panels-slide-100”。
- 注释.全屏.css：启用全屏菜单。
- 注释.listview.css：使菜单项垂直对齐。可用样式：“列表视图对齐”。
- 注释.多行.css：将菜单项截断为一行。
- 注释.pagedim.css：把页面调暗。可用样式：“pagedim”、“pagedimwhite”、“page dim black”。
- 注释.popup.css：以弹出方式打开菜单。
- 注释.positioning.css：重新定位菜单。可用样式：“位置右侧”、“位置顶部”、“定位底部”、“放置前部”。
- mmenu.shadows.css:在菜单中添加阴影效果。可用样式：“影子菜单”、“影子页面”、“阴影面板”。
- 注释.themes.css：其他主题。可用主题：“主题浅色”、“主题深色”、“黑色主题”、“白色主题”。
- 注释.文件视图.css：启用平铺视图布局。可用样式：“mm tileview xs”、“mm tilreview-s”、“mm-tileview-l”、“毫米tileview xl”。
// v8 Vanilla JS Version
document.addEventListener(
"DOMContentLoaded", () => {
new Mmenu( "nav#menu",{
extensions: ["border-full"]
});
}
);
// v7 jQuery Version
$(function() {
$('nav#menu').mmenu({
extensions: ["border-full"]
});
});4.为菜单创建一个导航列表。该插件支持使用嵌套HTML列表的多级导航菜单。
<nav id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><span>About us</span>
<ul>
<li><a href="#">History</a></li>
<li><span>The team</span>
<ul>
<li><a href="#">Management</a></li>
<li><a href="#">Sales</a></li>
<li><a href="#">Development</a></li>
</ul>
</li>
<li><a href="#">Our address</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li class="Divider">Other demos</li>
<li><a href="#">Advanced demo</a></li>
</ul>
</nav>5.创建一个汉堡包按钮来切换菜单。
<a href="#menu"><span></span></a>
6.将插件附加到导航列表以初始化mmenu。
// v8 Vanilla JS Version
document.addEventListener(
"DOMContentLoaded", () => {
new Mmenu( "nav#menu" );
}
);
// v7 jQuery Version
$(function() {
$('nav#menu').mmenu();
});
7.自定义菜单的默认选项。
new Mmenu( "nav#menu",{
// A collection of extension names to enable for the menu.
extensions: [],
// navbar options
navbar: {
add: true,
sticky: true,
title: "Menu",
titleLink: "parent"
},
onClick: {
// whether or not the menu should close after clicking a link inside it.
close: false,
// prevent the default behavior for the clicked link
preventDefault: null,
// the clicked link should be visibly "selected".
setSelected : true
},
// the submenus comes sliding in from the right.
slidingSubmenus: true,
// a collection of framework wrappers to enable for the menu.
wrappers: [],
// off-canvas addon options
offCanvas: {
// Whether or not to block the user from using the page while the menu is opened.
// If set to "modal", clicking outside the menu does not close it.
blockUI: true,
// Whether or not the page should inherit the background of the body when the menu opens.
moveBackground: true
},
// Screen reader addon options
screenReader: {
// Whether or not to automatically add and update the aria-hidden and aria-haspopup attributes.
aria: true ,
// Whether or not to add a "screen reader only" text for anchors that normally don't have text.
text: true
},
// Scroll bug fix addon options
scrollBugFix: {
fix: true // fix the scroll bug on touchscreens
}
});8.可以作为第三个参数传递给mmenu方法的可能配置。
new Mmenu( "nav#menu",{
// options here
},{
// CSS classes
classNames: {
divider: "Divider",
inset: "Inset",
panel: "Panel",
selected: "Selected",
spacer: "Spacer",
vertical: "Vertical"
},
// supported languages: "de", "en", "fa", "nl", "ru"
language: 'en',
// The number of milliseconds between opening/closing the menu and panels,
// needed to force CSS transitions.
openingInterval: 25,
// jQuery selector containing the node-type of panels.
panelNodetype: 'ul, ol, div',
// The number of milliseconds used in the CSS transitions.
transitionDuration: 400,
// off-canvas addon configs
offCanvas: {
// Whether or not to clone the original menu
clone: false,
// Whether or not the page should inherit the background of the body when the menu opens.
menu: {
// how to insert the menu
// "prepend" or "append"
insertMethod: "prepend",
// where to insert the menu
insertSelector: "body"
},
page: {
// page node
nodetype: "div",
// default selector
selector: "body > ",
// array of query selectors to exclude from the page.
noSelector: []
},
},
// Screen reader addon configs
screenReader: {
text: {
closeMenu: "Close menu",
closeSubmenu: "Close submenu",
openSubmenu: "Open submenu",
toggleSubmenu: "Toggle submenu"
}
}
});9.API方法。
// v8 Vanilla JS Version
document.addEventListener(
"DOMContentLoaded", () => {
const myMenu = Mmenu( "nav#menu");
const api = myMenu.API;
}
);
// v7 jQuery Version
$(function() {
var $myMenu = $('nav#menu').mmenu();
var api = $myMenu.data( "mmenu" );
});
// close all menus
api.closeAllPanels();
// close a specific menu
api.closePanel(Panel);
// initialize a new menu
api.initPanel(Panel);
// select an item
api.setSelected(listitem);
10.事件处理程序。
// v8 Vanilla JS Version
document.addEventListener(
"DOMContentLoaded", () => {
new Mmenu( "nav#menu",{
hooks: {
"closeAllPanels:before": ( panel ) => {
// do something
},
"closeAllPanels:after": ( panel ) => {
// do something
},
"closePanel:before": ( panel ) => {
// do something
},
"closePanel": ( panel ) => {
// do something
},
"closePanel:after": ( panel ) => {
// do something
},
"openPanel:before": ( panel ) => {
// do something
},
"openPanel:start": ( panel ) => {
// do something
},
"openPanel:finish": ( panel ) => {
// do something
},
"openPanel:after": ( panel ) => {
// do something
},
"setSelected:before": ( panel ) => {
// do something
},
"setSelected:after": ( panel ) => {
// do something
},
}
});
}
);
// v7 jQuery Version
$(function() {
var $myMenu = $('nav#menu').mmenu();
var api = $myMenu.data( "mmenu" );
api.on(EVENTNAME,
( panel ) => {
// do something
});
)
});
替代插件：
- 类似YouTube的左侧下拉菜单效果
- JS库用于Facebook风格的侧面板菜单-Snap.JS
- jQuery简单滑出和抽屉效果插件
- 具有滑动和推动效果的酷炫动画侧菜单
- 简单且支持触摸的响应式导航菜单插件
- 用于响应式侧菜单的jQuery插件-sidr
- 三维和节省空间的菜单-Meny
- 面板样式导航菜单插件-jPanelMenu
- 用于响应式页面幻灯片菜单的jQuery插件-页面幻灯片
更新日志：
版本9.3.0（2023-01-07）
- 更新的程序包
版本9.2.3（2022-12-24）
- 后退按钮固定
版本9.2.2（2022-11-21）
- 添加了乌克兰语翻译
版本9.2.1（2022-11-14）
- 使现代化
版本9.2.0（2022-08-19）
- 开始使用惰性属性以获得更好的可访问性（并减少逻辑以获得相同的结果）。
- 删除了选项sidbar.collapsed.blockMenu，以支持使用惰性属性。
- 删除了选项iconpanels.blockPanel以支持使用惰性属性。
- 将主题逻辑从画布外的附加组件移动到其自己的附加组件。
- 添加了searchfield.search选项。
- 向API添加了主题方法。
- 修复了一个打开垂直子菜单的错误。
- 修正了在垂直子菜单中计数列表项的错误。
- 修复了一个在不同位置有多个菜单的错误。
版本9.1.6（2022-04-06）
- 滚动定位
版本9.1.5（2022-04-05）
- 搜索修复程序
版本9.1.2/3/4（2022-04-03）
- 焦点修复，范围较短的变量
版本9.1.1（2022-03-24）
- 错误修复
版本9.1.0（2022-03-05）
- 将定位扩展名移动到offCanvas.position选项。
- 已将主题扩展移到主题选项。
- 已删除全屏扩展。
- 为每个主题添加了高对比度版本。
版本9.0.4（2022-02-01）
- 画布外修复
版本9.0.3（2022-01-28）
- 修复了为克隆菜单创建唯一id的错误
v9.0.0/1 (2021-11-25)
- 改进了键盘导航，也不再是单独的附加组件。
- 改进了对屏幕阅读器的支持，也不再是单独的附加组件。
- 改进了打开和关闭面板的逻辑。
- 打开和关闭菜单和面板现在可以在没有超时的情况下工作。
- 已放弃对IE11的支持。
- 改进了现代浏览器的CSS。
- 更新了Typescript和SASS。
- 修饰语的B.E.M.符号转换。
- 删除了jQuery插件。
- 小的改进和错误修复。
- 删除了导航条的粘性选项，默认情况下导航条现在是粘性的。
- 已从API中删除initListview、initPanel和closeAllPanels方法。
- ：before API钩子现在只在方法实际执行某些操作时调用。
- 从API中删除了openPanel:start、openPanel:finish、open:start，open:finish，close:start和close:finish，initAnchors:before和initAnchors：after挂钩。
- 删除了大多数SCSS变量，转而使用CSS变量。剩余的SCSS变量将从文档中删除。
- 删除了顶部偏移-毫米、左侧偏移-毫米和右侧偏移-毫米的CSS变量。
- 改进了searchfield插件。
- 将分隔符、键盘导航和切换附加组件移动到核心。
- 从offcanvas插件中删除了moveBackground和blockUi选项。
- 侧边栏插件的扩展初始选项不再支持值“记住”。
- 删除了autoheight、columns、dividers、drag、dropdown、fixdelements和lazysubmenus加载项，因为它们要么过时，要么超出范围，要么太不兼容。
- 删除了borderstyle、effect、listview、multiline、pagedim、popup和shadows扩展，因为它们要么过时了，要么超出了范围，要么很容易使用自定义CSS进行复制。
- 删除了所有包装。
v8.5.24 (2021-06-22)
- 错误修复
v8.5.23 (2021-05-07)
- 修复可访问性问题
v8.5.22 (2021-03-22)
- 使现代化
v8.5.21 (2021-01-18)
- 使现代化
版本8.5.20（2020-11-15）
- 使现代化
第8.5.19版（2020-10-16）
- 使现代化
第8.5.18版（2020-10-04）
- 修复了缺失的polyfill
第8.5.17版（2020-09-22）
- 修复了滚动错误
第8.5.16版（2020-09-02）
- 已更新
第8.5.15版（2020-08-20）
- Bugfixed（错误修复）
第8.5.14版（2020-07-10）
- Bugfixed（错误修复）
第8.5.12版（2020-06-01）
- 修复了缺失的polyfill
第8.5.11版（2020-05-25）
- 错误修复
第8.5.10版（2020-05-20）
- 图标栏固定
第8.5.9版（2020-05-14）
- 已更新
第8.5.8版（2020-05-13）
- 垂直子菜单的滚动错误修复
第8.5.5版（2020-04-26）
- 图标栏+滚动错误修复改进
第8.5.4版（2020-04-17）
- lazysubmenus修复
第8.5.3版（2020-03-22）
- 固定搜索字段
第8.5.2版（2020-03-17）
- 删除了tileview遗留代码
第8.5.1版（2020-03-12）
- 删除了tileview遗留代码
第8.5.0版（2020-02-28）
- 已删除Tileview扩展。
- 删除了导航栏插件的下一个内容。
- 修正了导航栏插件标题内容中的错误。
- 小的改进和错误修复。
第8.4.7版（2020-02-13）
- 固定的聚乙烯填充物。
第8.4.6版（2020-01-08）
- 固定用于IE 10/11。
第8.4.5版（2019-12-30）
- 拖动加载项错误修复
第8.4.4版（2019-12-22）
- 修复未定义的面板
第8.4.3版（2019-11-25）
- 更好的标题修复
第8.4.2版（2019-11-24）
- 固定详题
第8.4.1版（2019-10-25）
- 已更新
第8.3.0版（2019-09-06）
- 添加了navbar.sticky选项。
- 导航栏和导航栏插件的简化CSS。
- 修正了导航栏中的填充错误。
- 修复了组合位置右侧和全屏扩展的错误。
- pageScroll插件中的错误修复。
- dropDown插件中的错误修复。
- 修复了列表视图扩展中的错误。
- 已将SCSS变量$mm_btnSize更改为50px。
- 已将SCSS变量$mm_listitemSize更改为44px。
- 已将SCSS变量$mm_navbarSize更改为$mm_listitemSize。
- 添加了SCSS变量$mm_include_navbars_searchfield。
- 添加了polyfills.js文件以支持IE11。
- 为支持IE11添加了CSS变量的回退。
- 更新了拖拽插件并删除了对Hammer.js的依赖。
- 删除了对部分使用borderStyle扩展名的支持。
- 已从borderStyle扩展插件中删除边框偏移。
- 删除了对部分使用列表视图扩展的支持。
- 删除了对在效果扩展中部分使用面板slide-0和面板slide-100效果的支持。
- 从效果扩展中删除了菜单淡入淡出、菜单缩放、面板缩放、面板向上滑动和面板向右滑动的效果。
- 已从效果扩展中删除所有列表项效果。
- 从分隔器附加组件中删除了灯选项。
- 删除了对为导航栏.title选项指定函数的支持。
第8.2.3版（2019-08-12）
- 错误修复垂直子菜单
v8.2.2（2019年7月19日）
- 已更新
第8.2.1版（2019-07-13）
- 已更新
第8.1.1版（2019-06-04）
- 将克隆配置选项移动到offCanvas附加组件。
- searchfield插件中的错误修复。
- 使导航条的内容和类型可在导航条附加组件中扩展。
版本8.0.8（2019-05-25）
- 错误修复计数器加载项
版本8.0.7（2019-05-22）
- 错误修复垂直子菜单
版本8.0.6（2019-05-05）
- wordpress包装错误修复
版本8.0.5（2019-05-02）
- 自定义生成错误修复
版本8.0.4（2019年4月19日）
- 克隆错误修复
版本8.0.3（2019-04-16）
- 错误修复
第7.3.3版（2019-03-14）
- 小错误修复
第7.3.2版（2019-02-21）
- 错误修复
v7.3.1（2019年2月19日）
- 错误修复
7.3版（2019-02-14）
- 使现代化
第7.2.3版（2019-02-03）
- 添加了颜色的CSS变量。
- 增加了上/右/下/左偏移量的SCSS和CSS变量。
- 将阴影菜单添加到阴影扩展中。
- 错误修复程序
第7.2.2版（2018-11-09）
- 错误修复
v7.2.0（2018年9月23日）
- 添加了颜色的CSS变量。
- 增加了上/右/下/左偏移量的SCSS和CSS变量。
- 将阴影菜单添加到阴影扩展中。
- 错误修复程序
v7.1.0（2018年9月14日）
- 将RTL支持从单独的加载项移动到核心、扩展和加载项文件中。
- 已删除RTL附加组件
- 添加了语言配置选项。
- 增加了俄语翻译。
- 更改了offCanvas附加组件的配置。
- 将一些带有CSS变量的SCSS变量替换为带有SCSS变量的CSS变量作为后备。
- SCSS变量的变化。
- 在下拉加载项中添加了fitViewport选项。
- 删除了一些核心的$mm_opt_SCSS变量。
- 更新了screenReader附加组件，将文本添加到页面阻止程序中。
- 改进了键盘导航插件。
- 错误修复。
v7.0.6（2018年07月06日）
- bootstrap 3包装修复程序
v7.0.5 (2018-06-15)
- 错误修复
版本7.0.4（2018-06-13）
- 拖动位置右固定
v7.0.3（2018年2月10日）
- 拖动位置右固定
v7.0.1（2018年01月06日）
- 错误修复列表视图扩展
v7.0.0（2018年01月06日）
- 添加了图标栏插件。
- 用侧边栏插件替换了图标栏和宽屏扩展。
- 为导航条插件添加了类似标签的样式。
- 使用新选项更新了iconPanels附加组件。
- 使用now选项更新了backButton附加组件。
- 使用新选项更新了searchfield插件。
- 删除了initPanels和initMenu选项，取而代之的是hooks选项。
- 为CSS框架实现了一个（某种）B.E.M.结构。
- 在分隔器插件中添加了类型选项。
- 改进的matchMedia可提供响应式扩展和选项。
- 完全从offCanvas附加组件中提取定位扩展插件。
- 选项navbar.title现在可以成为一个函数。
- 删除了分隔符。折叠选项有利于使用垂直子菜单。
- 删除了offCanvas.zposition:“next”选项。
- 将分隔符和分隔符css从列表视图扩展移到了核心。
- 按扩展名和插件拆分SCSS变量和mixin。
- 添加了SCSS变量以选择退出几乎所有的CSS。
- 风格更多地继承了网站风格。
预览截图
Slick和类似应用程序 滑动菜单插件 jQuery Mmenu