mirror of
https://github.com/zombieFox/nightTab.git
synced 2024-11-30 03:54:15 +01:00
[design] improve menu layout
This commit is contained in:
zombieFox
parent
465e5e92fe
commit
390d559605
@ -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);
|
||||
|
||||
77
css/menu.css
77
css/menu.css
@ -2,33 +2,51 @@
|
||||
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-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.menu-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.menu-nav:not(:last-child) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.menu-area {
|
||||
display: none;
|
||||
.menu-nav-item:not(:last-child) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.menu-area.active {
|
||||
display: block;
|
||||
.menu-content {
|
||||
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;
|
||||
@media (min-width: 550px) {
|
||||
.menu {
|
||||
max-height: calc(90vh - 2em);
|
||||
}
|
||||
|
||||
.menu-header {
|
||||
border-top: var(--line-width) solid var(--gray-04);
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
@media (min-width: 550px) {
|
||||
.menu {
|
||||
height: calc(70vh - 2em);
|
||||
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));
|
||||
}
|
||||
}
|
||||
|
||||
32
index.html
32
index.html
@ -81,20 +81,21 @@
|
||||
</section>
|
||||
|
||||
<section class="menu">
|
||||
<div class="menu-area">
|
||||
|
||||
<ul class="menu-nav u-list-unstyled">
|
||||
<li class="menu-nav-item">
|
||||
<button class="menu-nav-button button button-block button-large active" data-target=".menu-area-header">Header</button>
|
||||
<button class="menu-nav-button button button-block button-large active" data-target=".menu-content-area-header">Header</button>
|
||||
</li>
|
||||
<li class="menu-nav-item">
|
||||
<button class="menu-nav-button button button-block button-large" data-target=".menu-area-bookmarks">Bookmarks</button>
|
||||
<button class="menu-nav-button button button-block button-large" data-target=".menu-content-area-bookmarks">Bookmarks</button>
|
||||
</li>
|
||||
<li class="menu-nav-item">
|
||||
<button class="menu-nav-button button button-block button-large" data-target=".menu-area-layout">Layout</button>
|
||||
<button class="menu-nav-button button button-block button-large" data-target=".menu-content-area-layout">Layout</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="menu-content">
|
||||
<div class="menu-area menu-area-header active">
|
||||
<div class="menu-sub-area">
|
||||
<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-area menu-area-bookmarks">
|
||||
<div class="menu-sub-area">
|
||||
<div class="menu-content-area menu-content-area-bookmarks is-hidden">
|
||||
<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-area menu-area-layout">
|
||||
<div class="menu-sub-area">
|
||||
<div class="menu-content-area menu-content-area-layout is-hidden">
|
||||
<div class="menu-item">
|
||||
<h1 class="menu-header">Width</h1>
|
||||
<div class="radio-wrap">
|
||||
@ -250,6 +241,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@ -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) {
|
||||
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");
|
||||
};
|
||||
|
||||
var close = function() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user