Simplify menus
This commit is contained in:
panr
parent
09628b6b3d
commit
39ba3a4ea9
10 changed files with 236 additions and 250 deletions
|
|
@ -1,17 +1,3 @@
|
|||
@mixin menu {
|
||||
$shadow-color: opacify($background, .8);
|
||||
$shadow: 0 10px $shadow-color, -10px 10px $shadow-color, 10px 10px $shadow-color;
|
||||
position: absolute;
|
||||
background: $background;
|
||||
box-shadow: $shadow;
|
||||
color: white;
|
||||
border: 2px solid;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
list-style: none;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -45,130 +31,4 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin: 20px 1px;
|
||||
|
||||
@media ($phone) {
|
||||
@include menu;
|
||||
top: 50px;
|
||||
right: 0;
|
||||
|
||||
&.hidden-on-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__inner {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
&--desktop {
|
||||
@media ($phone) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&--mobile {
|
||||
display: none;
|
||||
|
||||
@media ($phone) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 20px;
|
||||
margin-bottom: 10px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media ($phone) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__sub-inner {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
&:not(:only-child) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
&-more {
|
||||
@include menu;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
&-trigger {
|
||||
color: $accent;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex-grow: 1 !important;
|
||||
}
|
||||
|
||||
.language-selector {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
|
||||
&-current {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
color: $accent;
|
||||
cursor: pointer;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
&__more {
|
||||
@include menu;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-trigger {
|
||||
display: none;
|
||||
color: $accent;
|
||||
border: 2px solid;
|
||||
margin-left: 10px;
|
||||
height: 100%;
|
||||
padding: 3px 8px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
@media ($phone) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
156
assets/css/menu.scss
Normal file
156
assets/css/menu.scss
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
@mixin menu {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
$shadow-color: opacify($background, .8);
|
||||
$shadow: 0 10px $shadow-color, -10px 10px $shadow-color, 10px 10px $shadow-color;
|
||||
position: absolute;
|
||||
background: $background;
|
||||
box-shadow: $shadow;
|
||||
color: white;
|
||||
border: 2px solid;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
list-style: none;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
@mixin header-menu-trigger {
|
||||
color: $accent;
|
||||
border: 2px solid;
|
||||
margin-left: 10px;
|
||||
height: 100%;
|
||||
padding: 3px 8px;
|
||||
margin-bottom: 0 !important;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navigation-menu {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin: 20px 1px;
|
||||
|
||||
@media ($phone) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__inner {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
> li {
|
||||
flex: 0 0 auto;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media ($phone) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex-grow: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
&__trigger {
|
||||
margin-right: 0 !important;
|
||||
color: $accent;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__dropdown {
|
||||
@include menu;
|
||||
|
||||
.open & {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
> li {
|
||||
flex: 0 0 auto;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--desktop {
|
||||
@media ($phone) {
|
||||
display: none
|
||||
}
|
||||
}
|
||||
|
||||
&--mobile {
|
||||
.menu__trigger {
|
||||
@include header-menu-trigger;
|
||||
display: none;
|
||||
|
||||
@media ($phone) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.menu__dropdown {
|
||||
@media ($phone) {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
flex: 0 0 auto;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--language-selector {
|
||||
.menu__trigger {
|
||||
@include header-menu-trigger;
|
||||
|
||||
@media ($phone) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.menu__dropdown {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
@import "form";
|
||||
|
||||
@import "header";
|
||||
@import "menu";
|
||||
@import "logo";
|
||||
@import "main";
|
||||
@import "post";
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
const mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth");
|
||||
const isMobile = () => window.matchMedia(mobileQuery).matches;
|
||||
|
||||
const languageSelector = document.querySelector(".language-selector-current");
|
||||
const moreLanguagesContainer = document.querySelector(".language-selector__more");
|
||||
|
||||
document.body.addEventListener("click", () => {
|
||||
if (
|
||||
!isMobile() &&
|
||||
moreLanguagesContainer &&
|
||||
!moreLanguagesContainer.classList.contains("hidden")
|
||||
) {
|
||||
moreLanguagesContainer.classList.add("hidden");
|
||||
}
|
||||
});
|
||||
|
||||
languageSelector &&
|
||||
languageSelector.addEventListener("click", (e) => {
|
||||
if (!isMobile()) {
|
||||
e.stopPropagation();
|
||||
moreLanguagesContainer.classList.toggle("hidden");
|
||||
}
|
||||
});
|
||||
|
|
@ -1,49 +1,44 @@
|
|||
const container = document.querySelector(".container");
|
||||
const menu = document.querySelector(".menu");
|
||||
const mobileMenuTrigger = document.querySelector(".menu-trigger");
|
||||
const desktopMenu = document.querySelector(".menu__inner--desktop");
|
||||
const desktopMenuTrigger = document.querySelector(".menu__sub-inner-more-trigger");
|
||||
const menuMore = document.querySelector(".menu__sub-inner-more");
|
||||
const mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWidth");
|
||||
const isMobile = () => window.matchMedia(mobileQuery).matches;
|
||||
const handleMenuClasses = () => {
|
||||
menuMore && menuMore.classList.toggle("hidden-on-mobile", !isMobile());
|
||||
};
|
||||
|
||||
// Common
|
||||
|
||||
menu && menu.addEventListener("click", (e) => e.stopPropagation());
|
||||
menuMore && menuMore.addEventListener("click", (e) => e.stopPropagation());
|
||||
|
||||
// handleMenuClasses();
|
||||
const allMenus = document.querySelectorAll(".menu");
|
||||
|
||||
// Hide menus on body click
|
||||
document.body.addEventListener("click", () => {
|
||||
if (!isMobile() && menuMore && !menuMore.classList.contains("hidden")) {
|
||||
menuMore.classList.add("hidden");
|
||||
} else if (isMobile() && !menu.classList.contains("hidden")) {
|
||||
menu.classList.add("hidden");
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener("resize", handleMenuClasses);
|
||||
|
||||
// Mobile menu
|
||||
|
||||
mobileMenuTrigger &&
|
||||
mobileMenuTrigger.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
menu && menu.classList.toggle("hidden-on-mobile");
|
||||
});
|
||||
|
||||
// Desktop menu
|
||||
|
||||
desktopMenuTrigger &&
|
||||
desktopMenuTrigger.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
menuMore && menuMore.classList.toggle("hidden");
|
||||
|
||||
if (menuMore.getBoundingClientRect().right > container.getBoundingClientRect().right) {
|
||||
menuMore.style.left = "auto";
|
||||
menuMore.style.right = 0;
|
||||
allMenus.forEach(menu => {
|
||||
if (menu.classList.contains("open")) {
|
||||
menu.classList.remove("open");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Reset menus on resize
|
||||
window.addEventListener("resize", () => {
|
||||
allMenus.forEach(menu => {
|
||||
menu.classList.remove("open");
|
||||
});
|
||||
});
|
||||
|
||||
// Handle desktop menu
|
||||
allMenus.forEach(menu => {
|
||||
const trigger = menu.querySelector(".menu__trigger");
|
||||
const dropdown = menu.querySelector(".menu__dropdown");
|
||||
|
||||
trigger.addEventListener("click", e => {
|
||||
e.stopPropagation();
|
||||
|
||||
if (menu.classList.contains("open")) {
|
||||
menu.classList.remove("open");
|
||||
} else {
|
||||
// Close all menus...
|
||||
allMenus.forEach(m => m.classList.remove("open"));
|
||||
// ...before opening the current one
|
||||
menu.classList.add("open");
|
||||
}
|
||||
|
||||
if (dropdown.getBoundingClientRect().right > container.getBoundingClientRect().right) {
|
||||
dropdown.style.left = "auto";
|
||||
dropdown.style.right = 0;
|
||||
}
|
||||
});
|
||||
|
||||
dropdown.addEventListener("click", e => e.stopPropagation());
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue