Menu JavaScript fixes
* Fixed the expansion of child menus, made them expand properly on page load, too * Removed resize/orientationchange event listener as a result of using a transitionend event to set the height to auto after the transition ends
This commit is contained in:
bovenliggende
5bc71cc7f6
commit
633fc593bc
@ -116,44 +116,41 @@ if (hljs) {
|
||||
|
||||
var parent = ev.target.parentNode.parentNode;
|
||||
var subNav = parent.querySelector('ul.Nav');
|
||||
console.log(parent);
|
||||
|
||||
if (ev.preventDefault !== undefined && parent.classList.contains('Nav__item--open')) {
|
||||
subNav.style.height = 0;
|
||||
// Temporarily set the height so the transition can work.
|
||||
subNav.style.height = subNav.scrollHeight + 'px';
|
||||
subNav.style.transitionDuration = Math.max(subNav.scrollHeight, 150) + 'ms';
|
||||
subNav.style.height = '0px';
|
||||
parent.classList.remove('Nav__item--open');
|
||||
} else {
|
||||
if (ev.preventDefault !== undefined) {
|
||||
subNav.style.transitionDuration = Math.max(subNav.scrollHeight, 150) + 'ms';
|
||||
// After the transition finishes set the height to auto so child
|
||||
// menus can expand properly.
|
||||
subNav.addEventListener('transitionend', _setHeightToAuto);
|
||||
subNav.style.height = subNav.scrollHeight + 'px';
|
||||
parent.classList.add('Nav__item--open');
|
||||
} else {
|
||||
// When running at page load the transitions don't need to fire and
|
||||
// the classList doesn't need to be altered.
|
||||
subNav.style.transitionDuration = '0ms';
|
||||
subNav.style.height = subNav.scrollHeight + 'px';
|
||||
subNav.style.transitionDuration = Math.max(subNav.scrollHeight, 150) + 'ms';
|
||||
subNav.style.height = 'auto';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Because font sizes change the height of the menus can change so they must
|
||||
// be recalculated if necessary when the viewport size changes.
|
||||
function _resize() {
|
||||
var subNav = document.querySelector('.Nav .Nav'),
|
||||
height, cur;
|
||||
for (var i = 0; i < subNav.length; i++) {
|
||||
cur = subNav[i];
|
||||
height = parseFloat(cur.style.height, 10);
|
||||
if (height > 0 && cur.scrollHeight !== height) {
|
||||
// Transitions don't need to fire when resizing the window.
|
||||
cur.style.transitionDuration = '0ms';
|
||||
cur.style.height = cur.scrollHeight + 'px';
|
||||
cur.style.transitionDuration = Math.max(cur.scrollHeight, 150) + 'ms';
|
||||
}
|
||||
function _setHeightToAuto(ev) {
|
||||
if (ev.target.style.height !== '0px') {
|
||||
ev.target.style.height = 'auto';
|
||||
}
|
||||
|
||||
ev.target.removeEventListener('transitionend', _setHeightToAuto);
|
||||
}
|
||||
|
||||
for (var i = 0, cur; i < navItems.length; i++) {
|
||||
// Go in reverse here because on page load the child nav items need to be
|
||||
// opened first before their parents so the height on the parents can be
|
||||
// calculated properly.
|
||||
for (var i = navItems.length - 1, cur; i >= 0; i--) {
|
||||
cur = navItems[i];
|
||||
cur.addEventListener('click', _toggleSubMenu);
|
||||
|
||||
@ -161,11 +158,6 @@ if (hljs) {
|
||||
_toggleSubMenu({ target: cur });
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('resize', debounce(_resize, 150));
|
||||
window.addEventListener('orientationchange', _resize);
|
||||
|
||||
|
||||
})();
|
||||
|
||||
(function() {
|
||||
|
Laden…
Verwijs in nieuw issue
Block a user