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{
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
@ -1,5 +1,9 @@
|
|||
.header {
|
||||
position: fixed;
|
||||
z-index: 20;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.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