Built out (functional) hamburger menu

This commit is contained in:
2018-06-12 08:34:59 +10:00
parent 9dd724a8d4
commit 13614d2cdc
11 changed files with 166 additions and 14 deletions

View File

@ -0,0 +1,52 @@
/*
* Hamburger Menu
* Mobile-Centric openable menu with a hamburger icon to toggle.
*
* Dependencies:
* styles/settings/colors.scss
* styles/settings/z.scss
*
* Version:
* 1.0.0 - 2018/06/12
*/
.o-hamburger-menu {
border: 1px solid red;
&__menu {
@extend %t-list-blank;
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: $s-color--menu__background;
z-index: $s-z--menu;
}
&__link {
@extend %t-list-litem-blank;
}
&__button {
position: relative;//Helps us win the Z-Fight
width: 100%;
height: 100%;
padding: 0.5em;
cursor: pointer;
z-index: $s-z--menu-button;
}
&__icon {
display: block;
}
&.is-open {
.o-hamburger-menu__menu {
display: block;
}
}
}

View File

@ -37,7 +37,6 @@ $o-navbar--link-thickness: 5px;
&__logo-container {
width: 100%;
padding: 0.5em;
text-align: center;
}
&__logo {
@ -81,12 +80,12 @@ $o-navbar--link-thickness: 5px;
}
}
&__hamburger {
}
@include t-media-query($s-xsmall-up) {
//padding: 1em;
&__logo-container {
text-align: left;
&__hamburger {
display: none;
}
&__logo {
@ -99,6 +98,7 @@ $o-navbar--link-thickness: 5px;
}
@include t-media-query($s-small-up) {
&__logo {
width: 12em;
}