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 à :
Parent
47db2e4cba
révision
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'>";
|
||||
|
2
themes/daux/css/theme-blue.min.css
externe
2
themes/daux/css/theme-blue.min.css
externe
Diff de fichier supprimé car une ou plusieurs lignes sont trop longues
Diff de fichier supprimé car une ou plusieurs lignes sont trop longues
2
themes/daux/css/theme-green.min.css
externe
2
themes/daux/css/theme-green.min.css
externe
Diff de fichier supprimé car une ou plusieurs lignes sont trop longues
Diff de fichier supprimé car une ou plusieurs lignes sont trop longues
2
themes/daux/css/theme-navy.min.css
externe
2
themes/daux/css/theme-navy.min.css
externe
Diff de fichier supprimé car une ou plusieurs lignes sont trop longues
Diff de fichier supprimé car une ou plusieurs lignes sont trop longues
2
themes/daux/css/theme-red.min.css
externe
2
themes/daux/css/theme-red.min.css
externe
Diff de fichier supprimé car une ou plusieurs lignes sont trop longues
Diff de fichier supprimé car une ou plusieurs lignes sont trop longues
@ -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;
|
||||
|
Chargement…
Référencer dans un nouveau ticket
Block a user