Menu multi-niveaux - flex

**JefReb** · 20/11/2017, 15h20

Merci Jérôme, Suis coincé jusqu'à demain.
Je vais faire. Qu'est-ce qu'en MP?

2- right:80%; : on peut mieux faire !

Oui évidemment, il faut faire un petit padding-left en premier pour décoller le niveau 2 puis un right:auto pour supprimer le premier et un left: pour positionner le triangle.
A demain. et encore merci
Jef

**laurentSc** · 20/11/2017, 15h44

J'ai bien vu vos interventions mais n'aurai très probablement le temps de répondre que demain.

Mais

Envoie-moi les liens de tes codepen en MP (car laurentSc a la fâcheuse tendance à copier-coller ! )

m'a inspiré une blague pas gentille :

L’homme sage apprend de ses erreurs,
l’homme plus sage apprend des erreurs des autres !
Confucius

désolé JefReb, pas pu m'empêcher !!

Invité · 20/11/2017, 15h57

@JefReb :

Envoyé par JefReb

Qu'est-ce qu'en MP?

En "Message Privé" !

clique sur mon pseudo "jreaux62" (en haut à gauche de chacun de mes messages)
puis sur "Message Privé" !

@laurentSc :

l’homme ENCORE plus sage apprend.
Tout court.

Invité · 21/11/2017, 09h54

LE DEFI :

Proposer le code le plus OPTIMISE (= LEGER et SIMPLE) possible pour CHAQUE EXERCICE !
Le HTML et le CSS ne doivent comporter QUE le code nécessaire à l'exercice en cours.

Ecrire UN codepen pour CHAQUE exercice (lui donner en titre "Exercice 1", "Exercice 2",....) et en commentaire l'énoncé de l'exercice.
N'ECRIRE QUE LE CODE NECESSAIRE ET SUFFISANT à l'Exercice.
M'envoyer les liens des codepen en MP (on postera ensuite vos codes, avec corrections éventuelles)

Voici le code HTML de base :

Code html :

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

1
2
3
4
5
6
7
8
<nav id="navMain">
  <ul>
    <li><a href="#">A - One</a></li>
    <li><a href="#">B - Two</a></li>
    <li><a href="#">C - Three</a></li>
    <li><a href="#">D - Four</a></li>
  </ul>
</nav>

Début du CSS :

Code css :

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

1
2
3
* { margin:0; padding:0; border:0; }
html, body { font-family:Arial,sans-serif; fonts-size:100%; }
/* ------------------------------- */

Exercice 1 :
- menu horizontal en utilisant (display:table), largeur : 100% de la fenêtre
- liens (a) : padding 10px 15px, non soulignés, texte blanc, couleur de fond #2980b9 (bleu)
- lien au survol (:hover) : couleur de fond #20638f (bleu foncé)

Exercice 2 :
- centrer le menu : largeur 50% de la fenêtre
- largeur mini : 640px

Exercice 3 :
- On garde le menu horizontal pour tablette et desktop
- On met le menu vertical sur phone (largeur inférieure à 640px) : largeur 100% de la fenêtre
Indice : media queries

N.B. en "mobile first" :
- on écrit d'abord le code pour phone,
- Puis, avec media queries, celui pour tablette, et desktop

Exercice 4 :
- Ajouter un niveau de sous-menu (niveau 2) au menu "A" (pas de flèche pour l'instant)
- couleur de fond du sous-menu : #333 (gris très foncé)
- masquer le sous-menu
- Desktop : l'afficher (avec :hover) SOUS le menu (indice : position absolute). Largeur du sous-menu 100%, minimum 180px.
- Phone : l'afficher (avec :hover) DANS le menu (comportement normal)

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
<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><a href="#">B - Two</a></li>
    <li><a href="#">C - Three</a></li>
    <li><a href="#">D - Four</a></li>
  </ul>
</nav>

Exercice 5 :
- Ajouter la class "hasSub" au menu "A" (qui possède un sous-menu)
- Ajouter une flèche (couleur : blanche) au menu "A" (indice : :before ou :after, au choix), pointée vers le bas
- code pour la flèche : "\25BC"
- positionner la flèche en absolu, centrée verticalement, à droite dans le menu
- au survol (:hover) : la faire pointer vers le haut
- utiliser transform: rotate() pour inverser le sens de la flèche (indice : 180deg)
- attention à la compatibilité (-ms-, -webkit-,...)

Code html :

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

1
2
3
4
5
6
<nav id="navMain">
  <ul>
    <li class="hasSub">
      <a href="#">A - One</a>
      <ul>
.....

Exercice 6 :
- Ajouter un sous-sous-menu (niveau 3) au menu "A" (pas de flèche pour l'instant)
- couleur de fond (niveau 3) : #444; /* gris foncé */
- Phone : l'afficher (:hover) DANS le menu (indice : comportement normal = RIEN à mettre !)
- Desktop : l'afficher (:hover) A DROITE le son parent

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>

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 faire pointer vers la DROITE (indice : -90deg)
- :hover : la faire pointer vers la GAUCHE (indice : 90deg)

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)

Exercice 9 :
~~- Si tu veux, tu peux encore ajouter un nouveau niveau (niveau 4), mais, ergonomiquement, c'est déconseillé.~~

Exercice 10 :
- Teste display:flex sur le niveau 1

En fonction de vos questions et de votre intérêt, on verra comment améliorer l'esthétique de ce menu (animation de la flèche, par exemple)

**laurentSc** · 21/11/2017, 17h01

Voici (enfin) ma réponse au post #96 !

1.a : les sous-menus de niveau 2 qui ont un sous-menu de niveau 3

1.b : idem mais seulement si le menu de niveau 1 est le dernier et au survol

1.c : idem 1.b mais avant-dernier menu de niveau 1 à la place du dernier.

•et pourquoi a-t-on :hover sur les 2 dernières instructions (1b, 1c) et pas sur la première (1a)

La rotation à -90° fait une flèche horizontale vers la droite (et la rotation de +90° une flèche horizontale vers la gauche). Elle concerne les sous-menus de niveau 2 ou plus sauf s'ils sont sous le dernier ou avant-dernier menu de niveau 1 sachant que pour ceux-ci, au repos, il faut une flèche vers la gauche (donc une rotation de +90°). Quand on survole les sous-menus, il faut inverser la flèche (droite->gauche pour la plupart des sous-menus et gauche->droite si les sous-menus sont sous le dernier ou avant-dernier menu de niveau 1)

2. Pour voir la différence, comme je la voyais pas, j'ai remplacé les 0.5s par 5s et c'est devenu évident.

•comment rétablir ce qui manque ?

En remettant le code que j'ai supprimé.

3. La flèche étant déjà à droite, j'ai pensé que tu voulais dire à gauche (ce qui serait logique), mais j'y arrive pas. Voici mon essai qui marche pas :

Code css :

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

1
2
3
4
#navMain > ul > li:last-child  li.hasSub : after {
  /*right:80%;*/
  left:10px;
}

4. Avant de lire la réponse de jefReb, j'avais codé sa version compliquée...

PS : au post #97, jefReb, tu donnes un code qui marche , mais pas trouvé sur le net ce que fait ::after (les 2x2 points à la place d'un seul) ???

Invité · 21/11/2017, 17h24

Bonjour Laurent,

3. La flèche étant déjà à droite, j'ai pensé que tu voulais dire à gauche (ce qui serait logique), mais j'y arrive pas. Voici mon essai qui marche pas :

Code css :

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

1
2
3
4
#navMain > ul > li:last-child  li.hasSub : after {
  right:auto; /* il faut "désactiver" le right:10px; */
  left:10px;
}

JefReb m'a déjà envoyé ses codepen par MP.

Souhaites-tu le faire aussi ?
Laurent, tu peux poster DIRECTEMENT dans le fil de la discussion (pas besoin de MP)

N.B. Il faut absolument commencer par l'Exercice 1 !
Les autres vont découler à chaque fois du précédent.

On les corrigera ensemble, l'UN après l'AUTRE, OK ?

**laurentSc** · 21/11/2017, 17h32

Ok je commencerai vers 18h (là je suis en voiture (je conduis pas !) Et je rentre chez moi.
Peux-tu m'expliquer ::after ? (Le doublement des 2 points )

Invité · 21/11/2017, 17h45

Tu n'as pas l'option "RECHERCHE", dans ta voiture ??

::after (:after)

**laurentSc** · 21/11/2017, 19h30

Ma voiture a certainement l'option recherche mais pas celle de mon collègue

/* il faut "désactiver" le right:10px; */

J'ai beau désactiver, la flèche reste à gauche...

A mon avis, je vais pas commencer les exercices avant 21h...

**laurentSc** · 22/11/2017, 00h01

Finalement, j'ai commencé vers 23h30. Vu l'heure tardive, je ne fais ce soir que l'exercice 1 : https://codepen.io/laurentsc/pen/yPKjjK

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--Enoncé
- menu horizontal en utilisant (display:table), largeur : 100% de la fenêtre
- liens (a) : padding 10px 15px, non soulignés, texte blanc, couleur de fond #2980b9 (bleu)
- lien au survol (:hover) : couleur de fond #20638f (bleu foncé)
-->
<nav id="navMain">
  <ul>
    <li><a href="#">A - One</a></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
* { 
  margin:0; 
  padding:0; 
  border:0; }
html, body { 
  font-family:Arial,sans-serif; 
  fonts-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*/
}
 
/* ------------------------------- */
 
/* ------------------------------------------------------ */
/* 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:100%; /* largeur du menu */
  }
  #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 */
  }

Invité · 22/11/2017, 08h32

Je m'en doutais...
ENCORE un copier-coller...

Trop de code par rapport à ce qui est demandé.
Et même quand J'écris (involontairement) une bêtise, tu la copies sans réfléchir ! (fonts-size:100%; )
Ce n'est pas sérieux.

Puisque tu ne veux pas apprendre ni comprendre, je laisse tomber.

Je vais m'occuper de JefReb.
Lui, il écrit son propre code.

Invité · 22/11/2017, 09h29

Exercice 1 :

menu horizontal en utilisant (display:table), largeur : 100% de la fenêtre
liens (a) : padding 10px 15px, non soulignés, texte blanc, couleur de fond #2980b9 (bleu)
lien au survol (:hover) : couleur de fond #20638f (bleu foncé)

Code html :

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

1
2
3
4
5
6
7
8
<nav id="navMain">
  <ul>
    <li><a href="#">A - One</a></li>
    <li><a href="#">B - Two</a></li>
    <li><a href="#">C - Three</a></li>
    <li><a href="#">D - Four</a></li>
  </ul>
</nav>

CSS de départ (je ne l'écrirai plus par la suite :il ne changera pas) :

Code css :

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

1
2
3
4
5
6
7
8
9
10
* {
  margin: 0;
  padding: 0;
  border: 0;
}
html,
body {
  font-family: Arial, sans-serif;
  font-size: 100%;
}

IMPORTANT : Il peut y avoir PLUSIEURS SOLUTIONS !
Certaines plus judicieuses ou "modernes" que d'autres.

Solution 1-A : https://codepen.io/jreaux62/pen/yPKLee
Avec display:table;

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
/* ------------------------------- */
/* MENU */
#navMain ul,
#navMain li {
  list-style: none; /* pas de style de style (puce,...) */
}
/* menu niveau 1 : horizontal */
#navMain ul {
  display: table; /* se comporte comme une table */
  width: 100%;
}
#navMain li {
  display: table-cell; /* se comporte comme une cellule table */
  width: 1%; /* 1% : astuce pour que tous aient la même largeur */
}
#navMain a {
  display: block; /* block, au lieu de inline : prend toute la largeur de son parent */
  padding: 10px 15px;
  color: #fff;
  background: #2980b9; /* bleu */
  text-decoration: none; /* pas de soulignement */
}
#navMain a:hover {
  background: #20638f; /* bleu foncé */
}
/* ------------------------------- */

Solution 1-B :
Avec display:flex;
on remplace :

Code css :

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

1
2
3
4
5
6
7
8
9
/* menu niveau 1 : horizontal */
#navMain ul {
  display: table; /* se comporte comme une table */
  width: 100%;
}
#navMain li {
  display: table-cell; /* se comporte comme une cellule table */
  width: 1%; /* 1% : astuce pour que tous aient la même largeur */
}

par :

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 */
}

(pour JefReb : compare les 2 codes)
On obtient sensiblement le même résultat.
La différence ne se voit pas ici, mais flex offre d'autres possibilités puissantes, qu'on verra plus tard.

N.B. Dans la suite des corrections, je resterai en display:table; (cette partie du code ne changera pas)

2 liens que je consulte régulièrement :

Solution 1-C : ("ancienne méthode")
Avec float:left;
on remplace par :

Code css :

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

1
2
3
4
5
6
7
/* menu niveau 1 : horizontal */
#navMain ul {
}
#navMain li {
  float: left; /* flottant à gauche (SORT DU FLUX) */
  width:25%; /* 4 menus */
}

On N'utilisera PLUS cette solution !

Invité · 22/11/2017, 09h40

Exercice 2 :

centrer le menu : largeur 50% de la fenêtre
largeur mini : 640px

Solution Exercice 2 : https://codepen.io/jreaux62/pen/RjMwKq
On modifie le code précédent :

Code css :

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

1
2
3
4
5
6
7
/* menu niveau 1 : horizontal */
#navMain ul {
  display: table; /* se comporte comme une table */
  width: 50%;
  margin: 0 auto; /* centrage */
  min-width: 640px;
}

Jusqu'ici, rien de compliqué.

Astuce : COMMENT SAVOIR si une instruction est NÉCESSAIRE et SUFFISANTE ?

Simple :

on l'enlève, et on TESTE pour VOIR ce qui se passe.

S'il ne se passe RIEN (de visible) :

soit cette instruction est REDONDANTE ( = DEJA mise avant)
soit elle indique une valeur PAR DEFAUT ( = qui s'applique, même si on ne met rien)

Dans les 2 cas : elle n'est donc PAS nécessaire. On l'enlève.

Invité · 22/11/2017, 11h35

Exercice 3 :

On garde le menu horizontal pour tablette et desktop (largeur supérieure à 640px)
On met le menu vertical sur phone (largeur inférieure à 640px) : largeur 100% de la fenêtre
Indice : media queries

N.B. en "mobile first" :

on écrit d'abord le code pour phone,
Puis, avec media queries, celui pour tablette, et desktop

Dans l'exercice, j'ai défini arbitrairement le point de rupture ("break point") à 640px.
Par la suite, vous pourrez définir d'autres points de rupture (pour distinguer "tablette" de "desktop", par exemple).

Solution Exercice 3 : https://codepen.io/jreaux62/pen/eeMYWv

3a- Partie COMMUNE :
Placée au début, elle ne dépend pas de la largeur de la fenêtre.

3b- PHONE (moins de 640px) :

Code css :

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

1
2
3
4
5
/* ------------------------------- */
/* PHONE -(moins de 640px) */
@media screen and (max-width: 640px) {
  /* RIEN ICI : c'est le comportement normal des balises ! */
}

3c- TABLET + DESKTOP (plus de 640px):

Code :

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

1
2
3
4
5
6
/* ------------------------------- */
/* TABLET + DESKTOP -(plus de 640px)  */
@media screen and (min-width: 641px) {
  /* menu horizontal */
  /* C'est ICI qu'on met le code pour le menu HORIZONTAL, qui ne concerne QUE DESKTOP ! */
}

Invité · 22/11/2017, 11h44

Exercice 4 :

Ajouter un niveau de sous-menu (niveau 2) au menu "A" (pas de flèche pour l'instant)
couleur de fond du sous-menu : #333 (gris très foncé)
masquer le sous-menu
Desktop : l'afficher (avec :hover) SOUS le menu (indice : position absolute). Largeur du sous-menu 100%, minimum 180px.
Phone : l'afficher (avec :hover) DANS le menu (comportement normal)

Code HTML de base :

Code :

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
<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><a href="#">B - Two</a></li>
    <li><a href="#">C - Three</a></li>
    <li><a href="#">D - Four</a></li>
  </ul>
</nav>

Solution Exercice 4 : https://codepen.io/jreaux62/pen/VrXwGg

4a- PHONE : toujours rien ici ! C'est le comportement normal des balises (comportement PAR DEFAUT) !

Code :

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

1
2
3
4
5
/* ------------------------------- */
/* PHONE -(moins de 640px) */
@media screen and (max-width: 640px) {
  /* RIEN ICI : c'est le comportement normal des balises */
}

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é :

Code css :

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

1
2
3
#navMain li {
  position:relative; /* nécessaire pour positionner les sous-menus */
}

Code :

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

1
2
3
4
5
6
  /* 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 */
  }

N.B. #navMain ul ul : tous les <ul> enfant, de niveau 2 et suivants (comme on n'a pas encore de sous-menu niveau 3, pas besoin de cibler précisément)
Pour cibler précisément le niveau 2, on utilisera : #navMain > ul > li > ul.

**laurentSc** · 22/11/2017, 15h29

Envoyé par jreaux62

je laisse tomber.

Pas moi...

Envoyé par jreaux62

Puisque tu ne veux pas apprendre ni comprendre

pas d'accord, car même si je copie (bêtement) des fautes involontaires (j'avais pas lu cette partie), quand je lis ton code, ça m'apprend bien des choses. (Quand je fais un copier-coller, ça ne m'empêche de chercher à comprendre ce que je copie).
Je vais continuer sans lire les solutions que tu donnes (ou bien seulement après avoir moi-même codé, pour apprendre).

Invité · 22/11/2017, 17h53

OK, Laurent, je demande à voir...

De toute façon, depuis toutes ces années, on commence quand même à bien se connaitre

Tu sais que je ne te laisse pas "vraiment" tomber.
Ni longtemps...

VOIS CA COMME UN JEU !
Rien d'autre.

AU FAIT, pour vos codepen (Laurent et JefReb), vous avez un onglet "Settings", dans lequel vous pouvez définir :

"Pen Title" -> Titre de l'Exercice
"Pen Description" -> Description de l'Exercice

Invité · 22/11/2017, 18h11

Exercice 5 :

Ajouter la class "hasSub" au menu "A" (qui possède un sous-menu)
Ajouter une flèche (couleur : blanche) au menu "A" (indice : :before ou :after, au choix), pointée vers le bas
code pour la flèche : "\25BC"
positionner la flèche en absolu, centrée verticalement, à droite dans le menu
au survol (:hover) : la faire pointer vers le haut (couleur : jaune)
utiliser transform: rotate() pour inverser le sens de la flèche (indice : 180deg)
attention à la compatibilité (-ms-, -webkit-,...)

Solution Exercice 5 : https://codepen.io/jreaux62/pen/eeMmgK

Les flèches seront positionnées en absolu dans leur parent (li).

Il faut donc que les li soient eux aussi positionnés.
Et cette directive vaut aussi bien pour PHONE que pour DESKTOP : elle est COMMUNE.

Code css :

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

1
2
3
#navMain li {
  position:relative; /* nécessaire pour positionner les sous-menus et les flèches ! */
}

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
/* ------------------------------- */
/* flèche */
#navMain li.hasSub:after {
  position: absolute;
  content: "\25BC";
  font-size: 16px;
  color: #fff;
  top: 10px;
  right: 10px;
}
#navMain li.hasSub:hover:after {
  color: yellow; /* jaune */
  -ms-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

On inverse le sens de la flèche avec transform: rotate(180deg);.
-ms-, -moz- et -webkit- sont des préfixes, pour la compatibilité cross-browser (voir : transform CSS)

N.B. Dans le libellé, je N'ai PAS parlé de "mouvement" de la flèche. Donc PAS de transition:....... !

Invité · 22/11/2017, 18h33

Exercice 6 :

Ajouter un sous-sous-menu (niveau 3) au menu "A" (pas de flèche pour l'instant)
couleur de fond (niveau 3) : #444; /* gris foncé */
Phone : l'afficher (:hover) DANS le menu (indice : comportement normal = RIEN à mettre !)
Desktop : l'afficher (:hover) A DROITE le son parent

HTML de base :

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>

Solution Exercice 6 : https://codepen.io/jreaux62/pen/eeMmxx

Code css :

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

1
2
3
#navMain ul ul ul a {
  background: #444 /* gris très foncé */
}

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
  /* niveau 2 (et suivants) */
  #navMain ul ul {
    position: absolute;
    width: 100%;
    top:100%; /* positionné en absolu SOUS le niveau 1 */
    left:0;
  }
  /* niveau 3 (et suivants) */
  #navMain ul ul ul {
    top:0;
    left:100%; /* A DROITE du niveau 2 */
  }