host/xiaowang
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add main navigation menu

Browse source
This commit is contained in:
Paul Nicoué 2022-06-07 16:50:09 +02:00
parent e80094dfd8
commit 9bda79a1d5
6 changed files with 145 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

3
assets/css/partials/_variables.scss
View file

@ -44,8 +44,9 @@
// Colors
--black: #000;
--transparent-black: rgba(0, 0, 0, 0.8);
--jet: #333333;
--spanish-gray: #999999;
--light-gray: #d6d6d6;
--white: #fff;
--transparent-white: rgba(255, 255, 255, 0.8);
}

2
assets/css/style.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
assets/css/style.min.css.map
View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["partials/_minireset.css","partials/_fonts.scss","partials/_variables.scss","partials/_animations.scss","style.scss"],"names":[],"mappings":"AAIA,yGAuBI,SACA,UAGJ,kBAMI,eACA,mBAGJ,GACI,gBAGJ,oBAGI,SAGJ,KACI,sBAGJ,qBACI,mBAGJ,UAEI,YACA,eAGJ,OACI,SAGJ,MACI,yBACA,iBAGJ,MAEI,UCtEJ,WACI,qBACA,+DACA,gBACA,kBAGJ,WACC,qBACA,8DACA,gBACA,kBAGD,WACC,qBACA,8DACA,gBACA,kBAGD,WACC,qBACA,oEACA,gBACA,kBAGD,WACC,qBACA,gEACA,gBACA,kBAGD,WACC,qBACA,sEACA,gBACA,kBAGD,WACC,qBACA,4DACA,gBACA,kBAGD,WACC,qBACA,kEACA,gBACA,kBAKD,WACC,gCACA,oFACA,gBACA,kBChED,MAII,kDACA,6DACA,2BACA,0BACA,6BACA,wBACA,uBACA,4BACA,6BACA,2BACA,uBACA,uBACA,uBAIA,4BACA,wBACA,oBACA,oCACA,sCACA,0FACA,oCACA,sCACA,sHACA,yCACA,2CACA,sCACA,wCACA,6FACA,qBACA,2BACA,+BACA,mMAIA,cACA,eACA,wBACA,cACA,8CAQJ,qCAEI,MAII,yBACA,4BACA,2BACA,qBACA,uBACA,uBAIA,kBACA,sCACA,oCACA,sCACA,uFACA,2CACA,yCC1ER,2BACI,GACF,MAEE,IACF,YAED,KACC,OAIF,mBACC,GACC,MAEE,IACF,YAED,KACC,OAIF,6BACI,GACF,SAEE,IACF,eAED,KACC,UAIF,qBACI,GACF,SAEE,IACF,eAED,KACC,UCrCF,KACI,oCACA,gCACA,kCACA,iBACA,8BAGJ,SAGI,mBAGJ,GACI,oCACA,8BACA,gCAGJ,GACI,oCACA,8BACA,gCACA,kBAGJ,GACI,oCACA,8BACA,gCACA,qBAGJ,EACI,mBACA,oCAGJ,OACI,oCAGJ,GACI,kBAKJ,EACI,iBACA,0BACA,2CACA,sCACA,mCAEA,yBAGI,mBAOR,KACI,iBACA,kBACA,iBACA,aACA,KACI,+DAMR,OACI,iBAGJ,KACI,eAGJ,OACI,iBASJ,YACC,WACG,mCACA,gCACA,YACA,gFACH,0CACA,iDACG,oBACA,oBACA,aACA,yBACA,sBACA,8BACA,yBACA,sBACA,mBACH,UACA,mDACA,8CACA,2CAEA,mBACC,eACA,sCACA,4CACA,+CACA,0CACA,uCAGD,qBACC,uDACA,mDACA,+CAIF,kBACI,kBAGJ,uBACI,qBAGJ,iBACC,kBACA,UAGD,wBACC,uBACA,wBACA,YACA,kBACA,4BACA,eACA,oBACA,oBACA,aACA,wBACA,qBACA,uBACA,yBACA,sBACA,mBACA,sDACA,iDACA,8CAEA,4BACC,kBACA,UACA,WACM,0CACA,qCACA,kCAGJ,2FAGF,8BAUF,cACI,mCACA,0CACA,YACA,oFACA,oBACA,oBACA,aACA,wBACA,qBACA,uBACA,yBACA,sBACA,mBAGJ,WACI,YACA,iBACA,aACA,KACI,iMAIJ,4BACA,wBACA,cAGJ,iBACI,iBAEA,qBACI,gBACA,2BACA,iBACA,4CAMJ,sCACI,mBACA,mBACA,kBACI,4DAEJ,cACI,4DAEJ,UACI,4DAIR,sCACI,oBACA,qBACA,kBACI,2DAEJ,cACI,2DAEJ,UACI,2DAOR,sCACI,mBACA,mBACA,kBACI,4DAEJ,cACI,4DAEJ,UACI,4DAIR,sCACI,oBACA,qBACA,kBACI,2DAEJ,cACI,2DAEJ,UACI,2DAIR,sCACI,iBACA,wBAMJ,sCACI,mBACA,mBACA,kBACI,4DAEJ,cACI,4DAEJ,UACI,4DAIR,sCACI,oBACA,qBACA,kBACI,2DAEJ,cACI,2DAEJ,UACI,2DAIR,sCACI,sBACA,qBACA,kBACI,sEAEJ,cACI,sEAEJ,UACI,sEAIR,sCACI,uBACA,uBACA,kBACI,uEAEJ,cACI,uEAEJ,UACI,uEAKZ,gBACI,mBACA,8BACA,qBACA,UACA,6CACA,wCACA,qCAEA,oBACI,UACA,6CACA,wCACA,qCAIR,yBACI,UAEA,6BACI,UAIR,2BACI,yCACA,oCAGJ,6BACI,2CACA,sCAKJ,oCAEI,mCACA,YACA,0FAGJ,kCAEI,kBAGJ,gDAEI,gCACA,YAEA,gFACI,kBAKA,kHAEI,kBAIR,sDACI,uBAEA,sHAEI,kBAGJ,kEACI,mBAKZ,kBACI,cACA,2BACA,YAEA,oCACI,wBAGJ,oEAEI,cACA,gBAKA,+CACI,mBAIR,6BACI,sBACA,oBACA,wBACA,mCACA,kBAIR,qCAIQ,oCACI,yBAOZ,eACI,mCACA,YACA,0FAGJ,cACI,kBAGJ,gBACI,gCACA,YACA,kBAGJ,eACI,kBACA,kBAEA,iBACI,qBACA,aACA,mBACA,mBACA,4BACA,qBACA,yCACA,sDACA,iDACA,8CAEA,sEAGI,8BAWZ,YACI,mCACA,gCACA,YACA,gFACA,oBACA,oBACA,aACA,4BACA,6BACA,0BACA,sBACA,yBACA,sBACA,mBAGJ,oBACI,oBACA,oBACA,aACA,yBACA,sBACA,mBAEA,sBACF,uBACA,wBACA,kBACA,4BACM,oBACA,oBACA,aACA,wBACA,qBACA,uBACA,yBACA,sBACA,mBACN,sDACA,iDACA,8CAEM,wBACI,kBAGJ,0BACL,kBACM,0CACA,qCACA,kCAIP,qFAGC,8BAMD,uDACC,UACA,WAMD,mDACC,UACA,WAKH,uBACI,oCACA,kBAGJ,qCAEI,YACI,8BACA,6BACA,uBACA,mBACA,yBACA,sBACA,8BACA,sBACA,mBACA,qBAGJ,oBACI,QAGJ,uBACI,QACA","file":"style.min.css"}
{"version":3,"sourceRoot":"","sources":["partials/_minireset.css","partials/_fonts.scss","partials/_variables.scss","partials/_animations.scss","style.scss"],"names":[],"mappings":"AAIA,yGAuBI,SACA,UAGJ,kBAMI,eACA,mBAGJ,GACI,gBAGJ,oBAGI,SAGJ,KACI,sBAGJ,qBACI,mBAGJ,UAEI,YACA,eAGJ,OACI,SAGJ,MACI,yBACA,iBAGJ,MAEI,UCtEJ,WACI,qBACA,+DACA,gBACA,kBAGJ,WACC,qBACA,8DACA,gBACA,kBAGD,WACC,qBACA,8DACA,gBACA,kBAGD,WACC,qBACA,oEACA,gBACA,kBAGD,WACC,qBACA,gEACA,gBACA,kBAGD,WACC,qBACA,sEACA,gBACA,kBAGD,WACC,qBACA,4DACA,gBACA,kBAGD,WACC,qBACA,kEACA,gBACA,kBAKD,WACC,gCACA,oFACA,gBACA,kBChED,MAII,kDACA,6DACA,2BACA,0BACA,6BACA,wBACA,uBACA,4BACA,6BACA,2BACA,uBACA,uBACA,uBAIA,4BACA,wBACA,oBACA,oCACA,sCACA,0FACA,oCACA,sCACA,sHACA,yCACA,2CACA,sCACA,wCACA,6FACA,qBACA,2BACA,+BACA,mMAIA,cACA,wCACA,eACA,sBACA,cACA,8CAQJ,qCAEI,MAII,yBACA,4BACA,2BACA,qBACA,uBACA,uBAIA,kBACA,sCACA,oCACA,sCACA,uFACA,2CACA,yCC3ER,2BACI,GACF,MAEE,IACF,YAED,KACC,OAIF,mBACC,GACC,MAEE,IACF,YAED,KACC,OAIF,6BACI,GACF,SAEE,IACF,eAED,KACC,UAIF,qBACI,GACF,SAEE,IACF,eAED,KACC,UCrCF,KACI,oCACA,gCACA,kCACA,iBACA,8BAGJ,SAGI,mBAGJ,GACI,oCACA,8BACA,gCAGJ,GACI,oCACA,8BACA,gCACA,kBAGJ,GACI,oCACA,8BACA,gCACA,qBAGJ,EACI,mBACA,oCAGJ,OACI,oCAGJ,GACI,kBAKJ,EACI,iBACA,0BACA,2CACA,sCACA,mCAEA,yBAGI,mBAOR,KACI,iBACA,kBACA,iBACA,aACA,KACI,+DAUR,OACI,iBAGJ,KACI,eAGJ,OACI,iBASJ,YACC,WACG,mCACA,gCACA,YACA,gFACH,0CACA,iDACG,oBACA,oBACA,aACA,yBACA,sBACA,8BACA,yBACA,sBACA,mBACH,UACA,mDACA,8CACA,2CAEA,mBACC,eACA,sCACA,0CACA,+CACA,0CACA,uCAGD,qBACC,uDACA,mDACA,+CAIF,kBACI,kBAGJ,uBACI,qBAGJ,iBACC,kBACA,UAGD,wBACC,kBACA,UACA,uBACA,wBACA,UACA,gBACA,YACA,kBACA,4BACA,eACA,oBACA,oBACA,aACA,yBACA,sBACA,mBACA,mBACC,+DAED,cACC,+DAED,WACC,+DAGD,4BACC,WACA,YACA,YACA,cACM,mBACL,sDAEK,cACL,sDAEK,WACL,sDAIF,yCACC,kBACA,UAGD,yCACC,kBACA,UAGE,6DAEF,6BACA,yBACA,qBAGD,sCACC,8BAEA,0CACC,oCACG,gCACA,4BAGJ,uDACC,UAGD,uDACC,UAKH,sBACC,eACA,UACA,MACA,WACA,eACA,aACA,oBACA,oBACA,aACA,4BACA,6BACG,0BACA,sBACH,wBACA,sBACA,mBACA,gBACA,0CACA,6DACA,+CACA,0CACA,uCAEA,+BACC,oCACG,gCACA,4BAGJ,4BACC,kBAGD,wBACC,WAUF,cACI,mCACA,0CACA,YACA,oFACA,oBACA,oBACA,aACA,wBACA,qBACA,uBACA,yBACA,sBACA,mBAGJ,WACI,YACA,iBACA,aACA,KACI,iMAIJ,4BACA,wBACA,cAGJ,iBACI,iBAEA,qBACI,gBACA,2BACA,iBACA,4CAMJ,sCACI,mBACA,mBACA,kBACI,4DAEJ,cACI,4DAEJ,UACI,4DAIR,sCACI,oBACA,qBACA,kBACI,2DAEJ,cACI,2DAEJ,UACI,2DAOR,sCACI,mBACA,mBACA,kBACI,4DAEJ,cACI,4DAEJ,UACI,4DAIR,sCACI,oBACA,qBACA,kBACI,2DAEJ,cACI,2DAEJ,UACI,2DAIR,sCACI,iBACA,wBAMJ,sCACI,mBACA,mBACA,kBACI,4DAEJ,cACI,4DAEJ,UACI,4DAIR,sCACI,oBACA,qBACA,kBACI,2DAEJ,cACI,2DAEJ,UACI,2DAIR,sCACI,sBACA,qBACA,kBACI,sEAEJ,cACI,sEAEJ,UACI,sEAIR,sCACI,uBACA,uBACA,kBACI,uEAEJ,cACI,uEAEJ,UACI,uEAKZ,gBACI,mBACA,8BACA,qBACA,UACA,6CACA,wCACA,qCAEA,oBACI,UACA,6CACA,wCACA,qCAIR,yBACI,UAEA,6BACI,UAIR,2BACI,yCACA,oCAGJ,6BACI,2CACA,sCAKJ,oCAEI,mCACA,YACA,0FAGJ,kCAEI,kBAGJ,gDAEI,gCACA,YAEA,gFACI,kBAKA,kHAEI,kBAIR,sDACI,uBAEA,sHAEI,kBAGJ,kEACI,mBAKZ,kBACI,cACA,2BACA,YAEA,oCACI,wBAGJ,oEAEI,cACA,gBAKA,+CACI,mBAIR,6BACI,sBACA,oBACA,wBACA,mCACA,kBAIR,qCAIQ,oCACI,yBAOZ,eACI,mCACA,YACA,0FAGJ,cACI,kBAGJ,gBACI,gCACA,YACA,kBAGJ,eACI,kBACA,kBAEA,iBACI,qBACA,aACA,mBACA,mBACA,4BACA,qBACA,yCACA,sDACA,iDACA,8CAEA,sEAGI,8BAWZ,YACI,mCACA,gCACA,YACA,gFACA,oBACA,oBACA,aACA,4BACA,6BACA,0BACA,sBACA,yBACA,sBACA,mBAGJ,oBACI,oBACA,oBACA,aACA,yBACA,sBACA,mBAEA,sBACF,uBACA,wBACA,kBACA,4BACM,oBACA,oBACA,aACA,wBACA,qBACA,uBACA,yBACA,sBACA,mBACN,+CACA,0CACA,uCAEM,wBACI,kBAGJ,0BACL,kBACM,0CACA,qCACA,kCAIP,yDAEC,qBAMD,uDACC,UACA,WAMD,mDACC,UACA,WAKH,uBACI,oCACA,kBAGJ,qCAEI,YACI,8BACA,6BACA,uBACA,mBACA,yBACA,sBACA,8BACA,sBACA,mBACA,qBAGJ,oBACI,QAGJ,uBACI,QACA","file":"style.min.css"}

123
assets/css/style.scss
View file

@ -87,6 +87,10 @@ body {
/ 1fr;
}
// .body--hidden-overflow-y {
// overflow-y: hidden;
// }
header {
grid-area: header;
}
@ -130,7 +134,7 @@ footer {
&--fixed {
position: fixed;
top: calc(-1 * var(--header-bar-height));
border-bottom: 1px solid var(--spanish-gray);
border-bottom: 1px solid var(--light-gray);
-webkit-transition: transform 400ms ease-in-out;
-o-transition: transform 400ms ease-in-out;
transition: transform 400ms ease-in-out;
@ -157,8 +161,12 @@ footer {
}
.header-bar__nav-button {
position: relative;
z-index: 2;
width: var(--icon-size);
height: var(--icon-size);
padding: 0;
overflow: hidden;
border: none;
border-radius: 50%;
background-color: var(--jet);
@ -166,30 +174,108 @@ footer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: background-color 200ms ease-in-out;
-o-transition: background-color 200ms ease-in-out;
transition: background-color 200ms ease-in-out;
-webkit-transition:
transform 200ms ease-in-out,
background-color 400ms ease-in-out;
-o-transition:
transform 200ms ease-in-out,
background-color 400ms ease-in-out;
transition:
transform 200ms ease-in-out,
background-color 400ms ease-in-out;
svg {
width: 100%;
height: 100%;
padding: 10%;
flex-shrink: 0;
-webkit-transition:
opacity 400ms ease-in-out,
transform 400ms ease-in-out;
-o-transition:
opacity 400ms ease-in-out,
transform 400ms ease-in-out;
transition:
opacity 400ms ease-in-out,
transform 400ms ease-in-out;
}
svg:nth-child(1) {
fill: var(--white);
width: 90%;
height: 90%;
-webkit-transition: fill 200ms ease-in-out;
-o-transition: fill 200ms ease-in-out;
transition: fill 200ms ease-in-out;
opacity: 1;
}
svg:nth-child(2) {
fill: var(--black);
opacity: 0;
}
&:hover,
&:focus,
&:active {
background-color: var(--black);
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
&--custom-focus {
background-color: var(--white);
svg {
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
svg:nth-child(1) {
opacity: 0;
}
svg:nth-child(2) {
opacity: 1;
}
}
}
.header-bar__nav-menu {
position: fixed;
z-index: 1;
top: 0;
left: 100vw;
min-width: 25vw;
height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow-y: auto;
background-color: var(--transparent-black);
padding: calc(2rem + var(--header-bar-height)) 4rem 2rem 4rem;
-webkit-transition: transform 400ms ease-in-out;
-o-transition: transform 400ms ease-in-out;
transition: transform 400ms ease-in-out;
&--visible {
-webkit-transform: translateX(calc(-1 * 100%));
-ms-transform: translateX(calc(-1 * 100%));
transform: translateX(calc(-1 * 100%));
}
li + li {
margin: 2rem 0 0 0;
}
a {
color: white;
}
}
// ----------------------------------------------------------------------------
@ -573,9 +659,9 @@ footer {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: background-color 200ms ease-in-out;
-o-transition: background-color 200ms ease-in-out;
transition: background-color 200ms ease-in-out;
-webkit-transition: transform 200ms ease-in-out;
-o-transition: transform 200ms ease-in-out;
transition: transform 200ms ease-in-out;
+ a {
margin: 0 0 0 1rem;
@ -590,9 +676,8 @@ footer {
&:hover,
&:focus,
&:active {
background-color: var(--black);
transform: scale(1.1);
}
}

22
assets/js/app.js
View file

@ -23,6 +23,11 @@ let videoPlayers = [];
const headerBar = document.querySelector('.header-bar');
let scrollOffset = 0;
// NAVIGATION MENU ANIMATION //
const mainNavBtn = document.querySelector('.header-bar__nav-button');
const mainNavMenu = document.querySelector('.header-bar__nav-menu');
// ----------------------------------------------------------------------------
// UTILS
// ----------------------------------------------------------------------------
@ -243,6 +248,19 @@ function toggleHeaderBar() {
}
}
// NAVIGATION MENU ANIMATION //
// Show main navigation menu on button click event
function showMainNavMenu() {
if (mainNavBtn && mainNavMenu) {
mainNavBtn.addEventListener('click', function(e) {
mainNavBtn.classList.toggle('header-bar__nav-button--custom-focus');
mainNavMenu.classList.toggle('header-bar__nav-menu--visible');
// document.body.classList.toggle('body--hidden-overflow-y');
});
}
}
// ----------------------------------------------------------------------------
// PROGRAM
// ----------------------------------------------------------------------------
@ -270,3 +288,7 @@ toggleVideosFullScreen();
document.addEventListener('scroll', function() {
toggleHeaderBar();
});
// NAVIGATION MENU ANIMATION //
showMainNavMenu();