[design] improve menu layout

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,33 +2,51 @@
   background-color: var(--gray-02);
   border-radius: var(--radius);
   position: fixed;
-  bottom: 1em;
+  top: 1em;
-  left: 1em;
+  right: 1em;
-  width: calc(100% - 2em);
+  width: calc(100vw - 2em);
-  height: calc(70vh - 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-area {
+  display: flex;
+  flex-direction: column;
+}
+
+.menu-nav {
+  display: flex;
+  flex-direction: column;
+}
+
 .menu-nav:not(:last-child) {
   margin: 0;
 }
 
-.menu-area {
+.menu-nav-item:not(:last-child) {
-  display: none;
+  margin: 0;
 }
 
-.menu-area.active {
+.menu-content {
-  display: block;
+  padding: 2em;
+}
+
+.menu-content-area {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 1fr);
+  grid-gap: 2em;
+}
+
+.menu-header {
+  padding-top: 1em;
+  border-top: var(--line-width) solid var(--gray-04);
 }
 
 .menu-nav-button {
@@ -42,38 +60,33 @@
   color: var(--white);
 }
 
-.menu-content {
-  padding: 2em;
-}
-
-.menu-sub-area {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(14em, 1fr));
-  grid-gap: 2em;
-}
-
-.menu-header {
-  border-top: var(--line-width) solid var(--gray-04);
-  padding-top: 1em;
-}
-
 @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 {
+  .menu {
-    display: flex;
+    width: calc(50vw - 2em);
   }
 
-  .menu-sub-area {
+  .menu-content-area {
-    display: grid;
     grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
   }
 }

index.html

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

js/menu.js

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