Préparation toggle classe pour menu mobile
This commit is contained in:
parent
c98a587f59
commit
1fed4e9a8e
4 changed files with 44 additions and 0 deletions
|
@ -1,3 +1,20 @@
|
||||||
|
/* La propriété CSS box-sizing définit la façon dont la hauteur et la largeur totale d'un élément est calculée (avec le modèle de boîte CSS).
|
||||||
|
// Références: https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing*/
|
||||||
|
|
||||||
|
html {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
box-sizing: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
body{
|
body{
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,9 @@
|
||||||
.header {
|
.header {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 20;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
top: 0;
|
||||||
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.headerWrapper{
|
.headerWrapper{
|
||||||
|
|
0
public/js/header.js
Normal file
0
public/js/header.js
Normal file
|
@ -0,0 +1,23 @@
|
||||||
|
/** Création et exportation de la classe Header */
|
||||||
|
export default class Header {
|
||||||
|
constructor(element) {
|
||||||
|
this.element = element;
|
||||||
|
this.html = document.documentElement;
|
||||||
|
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Méthode d'initialisation
|
||||||
|
*/
|
||||||
|
init() {
|
||||||
|
const toggle = this.element.querySelector('.js-toggle');
|
||||||
|
toggle.addEventListener('click', this.onToggleNav.bind(this));
|
||||||
|
|
||||||
|
}
|
||||||
|
onToggleNav() {
|
||||||
|
// Enlever la classe .is-scrolling-down pour éviter les bugs si l'on fait défiler la page jsute après l'ouverture du menu
|
||||||
|
this.html.classList.toggle('nav-is-active');
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
Loading…
Reference in a new issue