Menu qui s'ouvre vers la gauche

**X260SH** · 28/10/2013, 11h02

Bonjour !
J'aimerai faire un menu où dans chaque <li>, il y a <img src="A.png"><p>AaAa</p>, et qu'au survol du <li>, l'image se "décale" vers la droite pour laisser apparaître le texte à sa gauche.
Voici mon code HTML :

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="styles.css" />
		<title>Menu qui s'ouvre vers la gauche</title>
	</head>
 
	<body>
		<ul>
			<li>
				<img src="A.png" alt="A" /><!--
				--><p>AaAaAaAa</p>
			</li><!--
			--><li>
				<img src="B.png" alt="B" /><!--
				--><p>BbBbBbBb</p>
			</li>
		</ul>
	</body>
</html>

Ainsi que le CSS :

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
li
{
	display:inline-block;
	background:#e5a541;
	width:50px;
	height:50px;
	overflow:hidden;
	color:#e5471d;
	transition-property:width;
	transition-duration:2s;
	padding:0;
}
 
li img
{
	display:inline-block;
	vertical-align:top;
}
 
li p
{
	display:inline-block;
	vertical-align:top;
	text-align:center;
	width:150px;
	height:50px;
	line-height:50px;
	padding:0;
	margin:0;
}
 
li:hover
{
	width:200px;
}

Cependant, avec ce code, l'image reste fixe et c'est le changement de taille du <li> qui fait apparaître le texte à droite de l'image (tout le contraire, en somme).
De plus, le texte met un certain temps avant d'apparaître : il attends que la transition soit finie.

Comment remédier à ces soucis ?

Merci d'avance !

[EDIT] Voilà ce que je cherche à obtenir :

**JefReb** · 28/10/2013, 14h17

Pourriez-vous expliquer un peu plus, car j'ai essayé le code et cela m'a l'air de fonctionner.
Qu'est-ce qui ne va pas?
voir sur http://codepen.io/anon/pen/nfGiB

**beekeep** · 28/10/2013, 14h24

bonjour,

un petit exemple.

**JefReb** · 28/10/2013, 18h40

Salut Beekeep
Ben où est la différence à part la vitesse ... avec http://codepen.io/anon/pen/nfGiB qui est exactement le code de X260SH?
Mais je reconnais que c'est intéressant et que je garde pour plus tard ...

**X260SH** · 28/10/2013, 18h51

Envoyé par beekeep

bonjour,

un petit exemple.

C'est ce qui s'approche le plus de se que je recherche. Il reste cependant un petit détail à régler : l'image se décale vers la gauche, mais le texte est coller à elle. Puis quand l'image arrive à sa "destination", le texte se détache petit à petit d'elle. Comment faire pour que la distance image-texte soit la même tout au long de l'animation ?

Merci.

[EDIT] Euh, après revérification, il y a un gros soucis avec votre méthode. La taille du div conteneur de change pas, ce qui fait qu'il est impossible de faire un menu comme je l'avais montrer dans mon 1er message...

**rodolphebrd** · 28/10/2013, 19h03

Bonjour,

sur la même longueur d'onde que beekeep (je me rends compte que j'ai cherché une solution identique

)

Le hover serait préférable sur la balise P: http://codepen.io/anon/pen/tciFg

Code html :

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

1
2
3
4
5
6
7
8
<ul>
   <li><img src="http://lorempixel.com/sport/50/50" alt="A" />
    <p>texte 1</p>
 </li>
   <li><img src="http://lorempixel.com/cats/50/50" alt="B" />
    <p>texte 2</p>
 </li>
</ul>

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
li
{
  display:inline-block;
  height:50px;
  overflow:hidden;
}
p
{
  display:inline-block;
  vertical-align:top;
  text-align:center;
  width:0px;
  height:50px;
  line-height:50px;
  color:yellow;
  background: salmon;
  margin:0;
  transition-property:width;
  transition-duration:1s;
}
li:hover p
{
  width:200px;
}

**X260SH** · 28/10/2013, 19h10

C'est ce que j'avais réussi à faire... Mais ça part vers la droite et non à gauche...

**rodolphebrd** · 28/10/2013, 19h19

Alors avec un float:right; à la place du inline-block sur le LI : http://codepen.io/anon/pen/mdnJK

Code :

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

1
2
3
4
5
6
7
8
9
ul{
  width:300px;
}
li
{
  float: right;
  height:50px;
  overflow:hidden;
}

Bien sûr penser à inverser l'ordre des items de la liste...

**X260SH** · 28/10/2013, 19h49

Ah c'est exactement ce que je cherchais, merci !!!
Je rencontre cependant un dernier soucis quant à l'intégration de ce menu. Si je le met dans la balise nav, voilà ce que ça donne : http://codepen.io/anon/pen/uzjDp (vraiment pratique, ce site !). Le tout se met sous le nav. J'aimerai le positionner toute à droite. Merci beaucoup !

**yoannhel** · 28/10/2013, 21h03

Bonsoir,

Tout à droite ?
Essayez un float:right; sur nav ul

**X260SH** · 28/10/2013, 22h33

Merci rodolphebrd et yoannhel pour vos exemples et vos conseils.
Résolue.

Menu qui s'ouvre vers la gauche

CSS

Discussions similaires

Partager

Partager