Menu improvements

* Menus are now expanded when javascript is disabled/not working.
* Menu for the current page now expands upon load.

templates/layout/00_layout.php

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

themes/daux/js/daux.js

@@ -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';
+            if (ev.preventDefault !== undefined) {
-            subNav.style.height = subNav.scrollHeight + 'px';
+                subNav.style.transitionDuration = Math.max(subNav.scrollHeight, 150) + 'ms';
-            parent.classList.add('Nav__item--open');
+                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
+                // Transitions don't need to fire when resizing the window.
-                // re-establish the transition that's in the stylesheet.
+                cur.style.transitionDuration = '0ms';
-                cur.style.transitionDuration = 0;
                 cur.style.height = cur.scrollHeight + 'px';
                 cur.style.transitionDuration = Math.max(cur.scrollHeight, 150) + 'ms';
             }
         }
     }
 
-    for (var i = 0; i < navItemsWithChildren.length; i++) {
+    for (var i = 0, cur; i < navItems.length; i++) {
-        navItemsWithChildren[i].addEventListener('click', _toggleSubMenu);
+        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() {

themes/daux/scss/_components.scss

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

themes/daux/scss/_structure.scss

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