Hmenu update + iPad horizontal
This commit is contained in:
1 parent
f478be03f5
commit
5e8948b8da
3 files changed
+15
-17
No files matched your search
@@ -37,7 +37,7 @@ const Menu = ({items}) => {
|
|||||||
</li>
|
</li>
|
||||||
))
|
))
|
||||||
return (
|
return (
|
||||||
<menu className="main-menu HMenu" data-toggle-width="900">
|
<menu className="main-menu HMenu" data-toggle-width="1024">
|
||||||
<MenuToggle/>
|
<MenuToggle/>
|
||||||
|
|
||||||
{content}
|
{content}
|
||||||
|
|||||||
+9
-10
@@ -1,5 +1,12 @@
|
|||||||
const body = document.querySelector('body')
|
const body = document.querySelector('body')
|
||||||
|
|
||||||
|
function isFoldedState(element) {
|
||||||
|
const w = body.clientWidth
|
||||||
|
const toggleWidth = getToggleWidth(element)
|
||||||
|
|
||||||
|
return w <= toggleWidth
|
||||||
|
}
|
||||||
|
|
||||||
function isFolded(element) {
|
function isFolded(element) {
|
||||||
return element.classList.contains('HMenu--folded')
|
return element.classList.contains('HMenu--folded')
|
||||||
}
|
}
|
||||||
@@ -73,8 +80,6 @@ function runHmenu() {
|
|||||||
const menus = [...document.querySelectorAll('.HMenu')]
|
const menus = [...document.querySelectorAll('.HMenu')]
|
||||||
|
|
||||||
function initMenus() {
|
function initMenus() {
|
||||||
const w = body.clientWidth
|
|
||||||
|
|
||||||
return menus
|
return menus
|
||||||
.map(menu => {
|
.map(menu => {
|
||||||
const toggle = menu.querySelector('.HMenu__toggle')
|
const toggle = menu.querySelector('.HMenu__toggle')
|
||||||
@@ -83,10 +88,7 @@ function runHmenu() {
|
|||||||
toggleMenu(menu)
|
toggleMenu(menu)
|
||||||
})
|
})
|
||||||
|
|
||||||
const toggleWidth = getToggleWidth(menu)
|
if (isFoldedState(menu)) {
|
||||||
const foldedState = w < toggleWidth
|
|
||||||
|
|
||||||
if (foldedState) {
|
|
||||||
return foldMenu(menu)
|
return foldMenu(menu)
|
||||||
} else {
|
} else {
|
||||||
return unfoldMenu(menu)
|
return unfoldMenu(menu)
|
||||||
@@ -96,11 +98,8 @@ function runHmenu() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function handleMenus() {
|
function handleMenus() {
|
||||||
const w = body.clientWidth
|
|
||||||
|
|
||||||
return menus.map(menu => {
|
return menus.map(menu => {
|
||||||
const toggleWidth = getToggleWidth(menu)
|
const foldedState = isFoldedState(menu)
|
||||||
const foldedState = w < toggleWidth
|
|
||||||
|
|
||||||
if (foldedState && !isFolded(menu)) {
|
if (foldedState && !isFolded(menu)) {
|
||||||
return foldMenu(menu)
|
return foldMenu(menu)
|
||||||
|
|||||||
@@ -118,7 +118,7 @@ $hmenu-icon-height: 32px;
|
|||||||
|
|
||||||
.HMenu--folded.HMenu--open {
|
.HMenu--folded.HMenu--open {
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
@@ -143,11 +143,6 @@ $hmenu-icon-height: 32px;
|
|||||||
/*-webkit-transition: opacity 0.5s ease-in-out;*/
|
/*-webkit-transition: opacity 0.5s ease-in-out;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
.HMenu--folded .HMenu__item {
|
|
||||||
max-width: 10em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
._HMenu--folded li:last-child {
|
._HMenu--folded li:last-child {
|
||||||
@@ -155,6 +150,10 @@ $hmenu-icon-height: 32px;
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: $mobile-width) {
|
@media (max-width: $mobile-width) {
|
||||||
|
.HMenu--folded .HMenu__item {
|
||||||
|
max-width: 10em;
|
||||||
|
}
|
||||||
|
|
||||||
.HMenu--folded.HMenu--closed {
|
.HMenu--folded.HMenu--closed {
|
||||||
.HMenu__toggle {
|
.HMenu__toggle {
|
||||||
a {
|
a {
|
||||||
|
|||||||
Reference in new issue
Block a user