Discussion: Menu flex avec IE

  1. #121
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 579
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 579
    Points : 21 184
    Points
    21 184

    Par défaut

    Citation Envoyé par laurentSc Voir le message
    Difficile d'y voir un jeu alors que je cherche à apprendre...
    Là, tu as tout faux : les enfants apprennent en jouant.
    Et ensuite... on apprend tous les jours... chaque jour de la vie...


    Les japonais n'ont qu'UN SEUL mot pour "intéressant" et "amusant" : omoshiroi.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  2. #122
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 579
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 579
    Points : 21 184
    Points
    21 184

    Par défaut

    From JefReb (en MP) :

    " Bonjour Jérôme,
    Je continue et je suis désolé de ne pas avoir suivi strictement tes rêgles quant au font ou autres.
    Mais je comprends et j'ai remis mes pages sur mon établis.
    Je dois dire que je n'avais pas vu et lu tes corrections pour 1, 2, 3, et 4 avant.
    Et je n'utilise pas tab-cell mais flex.
    J'ai juste corrigé avec le truc de flex:1 1 1%; qui ne s'invente pas.
    J'ai évidemment trouvé des redondances et corrigé ... hélas!

    Toutefois, avec l'exercice 4, j'ai toujours le problème de fuite quand inférieur à 640px et je viens de m'apercevoir que tes solutions en 5 et 6 ont le même problème.
    Tu as bien le niveau A, mais dès que tu veux pointer sur B C ou D cela fuit et ne marche pas.
    Voici mes corrections en Flex-box:
    exo1 https://codepen.io/JefReb/pen/rYvmWR
    exo2 https://codepen.io/JefReb/pen/wPjdgP
    exo3 https://codepen.io/JefReb/pen/vWjmmy

    Je continue a chercher pour la suite...
    N'abandonne pas, svp, j'aime beaucoup cette approche et j'apprends encore beaucoup.
    Merci "
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  3. #123
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 579
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 579
    Points : 21 184
    Points
    21 184

    Par défaut

    @JefReb :

    Que veux-tu dire par "problème de fuite", "cela fuit" ?
    Je ne comprends pas.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  4. #124
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    404
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 404
    Points : 535
    Points
    535

    Par défaut

    J'appelle "fuite", c'est le mot le plus approprié pour expliquer le phénomène.

    C'est souvent le cas avec un z-index manquant sur un ul en absolute et un menu horizontal.
    Je vais tenté d'expliquer plus clairement.
    Dans ton codepen pour l'exo6 (https://codepen.io/jreaux62/pen/eeMmxx)
    lorsque tu mets ton navigateur en 640px de large pour simuler un petit écran, il est impossible d'atteindre B,C ou D SAUF si tu commences par le bas en remontant.

    Je viens de revérifier et il y a un problème de fuite si on commence par le haut.
    tu pointes le A et il développe le 2ème niveau, tu descends il développe le 3ème niveau, puis tu veux atteindre le B et hop ... le curseur revient sur le A ... d'où expression fuite.

  5. #125
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    404
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 404
    Points : 535
    Points
    535

    Par défaut

    J'ai repris en faisant phone first comme tu le demandais et à partir de l'exercice 5 pour rattraper le forum ... mais j'utilise flex et non tab-cell
    Exercice 6:
    https://codepen.io/JefReb/pen/LOmJgv

    Mais j'ai toujours ce problème de fuite lorsque width < 640px

  6. #126
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 579
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 579
    Points : 21 184
    Points
    21 184

    Par défaut

    Bonjour,

    Si je comprends bien, c'est le fait que le sous-menu se développe "au survol" (hover) qui devient gênant, dès lors que les menu et sous-menu sont à la vertical.

    Je n'ai traité cette exemple que pour laurentSc... qui ne maîtrise pas jQuery et "veut comprendre"...

    Pour ma part, ça fait longtemps que j'utilise des menus "au clic" (géré via jQuery).
    D'autant plus que hover pose problème sur écran tactile.

    Mais on pourra voir ça plus tard, OK ?
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  7. #127
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    404
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 404
    Points : 535
    Points
    535

    Par défaut

    Je revenais sur le forum pour dire que j'avais compris le problème et que seul un menu vertical au clic résolvait ce problème au demeurant normal.
    J'ai même essayé d'utiliser une transition sur la hauteur, mais cela fait évidement pareil. Donc Jquery ...

    Par contre, sur un menu horizontal il y a parfois des "fuites" sur les menus de niveau 3 ou 4, et c'est souvent dû à l'absence d'un z-index sur l'ul en absolute

  8. #128
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 579
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 579
    Points : 21 184
    Points
    21 184

    Par défaut

    Bonjour JefReb,

    petite correction sur ton code 6 :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    #navMain > ul ul {
    	width:100%;
    	position: absolute;
    	top: 100%;
    	left: 0;
    }
    /*=========== Position à droite du niveau 3 ============*/
    #navMain > ul ul ul {
    	position: absolute;
    	top: 0;
    	left: 100%;
    }
    Le 2ème position: absolute; est redondant (si tu l'enlèves, tu constates que rien ne change)
    C'est déjà défini dans #navMain > ul ul {.
    D'ailleurs, on peut aussi simplement écrire ici : #navMain ul ul {.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  9. #129
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 579
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 579
    Points : 21 184
    Points
    21 184

    Par défaut

    Exercice 7 :
    • Ajouter la class "hasSub" au sous-menu "A - 2" (qui possède un sous-menu)
    • Ajouter la flèche pour ce sous-sous-menu.
    • la positionner à GAUCHE dans le sous-menu (et plus à droite) (ERREUR de ma part ! c'est pour l'exercice suivant !)
    • la faire pointer vers la DROITE (indice : -90deg)
    • :hover : la faire pointer vers la GAUCHE (indice : 90deg)


    Solution Exercice 7 : https://codepen.io/jreaux62/pen/WXzvey

    class "hasSub" au sous-menu
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
            <li class="hasSub">
    Ensuite, ça concerne DESKTOP
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    /* TABLET + DESKTOP -(plus de 640px)  */
    @media screen and (min-width: 641px) {
      /*.......... */
     
      /* flèche (pour menu avec sous-menu niveau 3) */
      #navMain ul ul li.hasSub:after {
        -ms-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg); /* orientée vers la droite */
      }
      #navMain ul ul li.hasSub:hover:after {
        -ms-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg); /* orientée vers la gauche */
      }
    }
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  10. #130
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    404
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 404
    Points : 535
    Points
    535

    Par défaut

    Effectivement je pouvais encore simplifier.
    J'ai corrigé et fini l'exercice n°7, mais j'attends un peu que Laurent se manifeste. Je ne vois plus de post de sa part ...
    Il continue? Ce serait dommage qu'il arrête.
    A plus tard.

  11. #131
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 208
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 208
    Points : 2 618
    Points
    2 618
    Billets dans le blog
    1

    Par défaut

    T'inquiète JefReb, j'ai pas abandonné. Si je ne manifeste pas beaucoup, c'est que je n'ai pas beaucoup de temps à consacrer au sujet. Comme déjà dit, j'ai vu que Jérôme avait commencé à donner des solutions mais avant de regarder son code, j'essaye de le faire moi-même (puis je regarde les solutions pour apprendre !). Pour l'instant, je n'ai fait que les 3 1ers exercices !
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  12. #132
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 208
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 208
    Points : 2 618
    Points
    2 618
    Billets dans le blog
    1

    Par défaut

    Bonsoir,
    je coince sur l'exercice 4 et même la solution de Jérôme ne me suffit pas pour corriger !

    https://codepen.io/laurentsc/pen/JOZmyQ

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <nav id="navMain">
      <ul>
        <li>
          <a href="#">A - One</a>
          <ul>
            <li>
              <a href="#">A - 1</a>
            </li>
            <li>
              <a href="#">A - 2</a>
            </li>
            <li>
              <a href="#">A - 3</a>
            </li>
            <li>
              <a href="#">A  - 4</a>
            </li>
          </ul>
        </li>
        <li>
        <li><a href="#">B - Two</a></li>
        <li><a href="#">C - Three</a></li>
        <li><a href="#">D - Four</a></li>
      </ul>
    </nav>

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    * { 
      margin:0; 
      padding:0; 
      border:0; }
    html, body { 
      font-family:Arial,sans-serif; 
      font-size:100%; }
     
    #navMain a {
      display:block; /* block, au lieu de inline : le lien cliquable prend toute la largeur de son parent */
      padding:10px;
      font-family:Arial, sans-serif;
      color: #fff;
      background: #2980b9;
      text-decoration: none; /* ne pas souligner les liens */
    }
     
     
    #navMain a:hover {
      background: #20638f; /*change la couleur de fond*/
    }
     /* MENU */
    #navMain ul,
    #navMain li {
      list-style: none;
    }
    /* ------------------------------- */
     
    /* ------------------------------------------------------ */
    /* TABLET+DESKTOP (largeur de fenetre supérieure à 640px) */
    /* on utilise les media queries pour modifier les styles  */
    /* ------------------------------------------------------ */
    /* MENU HORIZONTAL, centré - largeur 100%  */
    @media screen and (min-width: 641px) 
    {
      #navMain > ul {/* slt niveau 1 */
        display:table; /* se comporte comme une table */
        width:50%; /* largeur du menu */
        margin:0 auto;/* centrage. Notez aussi le très pratique margin:auto qui permet, dans le cas d'un bloc muni d'une largeur, de centrer horizontalement un élément.*/
        min-width:640px;
      }
      #navMain > ul > li { 
        display:table-cell; /* se comporte comme une cellule de table */
        width:1%; /* astuce, pour que toutes les cellules aient la même largeur */
      }
      #navMain ul li {/* on positionne le parent des niveau 2 pour que le position de l'enfant soit pris en compte */
      position:relative;
    }
    #navMain ul ul {/* menus de niveau 2*/
      position:absolute;
      display:none;
      } 
    #navMain ul ul a {
       background:#333;
      }
      #navMain ul li:hover > ul {
      display:block;/*on affiche menu niveau 2 au survol */
    }
    }

    Les problèmes :
    - j'arrive pas à enlever les puces du sous-menu malgré les lignes 23 à 26
    - écart entre les menus A et B

    une question : pourquoi ligne 53 on doit mettre un a alors que le sous-menu dont on veut fixer la couleur de fond, c'est le <ul> ?
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  13. #133
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 579
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 579
    Points : 21 184
    Points
    21 184

    Par défaut

    Bonjour,

    1- je ne vois pas de puce

    2- erreur dans ton code html

    3- les ul n'ont pas de couleur de fond. Les a, si.
    Mais tu n'as pas tout-à-fait tord : on aurait pu définir une couleur de fond pour les ul... mais ça n'a pas d'intérêt ici.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  14. #134
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    404
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 404
    Points : 535
    Points
    535

    Par défaut

    Jerome, sans vouloir te vexer, c'est toi qui a mis l'erreur dans le code html dans un des post (115) pour l'exercice.
    Je l'avais vu car elle me provoquait des erreur mais j'ai oublié de te le signaler.
    Cela m'avait fait galérer et je suppose que Laurent a le même problème.

  15. #135
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 579
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 579
    Points : 21 184
    Points
    21 184

    Par défaut

    C'est bien pour ça que j'ai dit de ne pas copier-coller bêtement.

    Vous tombez dans le moindre piège qu'on vous tend (volontairement ou pas).
    Et je n'ai jamais prétendu que mon code était le meilleur, ni le seul possible.

    A vous de faire preuve d'initiative, et de curiosité.


    N.B. <li> en trop dans le code HTML :
    Je vais néanmoins expliquer pourquoi je n'avais pas d'erreur (visuellement) dans mes codes, alors que vous oui :

    Moi, je n'avais pas mis width:1%; ici :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
      #navMain > ul > li { /* uniquement le niveau 1 */
        display: table-cell; /* se comporte comme une cellule table */
        width:1%;
      }
    • SANS width:1%;, le <li> vide prend une largeur nulle. On ne le voit pas.
    • AVEC width:1%;, le <li> vide prend une largeur non nulle, donc VISIBLE à l'écran. Donc, on peut prendre l'INITIATIVE de CORRIGER ! (ça m'a pris 10 secondes pour voir d'où venait le problème...)


    Pour moi, cette erreur n'était pas VISIBLE à l'écran !
    PAR CONTRE, si j'avais inspecté * le code HTML généré (clic droit -> "Code Source" ou "Ctrl"+"U"), j'aurais vu qu'il y a une erreur (coloration en rouge : "<li> ouvert, mais pas de balise de fermeture").
    (* pas dans codepen, mais dans une page à part)


    Je viens de corriger tous mes codes..... ET VOUS ?
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  16. #136
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 579
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 579
    Points : 21 184
    Points
    21 184

    Par défaut

    Exercice 8 :
    • Ajouter un sous-menu et un sous-sous-menu au menu "D"(le dernier)
    • Reprendre les exercices précédents, mais comme c'est le DERNIER du menu, le sous-sous-menu doit s'afficher À GAUCHE de son parent
    • on change aussi le sens des flèches pour ce DERNIER menu : pointant à GAUCHE, et au survol à DROITE
    • la positionner à GAUCHE dans le sous-menu (et plus à droite)


    Solution Exercice 8 : https://codepen.io/jreaux62/pen/MOVwKx
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    <nav id="navMain">
    ....
        <li class="hasSub">
          <a href="#">D - Four</a>
          <ul>
            <li>
              <a href="#">D - 1</a>
            </li>
            <li class="hasSub">
              <a href="#">D - 2</a>
              <ul>
                <li>
                  <a href="#">D - 2.1</a>
                </li>
                <li>
                  <a href="#">D - 2.2</a>
                </li>
                <li>
                  <a href="#">D - 2.3</a>
                </li>
                <li>
                  <a href="#">D - 2.4</a>
                </li>
                <li>
                  <a href="#">D - 2.5</a>
                </li>
                <li>
                  <a href="#">D - 2.6</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">D - 3</a>
            </li>
            <li>
              <a href="#">D - 4</a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
      /* DERNIER MENU (niveau 1) : */
      /* on affiche le sous-sous-menu (niveau 3) à GAUCHE, on inverse le sens des flèches */
      #navMain > ul > li:last-child > ul li.hasSub:hover > ul {
        top: 0;
        left: -100%; /* A GAUCHE du niveau 2 */
      }
      #navMain > ul > li:last-child > ul li.hasSub:after {
        left: 2px; /* positionné à gauche dans le sous-menu */
        right: auto; /* on doit annuler la directive précédemment indiquée : right: 10px; */
        -ms-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
      }
      #navMain > ul > li:last-child > ul li.hasSub:hover:after {
        -ms-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
      }

    Exercice 10 : a été traité dans ce message.

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    /* menu niveau 1 : horizontal */
    #navMain ul {
      display: -webkit-flex; display: flex;
     
    }
    #navMain li {
      -webkit-flex: 1 1 1%; flex: 1 1 1%; /* 1% : astuce pour que tous aient la même largeur */
    }
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  17. #137
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 579
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 579
    Points : 21 184
    Points
    21 184

    Par défaut

    Un dernier mot (?) :

    Pour les écrans TACTILES : il faut désactiver les liens des menus AVEC sous-menu.
    Car hover et clic se confondent.

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
        <li class="hasSub">
          <a href="javasrcipt:void();return false;">A - One</a>
          <ul>
            <li>

    Voici une solution plus complète : https://codepen.io/jreaux62/pen/gXweLY
    Si vous avec des questions....



    N.B. Menu "au clic" (en JavaScript/jQuery) : https://codepen.io/jreaux62/pen/dPxKKQ
    Ca pourra faire l'objet d'une nouvelle discussion, si ça vous intéresse...
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  18. #138
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    404
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 404
    Points : 535
    Points
    535

    Par défaut

    Jérome, je suis, bien sûr, très intéressé par le menu "au clic".
    Et je n'ai pas attendu pour essayer de comprendre les exemples que tu as déjà donné dans ce foruym.
    Toutefois, je n'ai jamais investi dans le javascript et je n'ai pas cherché à programmer.
    Sûr, je sais reconnaître et modifier le nom de classe ou d'id, mais écrire ou modifier une fonction c'est déjà plus délicat.
    Mais je sais utiliser JQuery, pour l'avoir déjà utilisé, et cela facilement en utilisant les fonctions déjà prêtes.
    Donc oui, si tu démarres des exercices comme le menu horizontal et vertical présent, je suis partant.
    Cela devient d'ailleurs très intéressant, et notamment pour les débutants. Il faudrait presque un forum "à part" afin que les solutions ne soient pas trop visibles facilement.

    bon en attendant et suivant toutes tes recommandations voici l'exercice 8 en Flex que j'ai fait:
    https://codepen.io/JefReb/pen/RjBwNV

    à noter, que j'utilise
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    li:nth-last-child(-n+1)
    au lieu de ce qui permet aussi de cibler facilement l'avant dernier avec
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    li:nth-last-child(-n+2)
    sans ajouter du code ...

  19. #139
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    6 208
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 6 208
    Points : 2 618
    Points
    2 618
    Billets dans le blog
    1

    Par défaut

    Citation Envoyé par jreaux62 Voir le message
    Vous tombez dans le moindre piège qu'on vous tend (volontairement).
    c'est pas très gentil ...
    et en plus, tu récidives au post #137 <a href="javasrcipt:void();return false;">Bon, comme, de même, le bug n'était pas tout le temps visible (selon le CSS), je n'avais pas pensé à regarder le html.

    Pareil, ce matin, je vois plus la puce

    Merci pour l'explication de la couleur de fond sur les a et pas les ul.

    L'exercice 4 est au point (mais plus dispo aujourd'hui (sauf peut-être en fin d'après-midi mais pas ce soir (ni demain matin !))

    Moi aussi, intéressé par le menu au clic/jQuery, mais contrairement à JefReb, si je connais (un tout petit peu) le js, j'ai déjà écrit des fonctions mais jamais utilisé le jQuery. Ton menu, c'est un peu lourd à appréhender ; Est-ce que tu peux y aller pas à pas ?
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  20. #140
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 579
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 579
    Points : 21 184
    Points
    21 184

    Par défaut

    @JefReb
    Correction Exercice 8

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	box-sizing: border-box;		/* taille des boites width= contenu + padding + border */
    }
    html, body {
    	font-family: Arial, sans-serif;
    	fonts-size: 100%;
    	font-size: 100%;
    }
    /*=========== définition commune =======================================*/
    #navMain ul, #navMain li {
    	list-style-type: none;
    }
    #navMain a {
    	width: 100%;
    	display: block;
    	padding: 10px 15px;
    	background-color: #2980b9;
    	color: #fff;
    	text-decoration: none;
    }
    #navMain li li a {
    	background: #333;
    }
    #navMain a:hover {
    	background: #20638f;
    	text-decoration: underline;
    }
    #navMain > ul ul {
    	display: none;
    }
    #navMain li:hover > ul {
    	display: block;
    }
    /*=========== mise en place d'une flèche ====================*/
    /*======= On cible tous les niveaux         =================*/
    #navMain li.hasSub:after {
    	position: absolute;
    	content: "\25BC";
    	font-size: 16px;
    	color: #fff;
    	top: 10px;
    	right: 10px;
    }
    #navMain li.hasSub:hover::after {
    	-ms-transform: rotate(180deg);
    	-webkit-transform: rotate(180deg);
    	transform: rotate(180deg);
    }
    #navMain li li li a {
    	background: #444;
    }
    /*======================================================*/
    /*=============== Pour phone et < 640px  ===============*/
    /*======================================================*/
    @media screen and (max-width: 640px) {
    #navMain ul, #navMain li {
    	position: relative;
    	top: 0;
    	left: 0;
    }
    #navMain ul ul > li.hasSub::after {
    	-webkit-transform: rotate(0deg);
    	transform: rotate(0deg);
    }
    #navMain ul ul > li.hasSub:hover::after {
    	-webkit-transform: rotate(180deg);
    	transform: rotate(180deg);
    }
    }
    /*======================================================*/
    /*=============== Pour desktop et >640px ===============*/
    /*======================================================*/
    @media screen and (min-width: 641px) {
    /*==== Utilisation de flex pour rendre horizontal ======*/
    #navMain > ul {
    	display: -webkit-flex;
    	display: flex;
    	-webkit-justify-content: center;
    	justify-content: center;		/* centrons le texte */
    }
    #navMain > ul > li {
    	-webkit-flex: 1 1 1%;
    	flex: 1 1 1%;
    }
    #navMain > ul {
    	width: 50%;
    	min-width: 640px;
    	margin: 0 auto;
    }
    /*================= Définition du niveau 2 ==============*/
    #navMain li {
    	position: relative;
    	min-width: 180px;
    }
    #navMain > ul ul {
    	width: 100%;
    	position: absolute;
    	top: 100%;
    	left: 0;
    }
    /*=========== Position à droite du niveau 3 ============*/
    #navMain > ul ul ul {
    	top: 0;
    	left: 100%;
    }
    /*========= Orientation horizontal de la flèche ========*/
    #navMain ul ul > li.hasSub::after {
    	-webkit-transform: rotate(-90deg);
    	transform: rotate(-90deg);
    }
    #navMain ul ul > li.hasSub:hover::after {
    	-webkit-transform: rotate(90deg);
    	transform: rotate(90deg);
    }
    /*========  je cible  le dernier ===========================*/
    /* :nth-last-child(-n+1) = :last-child =====================*/
    #navMain > ul > li:nth-last-child(-n+1) ul ul {
    	left: -100%;
    }
    #navMain > ul > li:nth-last-child(-n+1) > ul > li.hasSub:hover::after {
    	-webkit-transform: rotate(-90deg);
    	transform: rotate(-90deg);
    }
    #navMain > ul > li:nth-last-child(-n+1) > ul > li.hasSub::after {
    	-webkit-transform: rotate(90deg);
    	transform: rotate(90deg);
    }/* Décalons à gauche la flèche*/
    #navMain > ul ul a {
    	padding-left: 40px;
    }
    #navMain > ul > li:nth-last-child(-n+1) li.hasSub:after {
    	right: auto;
    	left:10px;
    }
    }

    1- ligne 9 : enlève fonts-size: 100%; (ça n'existe pas)

    2- ligne 14 : regarde la différence entre list-style-type et list-style.

    3- ligne 18 : enlève width: 100%; ici :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    #navMain a {
    	width: 100%;
    	display: block;
    A partir du moment où c'est en display:block; PAR DEFAUT la largeur est 100%;

    4- ligne 47 : il manque la couleur jaune des flèches au survol

    5- lignes 59 à 71 : REDONDANTES et/ou inutiles (TOUT à enlever). Pourtant, je l'ai dit et expliqué.

    6- regarde la "Compatibilité des navigateurs" de transform pour savoir quels préfixes sont nécessaires.

    Et je crois que c'est tout...




    QUESTION SUBSIDIAIRE :
    • PAR QUOI peut-on REMPLACER ce bout de code, SANS utiliser transform:rotate ? (indice : caractères unicode)

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     #navMain li.hasSub:hover::after {
    	-ms-transform: rotate(180deg);
    	-webkit-transform: rotate(180deg);
    	transform: rotate(180deg);
    }
    Idem pour :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    #navMain > ul > li:nth-last-child(-n+1) > ul > li.hasSub:hover::after {
    	-webkit-transform: rotate(-90deg);
    	transform: rotate(-90deg);
    }
    #navMain > ul > li:nth-last-child(-n+1) > ul > li.hasSub::after {
    	-webkit-transform: rotate(90deg);
    	transform: rotate(90deg);
    }
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

Discussions similaires

  1. tableau extensible en php ou html
    Par haamdi dans le forum Scripts
    Réponses: 4
    Dernier message: 06/07/2012, 15h39
  2. PHP avec extension HTML
    Par jeffer dans le forum Débuter
    Réponses: 3
    Dernier message: 10/11/2009, 10h50
  3. Réponses: 1
    Dernier message: 21/08/2008, 11h47
  4. passer d'une page html vers PHP
    Par @min@ dans le forum Formulaires
    Réponses: 5
    Dernier message: 06/04/2007, 21h34
  5. Probleme pour passer de l'écriture html a php
    Par cyberdevelopment dans le forum Syntaxe
    Réponses: 2
    Dernier message: 18/08/2006, 18h24

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