Menu improvements

* Menus are now expanded when javascript is disabled/not working.
* Menu for the current page now expands upon load.
This commit is contained in:
Dustin Wilson 2019-08-11 08:15:11 -05:00 gecommit door Stéphane Goetz
bovenliggende 47db2e4cba
commit 9d37044303
12 gewijzigde bestanden met toevoegingen van 45 en 23 verwijderingen

Bestand weergeven

@ -26,6 +26,9 @@
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- JS -->
<script>document.documentElement.classList.remove('no-js');</script>
<!-- Font -->
<?php foreach ($params['theme']['fonts'] as $font) {
echo "<link href='$font' rel='stylesheet' type='text/css'>";

Bestand-diff onderdrukt omdat een of meer regels te lang zijn

Bestand-diff onderdrukt omdat een of meer regels te lang zijn

Bestand-diff onderdrukt omdat een of meer regels te lang zijn

Bestand-diff onderdrukt omdat een of meer regels te lang zijn

Bestand-diff onderdrukt omdat een of meer regels te lang zijn

Bestand-diff onderdrukt omdat een of meer regels te lang zijn

Bestand-diff onderdrukt omdat een of meer regels te lang zijn

Bestand-diff onderdrukt omdat een of meer regels te lang zijn

Bestand weergeven

@ -107,21 +107,31 @@ if (hljs) {
};
};
var navItemsWithChildren = document.querySelectorAll('.Nav__item.has-children > a');
var navItems = document.querySelectorAll('.Nav__item.has-children > a');
function _toggleSubMenu(ev) {
ev.preventDefault();
if (ev.preventDefault !== undefined) {
ev.preventDefault();
}
var parent = ev.target.parentNode;
var subNav = parent.querySelector('ul.Nav');
if (parent.classList.contains('Nav__item--open')) {
if (ev.preventDefault !== undefined && parent.classList.contains('Nav__item--open')) {
subNav.style.height = 0;
parent.classList.remove('Nav__item--open');
} else {
subNav.style.transitionDuration = Math.max(subNav.scrollHeight * 1.5, 150) + 'ms';
subNav.style.height = subNav.scrollHeight + 'px';
parent.classList.add('Nav__item--open');
if (ev.preventDefault !== undefined) {
subNav.style.transitionDuration = Math.max(subNav.scrollHeight, 150) + 'ms';
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';
}
}
}
@ -134,21 +144,27 @@ if (hljs) {
cur = subNav[i];
height = parseFloat(cur.style.height, 10);
if (height > 0 && cur.scrollHeight !== height) {
// Disable the height transition, change it, and
// re-establish the transition that's in the stylesheet.
cur.style.transitionDuration = 0;
// 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';
}
}
}
for (var i = 0; i < navItemsWithChildren.length; i++) {
navItemsWithChildren[i].addEventListener('click', _toggleSubMenu);
for (var i = 0, cur; i < navItems.length; i++) {
cur = navItems[i];
cur.addEventListener('click', _toggleSubMenu);
if (cur.parentNode.classList.contains('Nav__item--open')) {
_toggleSubMenu({ target: cur });
}
}
window.addEventListener('resize', debounce(_resize, 150));
window.addEventListener('orientationchange', _resize);
})();
(function() {

Bestand weergeven

@ -199,11 +199,14 @@ Components
}
.Nav .Nav {
height: 0;
transition: height 400ms ease-in-out;
overflow: hidden;
margin-left: 15px;
html:not(.no-js) & {
height: 0;
transition: height 400ms ease-in-out;
overflow: hidden;
}
.Nav__item a {
margin: 0;
margin-left: -15px;

Bestand weergeven

@ -43,7 +43,7 @@ body {
@media (max-width: 768px) {
// mobile friendly sub-nav
.Collapsible__content {
html:not(.no-js) .Collapsible__content {
height: 0;
overflow: hidden;
transition: height 400ms ease-in-out;