[design] animate menu sub nav

Author: zombieFox

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 @@
 <divclass="menu-nav">
 <divclass="menu-nav-item">
 <buttonclass="control-menu-layout menu-nav-tab button active" tabindex="-1">Layout</button>
-<divclass="menu-nav-body menu-nav-body-layout">
+<divclass="menu-nav-body menu-nav-body-layout active">
 <ahref="#menu-content-layout-scaling" class="menu-nav-sub button button-small" tabindex="-1">Global scaling</a>
 <ahref="#menu-content-layout-area" class="menu-nav-sub button button-small" tabindex="-1">Area</a>
 <ahref="#menu-content-layout-order" class="menu-nav-sub button button-small" tabindex="-1">Area order</a>
@@ -12,7 +12,7 @@
 </div>
 <divclass="menu-nav-item">
 <buttonclass="control-menu-header menu-nav-tab button" tabindex="-1">Header</button>
-<divclass="menu-nav-body menu-nav-body-header is-hidden">
+<divclass="menu-nav-body menu-nav-body-header active">
 <ahref="#menu-content-header-area" class="menu-nav-sub button button-small" tabindex="-1">Area</a>
 <ahref="#menu-content-header-greeting" class="menu-nav-sub button button-small" tabindex="-1">Greeting</a>
 <ahref="#menu-content-header-transitional" class="menu-nav-sub button button-small" tabindex="-1">Transitional words</a>
@@ -29,15 +29,15 @@
 </div>
 <divclass="menu-nav-item">
 <buttonclass="control-menu-groups menu-nav-tab button" tabindex="-1">Groups</button>
-<divclass="menu-nav-body menu-nav-body-groups is-hidden">
+<divclass="menu-nav-body menu-nav-body-groups active">
 <ahref="#menu-content-groups-names" class="menu-nav-sub button button-small" tabindex="-1">Names</a>
 <ahref="#menu-content-groups-order" class="menu-nav-sub button button-small" tabindex="-1">Order</a>
 <ahref="#menu-content-groups-border" class="menu-nav-sub button button-small" tabindex="-1">Border</a>
 </div>
 </div>
 <divclass="menu-nav-item">
 <buttonclass="control-menu-bookmarks menu-nav-tab button" tabindex="-1">Bookmarks</button>
-<divclass="menu-nav-body menu-nav-body-bookmarks is-hidden">
+<divclass="menu-nav-body menu-nav-body-bookmarks active">
 <ahref="#menu-content-bookmarks-area" class="menu-nav-sub button button-small" tabindex="-1">Area</a>
 <ahref="#menu-content-bookmarks-bookmarks" class="menu-nav-sub button button-small" tabindex="-1">Bookmarks</a>
 <ahref="#menu-content-bookmarks-color" class="menu-nav-sub button button-small" tabindex="-1">Background colour</a>
@@ -50,7 +50,7 @@
 </div>
 <divclass="menu-nav-item">
 <buttonclass="control-menu-theme menu-nav-tab button" tabindex="-1">Theme</button>
-<divclass="menu-nav-body menu-nav-body-theme is-hidden">
+<divclass="menu-nav-body menu-nav-body-theme active">
 <ahref="#menu-content-theme-preset" class="menu-nav-sub button button-small" tabindex="-1">Preset</a>
 <ahref="#menu-content-theme-saved" class="menu-nav-sub button button-small" tabindex="-1">Saved</a>
 <ahref="#menu-content-theme-style" class="menu-nav-sub button button-small" tabindex="-1">Style</a>
@@ -64,14 +64,14 @@
 </div>
 <divclass="menu-nav-item">
 <buttonclass="control-menu-background menu-nav-tab button" tabindex="-1">Background</button>
-<divclass="menu-nav-body menu-nav-body-background is-hidden">
+<divclass="menu-nav-body menu-nav-body-background active">
 <ahref="#menu-content-background-color" class="menu-nav-sub button button-small" tabindex="-1">Colour</a>
 <ahref="#menu-content-background-image" class="menu-nav-sub button button-small" tabindex="-1">Image</a>
 </div>
 </div>
 <divclass="menu-nav-item">
 <buttonclass="control-menu-data menu-nav-tab button" tabindex="-1">Data</button>
-<divclass="menu-nav-body menu-nav-body-data is-hidden">
+<divclass="menu-nav-body menu-nav-body-data active">
 <ahref="#menu-content-data-restore" class="menu-nav-sub button button-small" tabindex="-1">Restore</a>
 <ahref="#menu-content-data-backup" class="menu-nav-sub button button-small" tabindex="-1">Backup</a>
 <ahref="#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){
 varallMenuNavTab=helper.eA(".menu-nav-tab");
-varallMenuNavBody=helper.eA(".menu-nav-body");
 varallMenuContentArea=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");
 });
 
 varcontrol=helper.e(".control-menu-"+name);
-varbody=helper.e(".menu-nav-body-"+name);
 varcontent=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(){
+varallMenuNavBody=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){
+varallMenuNavBody=helper.eA(".menu-nav-body");
+allMenuNavBody.forEach(function(arrayItem,index){
+helper.removeClass(arrayItem,"active");
+});
+varbody=helper.e(".menu-nav-body-"+name);
+if(body){
+helper.addClass(body,"active");
+};
+}
+};
+
 render.tabindex={
 toggle: function(){
 varmenu=helper.e(".menu");
@@ -104,6 +118,7 @@ var menu = (function(){
 
 varnav=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{