IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

le menu cache-cache !


Sujet :

JavaScript

  1. #1
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    novembre 2020
    Messages
    151
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Indre et Loire (Centre)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : novembre 2020
    Messages : 151
    Points : 80
    Points
    80
    Par défaut le menu cache-cache !
    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 !

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    8 442
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 8 442
    Points : 13 082
    Points
    13 082
    Par défaut
    si vous avez du code en double, il est peut-être possible de le factoriser en utilisant une fonction.

Discussions similaires

  1. sous menu caché
    Par belek94 dans le forum Général JavaScript
    Réponses: 13
    Dernier message: 07/07/2008, 14h01
  2. problème Feuille MDI : menu caché
    Par vbstman dans le forum VB 6 et antérieur
    Réponses: 2
    Dernier message: 04/01/2008, 09h52
  3. Menu caché par Canvas
    Par Mnwjin dans le forum AWT/Swing
    Réponses: 2
    Dernier message: 01/12/2006, 19h58
  4. Menu caché au depart
    Par yavajo dans le forum GTK+ avec C & C++
    Réponses: 3
    Dernier message: 19/10/2006, 20h12
  5. Options du menu cachés sous un Panel.
    Par Franckito dans le forum AWT/Swing
    Réponses: 10
    Dernier message: 22/09/2006, 11h38

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo