Discussion: Menu flex avec IE

  1. #141
    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

    1) Bon d'accord le font et fonts ... faute d'inattention... un oeil neuf s'imposait.
    2) List-style est la propriété raccourcie de list-style-type et donc qui peut le plus peut le moins donc je vois pas trop ...
    3) Bon ça je ne savais pas que display:block induit Width=100% (je prends note)
    4) color:yellow, j'avais zeappé (un coup mis un coup oublié)
    5) Encore un zap hum dur dur ...
    6) Je regarde les prefixes ... pas le temps tout de suite ...
    7)
    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
     
    #navMain li.hasSub:after {
    	position: absolute;
    	content: "\25BC";
    	font-size: 16px;
    	top: 10px;
    	right: 10px;
    	color:yellow;
    }
    #navMain li.hasSub:hover::after {
    	content: "\25B2";
    }
    ...
    ...
    #navMain ul ul > li.hasSub::after {
    	content: "\25BA";	
    }
    #navMain ul ul > li.hasSub:hover::after {
    	content: "\25C4";	
    }
    ...
    ...
    #navMain > ul > li:nth-last-child(-n+1) > ul > li.hasSub:hover::after {
    	content: "\25C4";
    }
    #navMain > ul > li:nth-last-child(-n+1) > ul > li.hasSub::after {
    	content: "\25BA";
    }

    c'est quand même plus simple

  2. #142
    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érôme, dans le post 137 et "une solution plus complète" n'est-il pas plus simple de coder?:
    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
    #navMain > ul > li > ul > li > ul {
    	left: 100%;
    	top: 0; /*à droite*/
    	z-index: 1;
    }
    #navMain > ul > li:nth-last-child(-n+2) > ul > li > ul {
    	left: -100%;
    	top: 0; /*dernier à gauche*/
    	z-index: 1;
    }
    /*SPECIAL : SOUS-SOUS-SOUS-MENU niveau 4 à gauche*/
    #navMain > ul > li > ul > li > ul > li > ul {
    	left: 100%;
    	top: 0; /*à droite*/
    	/*left: -100%; top: 0;*/ /*à gauche*/
    	z-index: 1;
    }
    #navMain > ul > li:nth-last-child(-n+2) > ul > li > ul > li > ul {
    	left: -100%;
    	top: 0; /*dernier à gauche*/
    	/*left: 100%; top: 0;*/ /*dernier droite*/
    	z-index: 1;
    }
    /* ------------------------------- */
    /* fleche, avec rotation - niveaux 2 et suivants */
    #navMain > ul > li:nth-last-child(-n+2) ul li.hasSub:after {
    	right: auto;
    	left: 10px; /* à gauche */
    }
    #navMain > ul > li:nth-last-child(-n+2) ul li.hasSub:hover:after,  #navMain ul ul li.hasSub:after {
    	-o-transform: rotate(-90deg);
    	-ms-transform: rotate(-90deg);
    	-moz-transform: rotate(-90deg);
    	-webkit-transform: rotate(-90deg);
    	transform: rotate(-90deg);
    }
    #navMain > ul > li:nth-last-child(-n+2) ul li.hasSub:after,  #navMain ul ul li.hasSub:hover:after {
    	-o-transform: rotate(90deg);
    	-ms-transform: rotate(90deg);
    	-moz-transform: rotate(90deg);
    	-webkit-transform: rotate(90deg);
    	transform: rotate(90deg);
    }
    que
    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
     #navMain > ul > li > ul > li > ul {
        left: 100%; top: 0; /*à droite*/
        z-index: 1;
      }
      #navMain > ul > li:nth-last-child(2) > ul > li > ul, /*avant-dernier*/
      #navMain > ul > li:last-child > ul > li > ul {
        left: -100%; top: 0; /*dernier à gauche*/
        z-index: 1;
      }
      /*SPECIAL : SOUS-SOUS-SOUS-MENU niveau 4 à gauche*/
      #navMain > ul > li > ul > li > ul > li > ul {
        left: 100%; top: 0; /*à droite*/
        /*left: -100%; top: 0;*/ /*à gauche*/
        z-index: 1;
      }
      #navMain > ul > li:nth-last-child(2) > ul > li > ul > li > ul, /*avant-dernier*/
      #navMain > ul > li:last-child > ul > li > ul > li > ul {
        left: -100%; top: 0; /*dernier à gauche*/
        /*left: 100%; top: 0;*/ /*dernier droite*/
        z-index: 1;
      }
    /* ------------------------------- */
    /* fleche, avec rotation - niveaux 2 et suivants */
      #navMain > ul > li:nth-last-child(2) ul li.hasSub:after, /*avant-dernier*/
      #navMain > ul > li:last-child ul li.hasSub:after {
        right: auto; left: 10px; /* à gauche */
      }
      #navMain > ul > li:nth-last-child(2) ul li.hasSub:hover:after, /*avant-dernier*/
      #navMain > ul > li:last-child ul li.hasSub:hover:after,
      #navMain ul ul li.hasSub:after {
        -o-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
      }
      #navMain > ul > li:nth-last-child(2) ul li.hasSub:after, /*avant-dernier*/
      #navMain > ul > li:last-child ul li.hasSub:after,
      #navMain ul ul li.hasSub:hover:after {
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
      }

  3. #143
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 581
    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 581
    Points : 21 188
    Points
    21 188

    Par défaut

    Bonjour Jef,
    c'est possible...
    Je n'ai pas cherché vraiment à optimiser ce code, vu que je ne l'utilise pas ! (j'utilise celui "au clic")

    Tu as raison : :nth-last-child(-n+2) permet de cibler les DEUX derniers <li> ! (comme quoi on en apprend tous les jours !)
    Et remplace donc avantageusement :last-child + :nth-last-child(2)

    En fait, il faut équilibrer entre "optimisation" (factorisation du code) et "lisibilité" (compréhension du code).
    Si on "optimise" trop, le risque est de ne plus trop comprendre qui fait quoi et où (ce qui peut être gênant pour la maintenance du code).

    Ce qui est sûr, c'est qu'on peut factoriser le z-index (entre autres) :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    #navMain ul,
    #navMain li {
      position: relative;
      list-style: none;
      z-index:1;
    }
    et on l'enlève partout ailleurs.
    "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. #144
    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 suis d'accord mais j'ai été étonné du nombre de z-index dans ton exemple.
    En les retirant tous, Je n'ai pas vu de changements significatifs.
    https://codepen.io/JefReb/pen/dZqRPo
    Je sais que le z-index supprime la fuite, parfois, des sous-menus. mais je ne l'ai pas trouvé dans ton codepen.

    Mais peut-être que cela est important lorsque cet exemple n'est pas seul, mais incorporé dans une page html.

  5. #145
    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

    une question sur l'exercice 5.
    Le code CSS est :
    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
    * { 
      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;
    }
     
    #navMain ul ul {/* menus de niveau 2*/
      position:relative;
      width:100%;
      display:none;
      } 
    #navMain ul ul a {
       background:#333;
      }
      #navMain ul li:hover > ul {
      display:block;/*on affiche menu niveau 2 au survol */
    }
    /* flèche */
    #navMain li.hasSub:after {
        position:absolute;
        content:"\25BC";
        color:#fff;
        top: 10px;
      right: 10px;
    }
    #navMain li:hover.hasSub:after {
      color:yellow;
       -ms-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
    }
     
    /*---------------- */
     
    /* ------------------------------------------------------ */
    /* 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;
    }
       /* niveau 2 (et suivants) */
      #navMain ul ul {
        position: absolute; /* positionné en absolu (SORT DU FLUX) */
        width: 100%;
        top:100%; left:0; /* sous le niveau 1 */
      }
     
    }
    La question est pourquoi on doit mettre #navMain ul ul en position: absolute; (ligne 79) (si on le positionne en relative, ça bagotte au hover, donc pourquoi faut-il le sortir du flux ?)

    https://codepen.io/laurentsc/pen/zPJyRN
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  6. #146
    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

    Laurent,
    ul n'est pas positionné en relatif mais c'est plutôt li
    c'est le li en relatif qui contient le ul en absolute, ce qui permet de positionner avec left et top etc.

  7. #147
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 581
    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 581
    Points : 21 188
    Points
    21 188

    Par défaut

    Bonjour Laurent,

    As-tu testé le menu avec un bloc de texte en dessous du menu ?
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <div>Adseverantes funditabat Maxima Asbolius Chilo ilico praefectum funditabat urbi in palaestrita tali aruspex quos coniux.</div>

    Si les sous-menus sont en relative, ils restent dans le flux.
    Du coup, ils "poussent" le bloc de texte vers le bas pour prendre la place.

    En absolute, ils sortent du flux, et s'affichent AU-DESSUS* du bloc de texte.

    * Il faut (parfois) ajouter un z-index aux sous-menus pour qu'ils passent bien AU-DESSUS, et pas en dessous.
    "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

  8. #148
    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

    Merci pour vos réponses. C'est cette phrase
    Si les sous-menus sont en relative, ils restent dans le flux.
    Du coup, ils "poussent" le bloc de texte vers le bas pour prendre la place.
    qui m'a le plus aidé à comprendre.
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  9. #149
    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
    4b- DESKTOP :
    On va devoir positionner le sous-menu en absolute, pour qu'il puisse SORTIR DU FLUX et s'afficher EN DESSOUS de son parent !
    Pour ça, il faut aussi que le parent (<li>) soit positionné
    Je viens de constater que l'explication du post #115 m'aurait aussi aidé
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  10. #150
    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

    Maintenant une question sur le 6 (pas trouvé en regardant la solution de Jérôme) (Je me la posais jusqu'à 16h00 mais ai trouvé la réponse à 16h09 ! Je maintiens ce post car je veux conserver l'explication) :
    https://codepen.io/laurentsc/pen/MOqNQa/

    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
    42
    43
    44
    <nav id="navMain">
      <ul>
        <li class="hasSub">
          <a href="#">A - One</a>
          <ul>
            <li>
              <a href="#">A - 1</a>
            </li>
            <li>
              <a href="#">A - 2</a>
              <ul>
                <li>
                  <a href="#">A - 2.1</a>
                </li>
                <li>
                  <a href="#">A - 2.2</a>
                </li>
                <li>
                  <a href="#">A - 2.3</a>
                </li>
                <li>
                  <a href="#">A - 2.4</a>
                </li>
                <li>
                  <a href="#">A - 2.5</a>
                </li>
                <li>
                  <a href="#">A - 2.6</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">A - 3</a>
            </li>
            <li>
              <a href="#">A - 4</a>
            </li>
          </ul>
        </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
    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
    * { 
      margin:0; 
      padding:0; 
      border:0; }
    html, body { 
      font-family:Arial,sans-serif; 
      font-size:100%; }
    #navMain li {
      position:relative; /* nécessaire pour positionner les sous-menus et les flèches ! */
    }
     
    #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;
      top:100%; left:0; /* sous le niveau 1 */
    }
     
    #navMain ul ul,#navMain ul ul ul {/* menus de niveau 2*/
      position:relative;
      width:100%;
      display:none;
      } 
    #navMain ul ul a {
       background:#333;
      }
    #navMain ul ul ul a {
       background:#444;
      }
    #navMain ul li:hover > ul {
      display:block;/*on affiche menu niveau 2 au survol */
    }
    /* flèche */
    #navMain li.hasSub:after {
        position:absolute;
        content:"\25BC";
        color:#fff;
        top: 10px;
      right: 10px;
    }
    #navMain li:hover.hasSub:after {
      color:yellow;
       -ms-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
    }
     
    /*---------------- */
     
    /* ------------------------------------------------------ */
    /* 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;
    }
       /* niveau 2 (et suivants) */
     
      #navMain ul ul {
        position: absolute;/* positionné en absolu (SORT DU FLUX) */
        width: 100%;
        top:100%; /* positionné en absolu SOUS le niveau 1 */
        left:0;
      }
      /* niveau 3 (et suivants) */
      #navMain ul ul ul {
        position: absolute;/* positionné en absolu (SORT DU FLUX) */
        top:0;
        left:100%; /* A DROITE du niveau 2 */
     
    }
    }

    Contrairement à la solution de Jérôme, chez moi, le sous-sous-menu (A-2.1->A-2.6) ne s'affichait pas en face de A-2 mais démarrait en-dessous. Son positionnement en absolute (j'ai rajouté la ligne 94) a résolu le problème
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  11. #151
    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

    Coucou, j'ai retrouvé 5 minutes pour continuer !
    Exercice 7 : https://codepen.io/laurentsc/pen/zpYoJp

    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
    42
    43
    44
    <nav id="navMain">
      <ul>
        <li class="hasSub">
          <a href="#">A - One</a>
          <ul>
            <li>
              <a href="#">A - 1</a>
            </li>
            <li class="hasSub">
              <a href="#">A - 2</a>
              <ul>
                <li>
                  <a href="#">A - 2.1</a>
                </li>
                <li>
                  <a href="#">A - 2.2</a>
                </li>
                <li>
                  <a href="#">A - 2.3</a>
                </li>
                <li>
                  <a href="#">A - 2.4</a>
                </li>
                <li>
                  <a href="#">A - 2.5</a>
                </li>
                <li>
                  <a href="#">A - 2.6</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#">A - 3</a>
            </li>
            <li>
              <a href="#">A - 4</a>
            </li>
          </ul>
        </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
    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
    * { 
      margin:0; 
      padding:0; 
      border:0; }
    html, body { 
      font-family:Arial,sans-serif; 
      font-size:100%; }
    #navMain li {
      position:relative; /* nécessaire pour positionner les sous-menus et les flèches ! */
    }
     
    #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;
      top:100%; left:0; /* sous le niveau 1 */
    }
     
    #navMain ul ul,#navMain ul ul ul {/* menus de niveau 2*/
      position:relative;
      width:100%;
      display:none;
      } 
    #navMain ul ul a {
       background:#333;
      }
    #navMain ul ul ul a {
       background:#444;
      }
    #navMain ul li:hover > ul {
      display:block;/*on affiche menu niveau 2 au survol */
    }
    /* flèche */
    #navMain li.hasSub:after {
        position:absolute;
        content:"\25BC";
        color:#fff;
        top: 10px;
      right: 10px;
    }
    #navMain li:hover.hasSub:after {
      color:yellow;
       -ms-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
    }
     
    #navMain li li.hasSub:after {
     
       -ms-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
    }
    #navMain li li:hover.hasSub:after {
      color:yellow;
       -ms-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
    }
     
     
     
     
    /*---------------- */
     
    /* ------------------------------------------------------ */
    /* 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;
    }
       /* niveau 2 (et suivants) */
     
      #navMain ul ul {
        position: absolute;/* positionné en absolu (SORT DU FLUX) */
        width: 100%;
        top:100%; /* positionné en absolu SOUS le niveau 1 */
        left:0;
      }
      /* niveau 3 (et suivants) */
      #navMain ul ul ul {
        position: absolute;/* positionné en absolu (SORT DU FLUX) */
        top:0;
        left:100%; /* A DROITE du niveau 2 */
     
    }
    }
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  12. #152
    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

    Bonjour Laurent et heureux de te revoir dans la discution.
    Sans vouloir occulter Jérôme, Je pense que tu as oublié les smartphones notemment inférieurs à 640px.
    Peut être serait-il bon de rajouter:
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    @media screen and (max-width: 640px) {
    }
    mais surtout déplacer:
    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
    #navMain li li.hasSub:after {
     
       -ms-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
    }
    #navMain li li:hover.hasSub:after {
      color:yellow;
       -ms-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
    }
    dans:
    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
    @media screen and (min-width: 641px) {
    #navMain li li.hasSub:after {
     
       -ms-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg);
    }
    #navMain li li:hover.hasSub:after {
      color:yellow;
       -ms-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
    }
     
    }
    Mais je ne veux pas empiéter sur Jérôime

  13. #153
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 581
    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 581
    Points : 21 188
    Points
    21 188

    Par défaut

    Bonjour JefReb,

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    @media screen and (max-width: 640px) { ... }
    1- En "Mobile First", on n'en a pas besoin, puisque le code est déjà écrit pour les mobiles !
    2- Le seul cas où ça devient nécessaire, c'est quand on veut indiquer une instruction spécifique "mobile", qu'on ne veux pas "transmettre"* aux @media (desktop,...)
    * @media { ... } placé après le code "mobile first" : on va alors "écraser" (si besoin) certaines instructions déjà indiquées.

    Quant à ton 2ème point, c'est juste : ça ne concerne que "desktop".
    Mais plutôt qu'indiquer la solution, j'aurais juste préféré poser la question à laurentSc : "comment faire pour que les flèches ne pointent à gauche et à droite QUE sur desktop ?".
    "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. #154
    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

    Ha zut, désolé, j'ai empiété sur ton post.
    Quant au reste oui oui, je mettais cela en prévision de changements au cas où il y aurait quelque chose de spécifique pour les mobiles.
    Bien sûr comme il n'y avait rien à dire, c'est vide.
    Excuses moi encore, pour une fois que je peux répondre facilement.

  15. #155
    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

    Merci JefReb, et à mon avis, tu n'as pas empiété vu que je suis persuadé que j'aurais trouvé, mon seul souci étant que je n'ai pas pensé à traiter ce cas (ni à le tester). Bon, je vais passer au 8.
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  16. #156
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 581
    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 581
    Points : 21 188
    Points
    21 188

    Par défaut

    @JefReb
    Ne t'excuse pas : tu as raison de participer et de donner ton avis !

    @laurentSc : c'est très bien, continue !


    C'est comme ça qu'on progresse.
    "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. #157
    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

    Il faut dire, que depuis que nous avons commencé avec Jérôme, je ne m'occupais pas beaucoup des mobiles avant.
    Mais, depuis, j'ai pris l'habitude d'utiliser, le plus souvent possible, l'excellent outils de Firefox "Développement Web" et de sa "Vue Adaptative" entre autre.
    Avec cela et le débugger, tu arrives rapidement en générale à voir ce qui "cloche".
    Bon courage pour le 8!

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