Discussion :

[Ushuango]

Bonjour à tous !

Mon menu fonctionne bien ! mais je voudrais qu'il joue à cache-cache.
Cela dit, il joue déjà bien à cache-cache, mais je voudrais trouver une autre manière de faire : plus propre !

Donc voici:

un header avec
- un bloc div qui contient un titre et une icône hamburger , le tout placé à gauche
- un bloc div avec le titre, au centre
- un dernier bloc avec des liens, à droite

Somme toute, un header classique !

ce header est masqué par l'image Hero ! et il apparaît lorsqu'on a scrollé suffisamment pour sortir du Hero: lorsque l'image hero a disparut de l'écran !
Je m'en sort très simplement avec les z-index qui vont bien sur la classe logo !
Ceci fonctionne pour toutes les tailles d'écran !

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<header>
    <div class="logo d-flex justify-content-between align-items-center">
        <div class="menuHamburger2">
            <h2>Menu</h2>
            <div>icône hamburger en svg </div>
        <div class="truc">autre élément du header</div>
        <div class="autreTruc">dernier élément du header</div>
    </div>
</header>

css de la classe logo :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
position: fixed;
top: 0;
z-index: 30;

Rajoutons la difficulté, pour une résolution de 1200px et plus :
le bloc div avec titre et icône hamburger apparaît en haut à gauche (par-dessus l'image hero donc), mais pas tout le header, juste cette partie du header !
Et bien sûr , il reste en haut lorsqu'on scrolle. Mais aussi, il réapparaît lorsqu'on a passé le hero !!!

J'ai fait le faignant, parce que je sais bien faire ça!
J'ai dupliqué le bloc div en question, avec un autre nom de classe et le z-index qu'il faut (et des medias-queries évidemment: display: none pour la classe menuHamburger2 tant qu'on est pas en 1200Px)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<header>
    <div class="menuHamburger1">duplication du div menuHamburger2</div>
    <div class="logo d-flex justify-content-between align-items-center">
        <div class="menuHamburger2">
            <h2>Menu</h2>
            <div>icône hamburger en svg </div>
        <div class="truc">autre élément du header</div>
        <div class="autreTruc">dernier élément du header</div>
    </div>
</header

Et si on clique dessus: un menu apparaît ( c'est le but d'un menu !)
Et avec ma méthode: en javascript, il va falloir que je fasse un addEventListener sur ces deux éléments !!!!

Pour l'instant, ça fonctionne bien comme ça, mais si je pouvais ne pas dupliquer du code, ça serait plus correct !
La solution serait du bon javascript: pour l'instant un sacré casse-tête !

La seule idée que j'ai pour le moment:
en-dessous de 1200px on fait comme au début ! On ne change rien ça marche déjà !
À partit de 1200px, plus de menuHamburger2 mais un menuHamburger1: on sort le menuHambuger de la div(classe logo)
Puis, lorsqu'on à scrollé de plus loin que la hauteur du menuHamburger, on le remet dans la div de classe logo !

Il faut surveiller le scroll, et je ne sais pas comment faire ça !

[mathieu]

si vous avez du code en double, il est peut-être possible de le factoriser en utilisant une fonction.