biobulkbende/biobulkbende.org
0
0
Fork 0
mirror of https://github.com/biobulkbende/biobulkbende.org.git synced 2025-10-19 02:06:30 +00:00
Code Issues Projects Releases Wiki Activity

js automation and mobile menu

Browse Source
This commit is contained in:
Tancre
2020-09-18 22:01:59 +02:00
parent 7bb27cb2ed
commit ffe3634bcf
14 changed files with 3829 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/js/App.js Normal file
View File

@ -0,0 +1,3 @@
import MobileMenu from './modules/MobileMenu';
var mobileMenu = new MobileMenu();

1
app/assets/js/Vendor.js Normal file
View File

@ -0,0 +1 @@
import '../temp/modernizr';

26
app/assets/js/modules/MobileMenu.js Normal file
View File

@ -0,0 +1,26 @@
import $ from 'jquery';
class MobileMenu{
constructor(){
this.siteHeader = $(".site-header");
this.menuIcon = $(".site-header__menu-icon");
this.menuContent = $(".site-header__menu-content");
this.siteHeaderLogo= $(".site-header__logo");
this.events();
}
events(){
this.menuIcon.click(this.toggleTheMenu.bind(this));
}
toggleTheMenu(){
this.menuContent.toggleClass("site-header__menu-content--is-visible");
this.siteHeader.toggleClass("site-header--is-expanded");
this.menuIcon.toggleClass("site-header__menu-icon--close-x");
this.siteHeaderLogo.toggleClass("site-header__logo--orange-bg");
}
}
export default MobileMenu;

5
app/assets/scss/modules/_large-hero.scss
View File

@ -34,13 +34,14 @@
}
&__subtitle {
font-family: "CocogooseNormal";
// font-family: "CocogooseNormal";
font-weight: 400;
color: white;
font-size: 1.5rem;
margin: 0;
@include atSmall(){
font-size: 2.9rem;
font-size: 2.4rem;
}
}

89
app/assets/scss/modules/_site-header.scss
View File

@ -3,6 +3,11 @@
width: 100%;
z-index: 2;
transition: background-color .3s ease-out;
&--is-expanded {
background-color: orange;
padding-bottom: 18px;
}
@include atMedium(){
position: fixed;
@ -16,6 +21,73 @@
}
}
&__menu-icon{
width: 20px;
height: 19px;
position: absolute;
z-index: 10;
top: 10px;
right: 10px;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 3px;
background: #FFF;
transform-origin: 0 0;
transition: transform .3s ease-out;
}
&__middle {
position: absolute;
top: 8px;
left: 0;
width: 20px;
height: 3px;
background: #FFF;
transition: all .3s ease-out;
transform-origin: 0 50%;
}
&::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 20px;
height: 3px;
background: #FFF;
transform-origin: 0 100%;
transition: transform .3s ease-out;
}
@include atMedium {
display: none;
}
}
&__menu-icon--close-x {
&::before {
transform: rotate(45deg) scaleX(1.25);
}
.site-header__menu-icon__middle{
transform: scaleX(0);
opacity: 0;
}
&::after {
transform: rotate(-45deg) scaleX(1.25) translateY(1px);
}
}
&__menu-content{
opacity: 0;
transform: scale(1.2);
@ -25,6 +97,12 @@
padding-top: 90px;
text-align: center;
&--is-visible{
transform: scale(1);
opacity: 1;
z-index: 1;
}
@include atMedium(){
opacity: 1;
z-index: 1;
@ -35,17 +113,26 @@
&__logo{
position: absolute;
top: 3px;
top: 0px;
padding: 5px 15px;
left: 50%;
transform-origin: 50% 0%;
transform: translateX(-50%) scale(.8);
transition: transform .3s ease-out;
background-color: rgba(black, 0.5);
&--orange-bg {
background-color: orange;
}
@include atMedium(){
padding: 0;
top: 3px;
position: relative;
float: left;
left: auto;
transform: translateX(0);
background-color: rgba(black, 0);
}
}