Sous-menu placé à gauche

**laurentSc** · 29/09/2017, 23h52

Bonsoir,

en général, quand un menu comporte des sous-menus, ceux-ci sont placés sur la droite du menu parent. Par contre je souhaiterais que les sous-menus du menu le plus à droite soient placés sur sa gauche pour que ça soit plus agréable pour l'utilisateur. Comment faire cela (en CSS of course) ?
Voici le codepen du menu actuel où tous les sous-menus sont placés sur la droite du menu parent : https://codepen.io/laurentsc/pen/eGRjqQ (bien sûr les liens du menu ne fonctionnent pas...)

**JefReb** · 30/09/2017, 09h56

Est-ce cela que tu cherches?
https://codepen.io/JefReb/pen/PJjVVr

en espérant que Jreaux62 ne dise pas que c'est une usine à gaz ...

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
* {
	box-sizing: border-box;		/* taille des boites width= contenu + padding + border */
}
body {
	font-family: "Times New Roman", Times, serif;
	font-size: 100%;
}
h1 {
	text-align: center;
}
/* =====================================================================================*/
nav {
}
nav > ul {
	height: 3em;
	line-height: 2em;
	font-size: 0.8em;
	background: #e1e4f2;
	border: 1px solid #48B;
	border-radius: 2em;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
nav a {
	display: inline-block;
	padding: 0.5em;
	font-weight: bold;
	text-align:center;
	color: #00f;
	text-decoration: none;
}
nav li ul a {
	width: 150px;
}
/* =====================================================================================*/
/* ==============            définition du premier niveau          =====================*/
/* =====================================================================================*/
nav > ul > li {
	margin: 0 1em;
	float: left;
	color: #666;
	font-weight: normal;
}
nav li {
	position: relative;
}
nav li ul {
	position: absolute;
	background: #FEFEFF;
	border: solid 1px #48B;
}
nav li ul {
	top: 100%;
	left: 0;
}
nav li li ul {
	top: -1px;
	left: -100%;
}
nav li:nth-of-type(2) li ul {
	top: -1px;
	left: 100%;
}
/* =====================================================================================*/
nav li ul, 
nav li:hover ul ul,
nav > ul ul li:hover ul ul {
	display: none;
}
nav li:hover ul, 
nav ul ul li:hover ul,
nav > ul ul ul li:hover ul {
	display: block;
}
nav a:hover {
	background: #4D90FE;
	color: #fff;/*text-decoration: underline;	*/
}
 
a.plus:after{
  content: "\25BA";
  float:right;
  color:#ABC;
}
 
a.moins:before{
  content: "\25C4";
  float:left;
  color:#ABC;
}

Mais j'ai repris le menu en html5

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
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
<nav>
  <ul>
    <li><a href="../accueil/accueil.php">Accueil</a></li>
    <li><a href="#"  >Hyères 29/04 à 01/05</a>
      <ul>
        <li><a href="#" class="plus">photos</a>
          <ul>
            <li><a href="../serge/serge.php">Serge B.</a></li>
            <li><a href="../joaquim/joaquim.php">Joaquim V.</a></li>
          </ul>
        </li>
        <li><a href="#" class="plus">vidéos</a>
          <ul>
            <li><a href="../vjerome/constr.php">jérôme L.</a></li>
            <li><a href="../vjoaquim/vcarq.php" class="plus">Joaquim V.</a>
              <ul>
                <li><a href="../vjoaquim/anae.php">ANAE</a></li>
                <li><a href="../vjoaquim/carqueiranne.php">Carqueiranne</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#" class="plus">GPS</a>
          <ul>
            <li><a href="../gps_hyeres/samedi2.php">Samedi29/04</a></li>
            <li><a href="../gps_hyeres/dimanche.php">Dimanche 30/04</a></li>
            <li><a href="../gps_hyeres/lundi.php">Lundi 01/05</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Challenge du Vercors 20/05</a>
      <ul>
        <li><a href="#" class="moins">GPS</a>
          <ul>
            <li><a href="../gps_challenge/challenge17.php">gps_challenge 20/05</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#" >Vaucluse 22 à 25/05</a>
      <ul>
        <li><a href="#" class="moins">GPS</a>
          <ul>
            <li><a href="../gps_vaucluse/22mai.php">22 mai</a></li>
            <li><a href="../gps_vaucluse/23mai.php">23 mai</a></li>
            <li><a href="../gps_vaucluse/24mai.php">24 mai</a></li>
            <li><a href="../gps_vaucluse/25mai.php">25 mai</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#" >Trièves 03 à 05/06</a>
      <ul>
        <li><a href="../trieves/trieves.php">photos</a> </li>
        <li><a href="#" class="moins">GPS</a>
          <ul>
            <li><a href="../gps_trieves/030617.php">03 juin 17</a></li>
            <li><a href="../gps_trieves/040617.php">04 juin 17</a></li>
            <li><a href="../gps_trieves/050617.php">05 juin 17</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Dolomites 18 à 23/06</a>
      <ul>
        <li><a href="#" class="moins">photos</a>
          <ul class="col_1 col3_decal droite_decal">
            <li><a href="../jerome/jerome.php">Jérôme</a></li>
            <li><a href="../jc/jc.php">Jean-Claude</a></li>
            <li><a href="../hm/hm.php">Hélène & Mickaël</a></li>
            <li><a href="../yann/yann.php">Yann</a></li>
            <!--<li><a href="../dolo/dolo.php">tout télécharger (3,33 gO)</a></li>-->
          </ul>
        </li>
        <li><a href="#" class="moins">GPS</a>
          <ul  class="col_1 col1_decal droite_decal">
            <li><a href="../gps_dolo/18juin.php">18 juin</a></li>
            <li><a href="../gps_dolo/19juin.php">19 juin</a></li>
            <li><a href="../gps_dolo/20juin.php">20 juin</a></li>
            <li><a href="../gps_dolo/21juin.php">21 juin</a></li>
            <li><a href="../gps_dolo/22juin.php">22 juin</a></li>
            <li><a href="../gps_dolo/23juin.php">23 juin</a></li>
            <li><a href="../gps_dolo/18-23juin.php">les 6 jours (pas de Grenoble !)</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="../undeux/undeux.php">1/2</a></li>
  </ul>
</nav>

ps: J'ai mis le ul du 2ème li en affichage droite, car sinon au vu de la position du menu, le 3ème niveau sortait de l'écran à gauche.

Code css :

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

1
2
3
4
nav li:nth-of-type(2) li ul {
	top: -1px;
	left: 100%;
}

et

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
<li><a href="#" class="plus">photos</a>
          <ul>
            <li><a href="../serge/serge.php">Serge B.</a></li>
            <li><a href="../joaquim/joaquim.php">Joaquim V.</a></li>
          </ul>
        </li>
        <li><a href="#" class="plus">vidéos</a>
          <ul>
            <li><a href="../vjerome/constr.php">jérôme L.</a></li>
            <li><a href="../vjoaquim/vcarq.php" class="plus">Joaquim V.</a>
              <ul>
                <li><a href="../vjoaquim/anae.php">ANAE</a></li>
                <li><a href="../vjoaquim/carqueiranne.php">Carqueiranne</a></li>
              </ul>
            </li>
 
etc..
etc..

**JefReb** · 01/10/2017, 15h26

Sans prétention et juste pour voir, j'ai revu le cosmétique du menu.
Si ça plait tant mieux:
https://codepen.io/JefReb/pen/MEvJrE
et surtout en essayant de ne pas ressembler à une usine à gaz ...

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
* {
	box-sizing: border-box;		/* taille des boites width= contenu + padding + border */
}
body {
	font-family: "Times New Roman", Times, serif;
	font-size: 100%;
}
h1 {
	text-align: center;
}
/* =====================================================================================*/
nav {
	width: 60em;	
	margin:0 auto;
}
nav >  ul {
	height: 3em;
}
nav ul {		
	margin:0;		
	padding:0;			
	list-style-type: none;
}
nav > ul > li > a {
	width:auto;
}
nav a {	
	display: inline-block;
	padding: 0.5em;
	font-weight: bold;
	height: 3em;
	line-height: 2em;
	font-size: 0.8em;
	text-align: center;
	background: #e1e4f2;
	color: #00f;
	text-decoration: none;
}
nav > ul > li:first-child > a {
	width:9em;
}
nav > ul > li:last-child > a {
	width:9em;
}
nav li ul a {
	width: 14em;
}
nav > ul > li {
	float: left;
	color: #666;
	font-weight: normal;
}
nav li 		{
	position:relative;
}
nav li ul {
	position: absolute;	
	background: #FEFEFF;
	border-top:3px solid transparent;		
}
nav li ul {
	top: 100%;
	left: 0;
}
nav li li ul {
	top: -3px;
	left: -100%;
}
/*nav li:nth-of-type(2) li ul {
	top: -1px;
	left: 100%;
}*/
nav > ul > li:first-child > a {
	border-radius: 50px 0 0 50px;
}
nav > ul > li:last-child > a {
	border-radius: 0 50px 50px 0;
}
nav > ul ul li:first-child > a {
	border-radius: 5px 5px 0 0;
}
nav > ul ul li:last-child > a {
	border-radius: 0 0 5px 5px;
}
/* =====================================================================================*/
nav li ul, 
nav li:hover ul ul,
nav > ul ul li:hover ul ul {
	display: none;
}
nav li:hover ul, 
nav ul ul li:hover ul,
nav > ul ul ul li:hover ul {
	display: block;
}
nav a:hover {
	background: #4D90FE;
	color: #fff;text-decoration: underline;	
}
 
/*a.plus:after{
  content: "\25BA";
  float:right;
  color:#ABC;
}
*/
a.moins:before{
  content: "\25C4";
  float:left;
  color:#ABC;
}

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
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
<nav>
  <ul>
    <li><a href="../accueil/accueil.php">Accueil</a></li>
    <li><a href="#"  >Hyères 29/04 à 01/05</a>
      <ul>
        <li><a href="#" class="moins">photos</a>
          <ul>
            <li><a href="../serge/serge.php">Serge B.</a></li>
            <li><a href="../joaquim/joaquim.php">Joaquim V.</a></li>
          </ul>
        </li>
        <li><a href="#" class="plus">vidéos</a>
          <ul>
            <li><a href="../vjerome/constr.php">jérôme L.</a></li>
            <li><a href="../vjoaquim/vcarq.php" class="plus">Joaquim V.</a>
              <ul>
                <li><a href="../vjoaquim/anae.php">ANAE</a></li>
                <li><a href="../vjoaquim/carqueiranne.php">Carqueiranne</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#" class="moins">GPS</a>
          <ul>
            <li><a href="../gps_hyeres/samedi2.php">Samedi29/04</a></li>
            <li><a href="../gps_hyeres/dimanche.php">Dimanche 30/04</a></li>
            <li><a href="../gps_hyeres/lundi.php">Lundi 01/05</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Challenge du Vercors 20/05</a>
      <ul>
        <li><a href="#" class="moins">GPS</a>
          <ul>
            <li><a href="../gps_challenge/challenge17.php">gps_challenge 20/05</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#" >Vaucluse 22 à 25/05</a>
      <ul>
        <li><a href="#" class="moins">GPS</a>
          <ul>
            <li><a href="../gps_vaucluse/22mai.php">22 mai</a></li>
            <li><a href="../gps_vaucluse/23mai.php">23 mai</a></li>
            <li><a href="../gps_vaucluse/24mai.php">24 mai</a></li>
            <li><a href="../gps_vaucluse/25mai.php">25 mai</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#" >Trièves 03 à 05/06</a>
      <ul>
        <li><a href="../trieves/trieves.php">photos</a> </li>
        <li><a href="#" class="moins">GPS</a>
          <ul>
            <li><a href="../gps_trieves/030617.php">03 juin 17</a></li>
            <li><a href="../gps_trieves/040617.php">04 juin 17</a></li>
            <li><a href="../gps_trieves/050617.php">05 juin 17</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Dolomites 18 à 23/06</a>
      <ul>
        <li><a href="#" class="moins">photos</a>
          <ul class="col_1 col3_decal droite_decal">
            <li><a href="../jerome/jerome.php">Jérôme</a></li>
            <li><a href="../jc/jc.php">Jean-Claude</a></li>
            <li><a href="../hm/hm.php">Hélène & Mickaël</a></li>
            <li><a href="../yann/yann.php">Yann</a></li>
            <!--<li><a href="../dolo/dolo.php">tout télécharger (3,33 gO)</a></li>-->
          </ul>
        </li>
        <li><a href="#" class="moins">GPS</a>
          <ul>
            <li><a href="../gps_dolo/18juin.php">18 juin</a></li>
            <li><a href="../gps_dolo/19juin.php">19 juin</a></li>
            <li><a href="../gps_dolo/20juin.php">20 juin</a></li>
            <li><a href="../gps_dolo/21juin.php">21 juin</a></li>
            <li><a href="../gps_dolo/22juin.php">22 juin</a></li>
            <li><a href="../gps_dolo/23juin.php">23 juin</a></li>
            <li><a href="../gps_dolo/18-23juin.php">les 6 jours(pas de Grenoble!)</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="../undeux/undeux.php">1/2</a></li>
  </ul>
</nav>

**laurentSc** · 01/10/2017, 22h38

Je n'ai pas encore eu le temps de me pencher sur tes codes étant absent tout ce week-end, mais en tous cas, le comportement obtenu semble satisfaisant et je t'en dirai plus demain.

Envoyé par JefReb

et surtout en essayant de ne pas ressembler à une usine à gaz ...

Ca semble mal parti :

Envoyé par jreaux62

@ JefReb et laurentSc

A vous deux, vous formez une belle équipe !!

Vous bossez surtout chez "Usine à gaz and Co"* !!...

* Je sais de quoi je parle : j'y ai bossé aussi

Invité · 02/10/2017, 13h42

@JefReb

Seul l'avant-dernier sous-sous-menu doit être à gauche.

En reprenant ton code :

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
/* SOUS-SOUS-MENUS */
nav > ul > li > ul > li > ul {
	top: -1px;
	left: 100%; /* A DROITE */
}
a.moins:before{
  content: "\25BA"; /* FLECHE A DROITE */
  float:right;
  color:#ABC;
}
nav > ul > li:nth-last-child(2) > ul > li > ul { /* AVANT-DERNIER */
	top: -3px;
	left: -100%;/* A GAUCHE */
}
nav > ul > li:nth-last-child(2) a.moins:before{
  content: "\25C4"; /* FLECHE A GAUCHE */
  float:left;
  color:#ABC;
}

**laurentSc** · 02/10/2017, 15h49

**JefReb** · 02/10/2017, 19h18

Merci Jreaux62, j'apprécie beaucoup l'apport technique qui fait progresser tout un chacun même si ce n'est pas mon topic.
Effectivement, c'est mon défaut de foncer, mais les demandes ne sont pas toujours très claires.
pourtant, oui, j'aurai dû lire

je souhaiterais que les sous-menus du menu le plus à droite soient placés sur sa gauche

mais je pense que mon apport était facile à modifier et surtout un code simple ...

merci

Sous-menu placé à gauche

CSS

Discussions similaires

Partager

Partager