html5二级页面,html5响应式手机页面多级菜单点击切换特效

特效描述：html5 响应式手机页面 多级菜单 点击切换特效。html5多级菜单，一个响应式多层菜单的基本模板，适用于手机页面的多级菜单代码。

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

Fooganic

• Vegetables
• Fruits
• Grains
• Mylk & Drinks

• Stalk Vegetables
• Roots & Seeds
• Cabbages
• Salad Greens
• Mushrooms
• Sale %

• Fair Trade Roots
• Dried Veggies
• Our Brand
• Homemade

• Citrus Fruits
• Berries
• Special Selection
• Tropical Fruits
• Melons

• Exotic Mixes
• Wild Pick
• Vitamin Boosters

• Buckwheat
• Millet
• Quinoa
• Wild Rice
• Durum Wheat
• Promo Packs

• Starter Kit
• The Essential 8
• Bolivian Secrets
• Flour Packs

• Grain Mylks
• Seed Mylks
• Nut Mylks
• Nutri Drinks
• Selection

• Nut Mylk Packs
• Amino Acid Heaven
• Allergy Free

Please choose a category

(function() {

var menuEl = document.getElementById('ml-menu'),

mlmenu = new MLMenu(menuEl, {

// breadcrumbsCtrl : true, // show breadcrumbs

// initialBreadcrumb : 'all', // initial breadcrumb text

backCtrl : false, // show back button

// itemsDelayInterval : 60, // delay between each menu item sliding animation

onItemClick: loadDummyData // callback: item that doesn´t have a submenu gets clicked - onItemClick([event], [inner HTML of the clicked item])

});

// mobile menu toggle

var openMenuCtrl = document.querySelector('.action--open'),

closeMenuCtrl = document.querySelector('.action--close');

openMenuCtrl.addEventListener('click', openMenu);

closeMenuCtrl.addEventListener('click', closeMenu);

function openMenu() {

classie.add(menuEl, 'menu--open');

}

function closeMenu() {

classie.remove(menuEl, 'menu--open');

}

// simulate grid content loading

var gridWrapper = document.querySelector('.content');

function loadDummyData(ev, itemName) {

ev.preventDefault();

closeMenu();

gridWrapper.innerHTML = '';

classie.add(gridWrapper, 'content--loading');

setTimeout(function() {

classie.remove(gridWrapper, 'content--loading');

gridWrapper.innerHTML = '

• ' + dummyData[itemName] + '
  • ';

}, 700);

}

})();