Menu improvements

* Menus are now expanded when javascript is disabled/not working.
* Menu for the current page now expands upon load.
Cette révision appartient à :
Dustin Wilson 2019-08-11 08:15:11 -05:00 révisé par Stéphane Goetz
Parent 47db2e4cba
révision 9d37044303
12 fichiers modifiés avec 45 ajouts et 23 suppressions

Voir le fichier

@ -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'>";

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Diff de fichier supprimé car une ou plusieurs lignes sont trop longues

Voir le fichier

@ -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() {

Voir le fichier

@ -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;

Voir le fichier

@ -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;