Sorte de menu

Bonjour,

Je vous adresse à vous pour m'aider ^^. Ca fait des jours et des jours que je cherche comment faire ce que je veux :'(. SAUVEZ MOI ^^
Je vous explique. Donc j'aimerai faire, une espèce de menu on va dire. Donc ce sera rectangulaire, hum je vais mettre une photo, ce sera plus simple.

Voilà, et lorsque je clique sur un des liens qui est sur le côté, il défile si on peut dire et viens se mettre sur la droite pour laisse apparaitre ce qu'il cache :



J'ai peut être trouvé une solution, mais ça ne fait pas exactement ce que je veux... :

<div id="menuimage">
				<div class="range1">
					a<br>
					a<br>
					a<br>
					a<br>
					a<br>
				</div>
				
				<div class="range2">
					a<br>
					a<br>
					a<br>
					a<br>
					a<br>
				</div>
				
				<div class="range3">
					a<br>
					a<br>
					a<br>
					a<br>
					a<br>
				</div>
				
				<div class="range4">
					a<br>
					a<br>
					a<br>
					a<br>
					a<br>
				</div>
				
				<div class="range5">
					a<br>
					a<br>
					a<br>
					a<br>
					a<br>
				</div>
			</div>

#menuimage
{
	margin-left: 25em; /* Car ça ne veux pas se centrer avec text-align:center;
}

.range1
{
	float: left;
	width: 1em;
	transition: width 1s ease 0.15s;
	border: 0.1em solid blue;
	text-align: center;
}

.range1:hover
{
	width: 20em;
}

.range2
{
	float: left;
	width: 1em;
	transition: width 1s ease 0.15s;
	border: 0.1em solid blue;
	text-align: center;
}

.range2:hover
{
	width: 20em;
}

.range3
{
	float: left;
	width: 1em;
	transition: width 1s ease 0.15s;
	border: 0.1em solid blue;
	text-align: center;
}

.range3:hover
{
	width: 20em;
}

.range4
{
	float: left;
	width: 1em;
	transition: width 1s ease 0.15s;
	border: 0.1em solid blue;
	text-align: center;
}

.range4:hover
{
	width: 20em;
}

.range5
{
	float: left;
	width: 1em;
	transition: width 1s ease 0.15s;
	border: 0.1em solid blue;
	text-align: center;
}

.range5:hover
{
	width: 20em;
}

Voilà...
J'espère que quelqu'un saura m'aider, ce serait vraiment génial.

Cordialement,
Mini_Croco
Modifié par Mini_Croco (08 Mar 2012 - 18:17)

Salut,
ce que tu veux faire est un accordéon horizontal.

Je te laisses suivre ce lien qui t'amèneras sur jQuery-UI
http://jqueryui.com/demos/accordion/

C'est bon j'ai réussit à le faire ^^ enfin . Et en CSS comme je voulais donc c'est cool. Désolée du message du coup ^^