首页>>导航菜单>>响应式PC端侧边栏多级菜单，移动端遮罩多级菜单(2020-05-18)

响应式PC端侧边栏多级菜单，移动端遮罩多级菜单

响应式PC端侧边栏多级菜单，移动端遮罩多级菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script>  
  2.     (function() {  
  3.         var menuEl = document.getElementById('ml-menu'),  
  4.             mlmenu = new MLMenu(menuEl, {  
  5.                 // breadcrumbsCtrl : true, // show breadcrumbs  
  6.                 // initialBreadcrumb : 'all', // initial breadcrumb text  
  7.                 backCtrl : false, // show back button  
  8.                 // itemsDelayInterval : 60, // delay between each menu item sliding animation  
  9.                 onItemClick: loadDummyData // callback: item that doesn´t have a submenu gets clicked - onItemClick([event], [inner HTML of the clicked item])  
  10.             });  
  11.   
  12.         // mobile menu toggle  
  13.         var openMenuCtrl = document.querySelector('.action--open'),  
  14.             closeMenuCtrl = document.querySelector('.action--close');  
  15.   
  16.         openMenuCtrl.addEventListener('click', openMenu);  
  17.         closeMenuCtrl.addEventListener('click', closeMenu);  
  18.   
  19.         function openMenu() {  
  20.             classie.add(menuEl, 'menu--open');  
  21.         }  
  22.   
  23.         function closeMenu() {  
  24.             classie.remove(menuEl, 'menu--open');  
  25.         }  
  26.   
  27.         // simulate grid content loading  
  28.         var gridWrapper = document.querySelector('.content');  
  29.   
  30.         function loadDummyData(ev, itemName) {  
  31.             ev.preventDefault();  
  32.   
  33.             closeMenu();  
  34.             gridWrapper.innerHTML = '';  
  35.             classie.add(gridWrapper, 'content--loading');  
  36.             setTimeout(function() {  
  37.                 classie.remove(gridWrapper, 'content--loading');  
  38.                 gridWrapper.innerHTML = '<ul class="products">' + dummyData[itemName] + '<ul>';  
  39.             }, 700);  
  40.         }  
  41.     })();  
  42.     </script>  

 


原文地址:http://www.freejs.net/article_daohangcaidan_862.html