[design] improve menu layout

Author: zombieFox

css/base.css

@@ -22,7 +22,7 @@
 --gray-19:#edeff2;
 --gray-20:#fafafa;
 --root-font-size:14px;
---radius:2px;
+--radius:3px;
 --accent:0,255,0;
 --line-width:3px;
 --background:var(--gray-01);

css/menu.css

@@ -2,78 +2,91 @@
 background-color:var(--gray-02);
 border-radius:var(--radius);
 position: fixed;
-bottom:1em;
-left:1em;
-width:calc(100%-2em);
-height:calc(70vh-2em);
+top:1em;
+right:1em;
+width:calc(100vw-2em);
+max-height:calc(80vh-2em);
 overflow-y: scroll;
 z-index:3000;
-transform:translateY(calc(100%+2em));
+transform:translateY(calc(-100%-2em));
 transition: transform var(--animation-speed-fast) ease-in-out;
-/* display: grid;
- grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
- grid-gap: var(--line-width); */
 }
 
 .is-menu-open .menu{
 transform:translateY(0);
 }
 
-.menu-nav:not(:last-child){
-margin:0;
-}
-
 .menu-area{
-display: none;
+display: flex;
+flex-direction: column;
 }
 
-.menu-area.active{
-display: block;
+.menu-nav{
+display: flex;
+flex-direction: column;
 }
 
-.menu-nav-button{
+.menu-nav:not(:last-child){
 margin:0;
-padding:1.5em2em;
-border-radius:0;
 }
 
-.menu-nav-button.active{
-background-color:var(--gray-04);
-color:var(--white);
+.menu-nav-item:not(:last-child){
+margin:0;
 }
 
 .menu-content{
 padding:2em;
 }
 
-.menu-sub-area{
+.menu-content-area{
 display: grid;
-grid-template-columns:repeat(auto-fill,minmax(14em,1fr));
+grid-template-columns:repeat(auto-fill,1fr);
 grid-gap:2em;
 }
 
 .menu-header{
-border-top:var(--line-width) solid var(--gray-04);
 padding-top:1em;
+border-top:var(--line-width) solid var(--gray-04);
+}
+
+.menu-nav-button{
+margin:0;
+padding:1.5em2em;
+border-radius:0;
+}
+
+.menu-nav-button.active{
+background-color:var(--gray-04);
+color:var(--white);
 }
 
 @media (min-width:550px){
  .menu{
-height:calc(70vh-2em);
+max-height:calc(90vh-2em);
+ }
+
+ .menu-header{
+padding-top:0;
+padding-bottom:1em;
+border-top:0;
+border-bottom:var(--line-width) solid var(--gray-04);
  }
 
  .menu-nav{
-display: flex;
+flex-direction: row;
+ }
+
+ .menu-content-area{
+grid-template-columns:repeat(auto-fill,minmax(12em,1fr));
  }
 }
 
 @media (min-width:900px){
- .menu-nav{
-display: flex;
+ .menu{
+width:calc(50vw-2em);
  }
 
- .menu-sub-area{
-display: grid;
+ .menu-content-area{
 grid-template-columns:repeat(auto-fill,minmax(20em,1fr));
  }
 }

index.html

@@ -81,20 +81,21 @@
 </section>
 
 <sectionclass="menu">
-<ulclass="menu-nav u-list-unstyled">
-<liclass="menu-nav-item">
-<buttonclass="menu-nav-button button button-block button-large active" data-target=".menu-area-header">Header</button>
-</li>
-<liclass="menu-nav-item">
-<buttonclass="menu-nav-button button button-block button-large" data-target=".menu-area-bookmarks">Bookmarks</button>
-</li>
-<liclass="menu-nav-item">
-<buttonclass="menu-nav-button button button-block button-large" data-target=".menu-area-layout">Layout</button>
-</li>
-</ul>
-<divclass="menu-content">
-<divclass="menu-area menu-area-header active">
-<divclass="menu-sub-area">
+<divclass="menu-area">
+
+<ulclass="menu-nav u-list-unstyled">
+<liclass="menu-nav-item">
+<buttonclass="menu-nav-button button button-block button-large active" data-target=".menu-content-area-header">Header</button>
+</li>
+<liclass="menu-nav-item">
+<buttonclass="menu-nav-button button button-block button-large" data-target=".menu-content-area-bookmarks">Bookmarks</button>
+</li>
+<liclass="menu-nav-item">
+<buttonclass="menu-nav-button button button-block button-large" data-target=".menu-content-area-layout">Layout</button>
+</li>
+</ul>
+<divclass="menu-content">
+<divclass="menu-content-area menu-content-area-header">
 <divclass="menu-item">
 <h1class="menu-header">Clock</h1>
 <divclass="checkbox-wrap">
@@ -132,9 +133,6 @@ <h1 class="menu-header">Search</h1>
 <inputid="control-header-search-grow" class="control-header-search-grow" type="checkbox" tabindex="1">
 <labelfor="control-header-search-grow"><spanclass="label-icon"></span>Fill</label>
 </div>
-</div>
-<divclass="menu-item">
-<h1class="menu-header">Engine</h1>
 <divclass="radio-wrap">
 <inputid="control-header-search-engine-google" class="control-header-search-engine-google" type="radio" tabindex="1" name="control-header-search-engine" value="google">
 <labelfor="control-header-search-engine-google"><spanclass="label-icon"></span>Google</label>
@@ -157,17 +155,14 @@ <h1 class="menu-header">Engine</h1>
 </div>
 </div>
 <divclass="menu-item">
-<h1class="menu-header">Edit/Add</h1>
+<h1class="menu-header">Buttons</h1>
 <divclass="checkbox-wrap">
 <inputid="control-header-edit-add-active" class="control-header-edit-add-active" type="checkbox" tabindex="1">
-<labelfor="control-header-edit-add-active"><spanclass="label-icon"></span>Show</label>
+<labelfor="control-header-edit-add-active"><spanclass="label-icon"></span>Show Edit/Add</label>
 </div>
-</div>
-<divclass="menu-item">
-<h1class="menu-header">Accent</h1>
 <divclass="checkbox-wrap">
 <inputid="control-header-accent-active" class="control-header-accent-active" type="checkbox" tabindex="1">
-<labelfor="control-header-accent-active"><spanclass="label-icon"></span>Show</label>
+<labelfor="control-header-accent-active"><spanclass="label-icon"></span>Show Accent</label>
 </div>
 </div>
 <divclass="menu-item">
@@ -186,9 +181,7 @@ <h1 class="menu-header">Alignment</h1>
 </div>
 </div>
 </div>
-</div>
-<divclass="menu-area menu-area-bookmarks">
-<divclass="menu-sub-area">
+<divclass="menu-content-area menu-content-area-bookmarks is-hidden">
 <divclass="menu-item">
 <h1class="menu-header">Open</h1>
 <divclass="checkbox-wrap">
@@ -223,9 +216,7 @@ <h1 class="menu-header">Sort</h1>
 </div>
 </div>
 </div>
-</div>
-<divclass="menu-area menu-area-layout">
-<divclass="menu-sub-area">
+<divclass="menu-content-area menu-content-area-layout is-hidden">
 <divclass="menu-item">
 <h1class="menu-header">Width</h1>
 <divclass="radio-wrap">
@@ -250,6 +241,7 @@ <h1 class="menu-header">Page</h1>
 </div>
 </div>
 </div>
+
 </div>
 </section>
 

js/menu.js

@@ -11,16 +11,16 @@ var menu = (function(){
 
 var_tab=function(button){
 varallMenuNavButton=helper.eA(".menu-nav-button");
-varallMenuArea=helper.eA(".menu-area");
+varallMenuContentArea=helper.eA(".menu-content-area");
 vartarget=helper.e(button.dataset.target);
 allMenuNavButton.forEach(function(arrayItem,index){
 helper.removeClass(arrayItem,"active");
 });
-allMenuArea.forEach(function(arrayItem,index){
-helper.removeClass(arrayItem,"active");
+allMenuContentArea.forEach(function(arrayItem,index){
+helper.addClass(arrayItem,"is-hidden");
 });
 helper.addClass(button,"active");
-helper.addClass(target,"active");
+helper.removeClass(target,"is-hidden");
 };
 
 varclose=function(){