[design] animate menu sub nav

src/css/menu.css

@@ -165,7 +165,6 @@
   .menu-nav .menu-nav-tab {
     padding-left: calc(var(--menu-space) * 2);
     padding-right: calc(var(--menu-space) * 2);
-    height: 3.5em;
     justify-content: flex-start;
   }
 
@@ -174,6 +173,13 @@
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
+    overflow: hidden;
+    height: 0;
+    transition: height var(--layout-timing-fast);
+  }
+
+  .menu-nav-body.active {
+    height: var(--menu-nav-body-height);
   }
 
   .is-edge .menu-nav-body {
@@ -214,6 +220,7 @@
     padding-left: calc(var(--menu-space) * 5);
     border-radius: 0;
     height: 3em;
+    min-height: 3em;
     width: 100%;
     line-height: 1;
     justify-content: flex-start;
@@ -246,6 +253,5 @@
   .menu {
     width: 60vw;
     max-width: 60em;
-    max-height: 60em;
   }
 }

src/html/menu/menu-nav.html

@@ -1,7 +1,7 @@
 <div class="menu-nav">
   <div class="menu-nav-item">
     <button class="control-menu-layout menu-nav-tab button active" tabindex="-1">Layout</button>
-    <div class="menu-nav-body menu-nav-body-layout">
+    <div class="menu-nav-body menu-nav-body-layout active">
       <a href="#menu-content-layout-scaling" class="menu-nav-sub button button-small" tabindex="-1">Global scaling</a>
       <a href="#menu-content-layout-area" class="menu-nav-sub button button-small" tabindex="-1">Area</a>
       <a href="#menu-content-layout-order" class="menu-nav-sub button button-small" tabindex="-1">Area order</a>
@@ -12,7 +12,7 @@
   </div>
   <div class="menu-nav-item">
     <button class="control-menu-header menu-nav-tab button" tabindex="-1">Header</button>
-    <div class="menu-nav-body menu-nav-body-header is-hidden">
+    <div class="menu-nav-body menu-nav-body-header active">
       <a href="#menu-content-header-area" class="menu-nav-sub button button-small" tabindex="-1">Area</a>
       <a href="#menu-content-header-greeting" class="menu-nav-sub button button-small" tabindex="-1">Greeting</a>
       <a href="#menu-content-header-transitional" class="menu-nav-sub button button-small" tabindex="-1">Transitional words</a>
@@ -29,7 +29,7 @@
   </div>
   <div class="menu-nav-item">
     <button class="control-menu-groups menu-nav-tab button" tabindex="-1">Groups</button>
-    <div class="menu-nav-body menu-nav-body-groups is-hidden">
+    <div class="menu-nav-body menu-nav-body-groups active">
       <a href="#menu-content-groups-names" class="menu-nav-sub button button-small" tabindex="-1">Names</a>
       <a href="#menu-content-groups-order" class="menu-nav-sub button button-small" tabindex="-1">Order</a>
       <a href="#menu-content-groups-border" class="menu-nav-sub button button-small" tabindex="-1">Border</a>
@@ -37,7 +37,7 @@
   </div>
   <div class="menu-nav-item">
     <button class="control-menu-bookmarks menu-nav-tab button" tabindex="-1">Bookmarks</button>
-    <div class="menu-nav-body menu-nav-body-bookmarks is-hidden">
+    <div class="menu-nav-body menu-nav-body-bookmarks active">
       <a href="#menu-content-bookmarks-area" class="menu-nav-sub button button-small" tabindex="-1">Area</a>
       <a href="#menu-content-bookmarks-bookmarks" class="menu-nav-sub button button-small" tabindex="-1">Bookmarks</a>
       <a href="#menu-content-bookmarks-color" class="menu-nav-sub button button-small" tabindex="-1">Background colour</a>
@@ -50,7 +50,7 @@
   </div>
   <div class="menu-nav-item">
     <button class="control-menu-theme menu-nav-tab button" tabindex="-1">Theme</button>
-    <div class="menu-nav-body menu-nav-body-theme is-hidden">
+    <div class="menu-nav-body menu-nav-body-theme active">
       <a href="#menu-content-theme-preset" class="menu-nav-sub button button-small" tabindex="-1">Preset</a>
       <a href="#menu-content-theme-saved" class="menu-nav-sub button button-small" tabindex="-1">Saved</a>
       <a href="#menu-content-theme-style" class="menu-nav-sub button button-small" tabindex="-1">Style</a>
@@ -64,14 +64,14 @@
   </div>
   <div class="menu-nav-item">
     <button class="control-menu-background menu-nav-tab button" tabindex="-1">Background</button>
-    <div class="menu-nav-body menu-nav-body-background is-hidden">
+    <div class="menu-nav-body menu-nav-body-background active">
       <a href="#menu-content-background-color" class="menu-nav-sub button button-small" tabindex="-1">Colour</a>
       <a href="#menu-content-background-image" class="menu-nav-sub button button-small" tabindex="-1">Image</a>
     </div>
   </div>
   <div class="menu-nav-item">
     <button class="control-menu-data menu-nav-tab button" tabindex="-1">Data</button>
-    <div class="menu-nav-body menu-nav-body-data is-hidden">
+    <div class="menu-nav-body menu-nav-body-data active">
       <a href="#menu-content-data-restore" class="menu-nav-sub button button-small" tabindex="-1">Restore</a>
       <a href="#menu-content-data-backup" class="menu-nav-sub button button-small" tabindex="-1">Backup</a>
       <a href="#menu-content-data-clear" class="menu-nav-sub button button-small" tabindex="-1">Clear</a>

src/js/menu.js

@@ -37,34 +37,48 @@ var menu = (function() {
 
   render.nav = function(name) {
     var allMenuNavTab = helper.eA(".menu-nav-tab");
-    var allMenuNavBody = helper.eA(".menu-nav-body");
     var allMenuContentArea = helper.eA(".menu-content");
 
     allMenuNavTab.forEach(function(arrayItem, index) {
       helper.removeClass(arrayItem, "active");
     });
-    allMenuNavBody.forEach(function(arrayItem, index) {
-      helper.addClass(arrayItem, "is-hidden");
-    });
     allMenuContentArea.forEach(function(arrayItem, index) {
       helper.addClass(arrayItem, "is-hidden");
     });
 
     var control = helper.e(".control-menu-" + name);
-    var body = helper.e(".menu-nav-body-" + name);
     var content = helper.e(".menu-content-" + name);
 
     if (control) {
       helper.addClass(control, "active");
     };
-    if (body) {
-      helper.removeClass(body, "is-hidden");
-    };
     if (content) {
       helper.removeClass(content, "is-hidden");
     };
   };
 
+  render.subnav = {
+    calculate: function() {
+      var allMenuNavBody = helper.eA(".menu-nav-body");
+      allMenuNavBody.forEach(function(arrayItem, index) {
+        arrayItem.setAttribute("style", "--menu-nav-body-height:" + arrayItem.getBoundingClientRect().height + "px;");
+        if (index > 0) {
+          helper.removeClass(arrayItem, "active");
+        };
+      });
+    },
+    toggle: function(name) {
+      var allMenuNavBody = helper.eA(".menu-nav-body");
+      allMenuNavBody.forEach(function(arrayItem, index) {
+        helper.removeClass(arrayItem, "active");
+      });
+      var body = helper.e(".menu-nav-body-" + name);
+      if (body) {
+        helper.addClass(body, "active");
+      };
+    }
+  };
+
   render.tabindex = {
     toggle: function() {
       var menu = helper.e(".menu");
@@ -104,6 +118,7 @@ var menu = (function() {
 
   var nav = function(name) {
     render.nav(name);
+    render.subnav.toggle(name);
     render.scrollToTop(name);
   };
 
@@ -144,6 +159,7 @@ var menu = (function() {
     mod.close();
     render.close();
     render.removeStyle();
+    render.subnav.calculate();
   };
 
   return {