开发前端软件素材源码教程下载网站

全部
网站模板
网页特效
网站源码
素材资源
建站学院
软件工具
mysql mysql 微信 微信 小程序 苹果 dedecms 修真图
当前位置：首页 > 网页特效 > 其他 >  Slick和类似应用程序 滑动菜单插件 jQuery Mmenu

Slick和类似应用程序 滑动菜单插件 jQuery Mmenu

  • 源码大小：211.08KB
  • 所需积分：1积分
  • 源码编号：19JP-3235
  • 浏览次数：835次
  • 最后更新：2023年05月21日
  • 所属栏目：其他
我要下载 浏览效果
加入收藏
本站默认解压密码：19jp.com 或 19jp_com

最新资源

[软件工具] 360压缩
[软件工具] 雷神网游加速器 免费体验
[软件工具] 360极速浏览器X 64位
[免扣元素] 541款水果无底图PNG素材高像素高清水果图片免扣素材水果坚果
[软件工具] 正则表达式生成工具 v2.1 绿色免费版
[软件工具] 取色软件Pipette v21.5.5 中文绿色版 取色器
[后台模板] 基于bootstrap后台管理模板
[后台模板] 紫色渐变OA系统后台模板
[公司企业] 数字科技企业机构HTML5模板
[公司企业] 房产物业公司Bootstrap模板

简介

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插件的最低版本。

安装：

  1. # NPM
  2. $ npm install jquery.mmenu
  3.  
  4. # Bower
  5. $ bower install jquery.mmenu

如何使用它:

1.在网页上包含Mmenu插件的JavaScript。

  1. <!-- v8 Vanilla JS Version -->
  2. <!-- polyfills are needed for Internet Explorer 10 and 11 -->
  3. <script src="mmenu.js"></script>
  4. <script src="mmenu.polyfills.js"></script>
  5. <!-- v7 jQuery Version -->
  6. <script src="jquery.min.js"></script>
  7. <script src="jquery.mmenu.js"></script>

2.在页面上包含所需的CSS文件。

  1. <!-- v8 Vanilla JS Version -->
  2. <link rel="stylesheet" href="mmenu.css" />
  3. <!-- v7 jQuery Version -->
  4. <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”。
  1. // v8 Vanilla JS Version
  2. document.addEventListener(
  3.   "DOMContentLoaded", () => {
  4.     new Mmenu( "nav#menu",{
  5.         extensions: ["border-full"]
  6.     });
  7.   }
  8. );
  9.  
  10. // v7 jQuery Version
  11. $(function() {
  12.   $('nav#menu').mmenu({
  13.     extensions: ["border-full"]
  14.   });
  15. });

4.为菜单创建一个导航列表。该插件支持使用嵌套HTML列表的多级导航菜单。

  1. <nav id="menu">
  2.   <ul>
  3.     <li><a href="#">Home</a></li>
  4.     <li><span>About us</span>
  5.       <ul>
  6.         <li><a href="#">History</a></li>
  7.         <li><span>The team</span>
  8.           <ul>
  9.             <li><a href="#">Management</a></li>
  10.             <li><a href="#">Sales</a></li>
  11.             <li><a href="#">Development</a></li>
  12.           </ul>
  13.         </li>
  14.         <li><a href="#">Our address</a></li>
  15.       </ul>
  16.     </li>
  17.     <li><a href="#">Contact</a></li>
  18.     <li class="Divider">Other demos</li>
  19.     <li><a href="#">Advanced demo</a></li>
  20.   </ul>
  21. </nav>

5.创建一个汉堡包按钮来切换菜单。

  1. <a href="#menu"><span></span></a>

6.将插件附加到导航列表以初始化mmenu。

  1. // v8 Vanilla JS Version
  2. document.addEventListener(
  3.   "DOMContentLoaded", () => {
  4.     new Mmenu( "nav#menu" );
  5.   }
  6. );
  7.  
  8. // v7 jQuery Version
  9. $(function() {
  10.   $('nav#menu').mmenu();
  11. });

7.自定义菜单的默认选项。

  1. new Mmenu( "nav#menu",{
  2.  
  3.       // A collection of extension names to enable for the menu.
  4.       extensions: [],
  5.  
  6.       // navbar options
  7.       navbar: {
  8.         add: true,
  9.         sticky: true,
  10.         title: "Menu",
  11.         titleLink: "parent"
  12.       },
  13.  
  14.       onClick: {
  15.         // whether or not the menu should close after clicking a link inside it.
  16.         close: false,
  17.         // prevent the default behavior for the clicked link
  18.         preventDefault: null,
  19.         // the clicked link should be visibly "selected".
  20.         setSelected   : true
  21.       },
  22.  
  23.       // the submenus comes sliding in from the right.
  24.       slidingSubmenus: true,
  25.  
  26.       // a collection of framework wrappers to enable for the menu.
  27.       wrappers: [],
  28.  
  29.       // off-canvas addon options
  30.       offCanvas: {
  31.         // Whether or not to block the user from using the page while the menu is opened.
  32.         // If set to "modal", clicking outside the menu does not close it.
  33.         blockUI: true,
  34.         // Whether or not the page should inherit the background of the body when the menu opens.
  35.         moveBackground: true
  36.       },
  37.  
  38.       // Screen reader addon options
  39.       screenReader: {
  40.         // Whether or not to automatically add and update the aria-hidden and aria-haspopup attributes.
  41.         aria: true ,
  42.         // Whether or not to add a "screen reader only" text for anchors that normally don't have text.
  43.         text: true
  44.       },
  45.  
  46.       // Scroll bug fix addon options
  47.       scrollBugFix: {
  48.         fix: true // fix the scroll bug on touchscreens
  49.       }
  50.  
  51. });

8.可以作为第三个参数传递给mmenu方法的可能配置。

  1. new Mmenu( "nav#menu",{
  2.     // options here
  3. },{
  4.     // CSS classes
  5.     classNames: {
  6.       divider: "Divider",
  7.       inset: "Inset",
  8.       panel: "Panel",
  9.       selected: "Selected",
  10.       spacer: "Spacer",
  11.       vertical: "Vertical"
  12.     },
  13.  
  14.     // supported languages: "de", "en", "fa", "nl", "ru"
  15.     language: 'en',
  16.  
  17.     // The number of milliseconds between opening/closing the menu and panels,
  18.     // needed to force CSS transitions.
  19.     openingInterval: 25,
  20.  
  21.     // jQuery selector containing the node-type of panels.
  22.     panelNodetype: 'ul, ol, div',
  23.  
  24.     // The number of milliseconds used in the CSS transitions.
  25.     transitionDuration: 400,
  26.  
  27.     // off-canvas addon configs
  28.     offCanvas: {
  29.       // Whether or not to clone the original menu
  30.       clone: false,
  31.       // Whether or not the page should inherit the background of the body when the menu opens.
  32.       menu: {
  33.         // how to insert the menu
  34.         // "prepend" or "append"
  35.         insertMethod: "prepend",
  36.         // where to insert the menu
  37.         insertSelector: "body"
  38.       },
  39.       page: {
  40.         // page node
  41.         nodetype: "div",
  42.         // default selector
  43.         selector: "body > ",
  44.         // array of query selectors to exclude from the page.
  45.         noSelector: []
  46.       },
  47.     },
  48.  
  49.     // Screen reader addon configs
  50.     screenReader: {
  51.       text: {
  52.         closeMenu: "Close menu",
  53.         closeSubmenu: "Close submenu",
  54.         openSubmenu: "Open submenu",
  55.         toggleSubmenu: "Toggle submenu"
  56.       }
  57.     }
  58.  
  59. });

9.API方法。

  1. // v8 Vanilla JS Version
  2. document.addEventListener(
  3.   "DOMContentLoaded", () => {
  4.     const myMenu = Mmenu( "nav#menu");
  5.     const api = myMenu.API;
  6.   }
  7. );
  8.  
  9. // v7 jQuery Version
  10. $(function() {
  11.   var $myMenu = $('nav#menu').mmenu();
  12.   var api = $myMenu.data( "mmenu" );
  13. });
  14.  
  15. // close all menus
  16. api.closeAllPanels();
  17.  
  18. // close a specific menu
  19. api.closePanel(Panel);
  20.  
  21. // initialize a new menu
  22. api.initPanel(Panel);
  23.  
  24. // select an item
  25. api.setSelected(listitem);

10.事件处理程序。

  1. // v8 Vanilla JS Version
  2. document.addEventListener(
  3.   "DOMContentLoaded", () => {
  4.     new Mmenu( "nav#menu",{
  5.         hooks: {
  6.  
  7.           "closeAllPanels:before": ( panel ) => {
  8.             // do something
  9.           },
  10.           "closeAllPanels:after": ( panel ) => {
  11.             // do something
  12.           },
  13.           "closePanel:before": ( panel ) => {
  14.             // do something
  15.           },
  16.           "closePanel": ( panel ) => {
  17.             // do something
  18.           },
  19.           "closePanel:after": ( panel ) => {
  20.             // do something
  21.           },
  22.           "openPanel:before": ( panel ) => {
  23.             // do something
  24.           },
  25.           "openPanel:start": ( panel ) => {
  26.             // do something
  27.           },
  28.           "openPanel:finish": ( panel ) => {
  29.             // do something
  30.           },
  31.           "openPanel:after": ( panel ) => {
  32.             // do something
  33.           },
  34.           "setSelected:before": ( panel ) => {
  35.             // do something
  36.           },
  37.           "setSelected:after": ( panel ) => {
  38.             // do something
  39.           },
  40.  
  41.         }
  42.     });
  43.   }
  44. );
  45.  
  46. // v7 jQuery Version
  47. $(function() {
  48.   var $myMenu = $('nav#menu').mmenu();
  49.   var api = $myMenu.data( "mmenu" );
  50.   api.on(EVENTNAME,
  51.     ( panel ) => {
  52.       // do something
  53.     });
  54.   )
  55. });

替代插件：

  • 类似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。
  • 风格更多地继承了网站风格。

预览截图

相关热词： 滑动应用程序类似SlickjQuery菜单插件Mmenu
上一篇：用户友好 谷歌字体选择器在jQuery 谷歌字体选择器.js
下一篇：暗模式切换按钮插件 Bootstrap bs暗模式

网站首页 | 关于我们 | 免责声明 | 网站建设 | 在线工具 | 网站地图

版权声明：本站发布的资源部分自互联网，所有资源版权归原作者所有。如果有侵犯到您的权益，请联系本站删除，谢谢合作！

Copyright 2018-2025 ©19jp.com All Rights Reserved. 陕ICP备16002142号-1