<div class="content">
<p class="info">
<!-- Ajax loaded content here -->
</div>
<script src="js/dummydata.js"></script>
<script>
(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 doesnt 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 = "<ul class="products">" + dummyData[itemName] + "<ul>";
}, 700);
}
})();
</script>
this is the code referenced by the html page
below is the code in JS
var dummyData = {
"":"<li class=\"product\"><div class=\"foodicon\"></div></li>",
"":"<li class=\"product\"><div class=\"foodicon\"></div></li>",
"":"../waibu.html", now I just want to " Test external content " the content of the definition value is to read the contents of the weibu.html file of the parent directory
because I have to keep writing li and other contents in the definition value such as short video