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:
parent
47db2e4cba
commit
9d37044303
|
@ -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'>";
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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() {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue