I have a menu for the website written in HTML, and, rather than include all of it on each page individually (such that I would have to edit each page to change something), I'm including the HTML through the use of Angular (<div ng-include="menu.html"></div>).
I have some Javascript (external .js file) that I need to run on the included HTML in order to animate the navigation menu. If I actually include the HTML on the page, it works fine. It's only when I make the HTML external (through angular's ng-include) that it doesn't.
I think this may be an issue with it not being targeted correctly? I really don't know enough javascript to solve this myself.
I'm also using Pure CSS so that's what most of the classes are in the included HTML.
HTML Page:
<body ng-app="">
<div ng-include="header.html"></div>
*rest of the page*
</body>
Included HTML:
//Header for the page
<div id="topbar" class="pure-g">
<div class="pure-u-1-24 pure-u-sm-2-24 pure-u-md-4-24 pure-u-lg-1-5"> </div>
<div class="pure-u-22-24 pure-u-sm-20-24 pure-u-md-16-24 pure-u-lg-3-5">
<h1>Title</h1>
</div>
<div class="pure-u-1-24 pure-u-sm-2-24 pure-u-md-4-24 pure-u-lg-1-5"> </div>
</div>
//Navigation menu
<div id="menu" class="custom-wrapper pure-g">
//column 1
<div class="pure-u-1-24 pure-u-sm-2-24 pure-u-md-4-24 pure-u-lg-1-5"> </div>
//column 2
<div class="pure-u-22-24 pure-u-sm-20-24 pure-u-md-16-24 pure-u-lg-3-5 ">
//makes another row
<div class="pure-g">
//column 1
<div class="pure-u-1 pure-u-md-1-3" style="height: 2.1em">
<div class="pure-menu"> <a href="#" class="pure-menu-heading custom-brand" id="navTitle">Navigation</a> <a href="#" class="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a> </div>
</div>
//column 2
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu pure-menu-horizontal custom-can-transform">
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
</ul>
</div>
</div>
//column 3
<div class="pure-u-1 pure-u-md-1-3">
<div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Yahoo</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">W3C</a></li>
</ul>
</div>
</div>
</div>
</div>
//column 3
<div class="pure-u-1-24 pure-u-sm-2-24 pure-u-md-4-24 pure-u-lg-1-5"> </div>
</div>
Javascript:
function menuScript() {
(function (window, document) {
var menu = document.getElementById('menu')
, WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange' : 'resize';
function toggleHorizontal() {
[].forEach.call(document.getElementById('menu').querySelectorAll('.custom-can-transform'), function (el) {
el.classList.toggle('pure-menu-horizontal');
});
};
function toggleMenu() {
// set timeout so that the panel has a chance to roll up
// before the menu switches states
if (menu.classList.contains('open')) {
setTimeout(toggleHorizontal, 500);
}
else {
toggleHorizontal();
}
menu.classList.toggle('open');
document.getElementById('toggle').classList.toggle('x');
};
function closeMenu() {
if (menu.classList.contains('open')) {
toggleMenu();
}
};
document.getElementById('toggle').addEventListener('click', function (e) {
toggleMenu();
e.preventDefault();
});
window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
})(this, this.document);
};
