Discussion :

[CloudCompany]

Bonjour à tous !
J'ai besoin de votre aide...

Je dois réaliser un menu de la forme contenu dans la pièce jointe de ce message.

Vous pouvez utiliser du Javascript CSS2 ou 3 et HTML bien évidemment.

Je dois travailler sur une autre partie de ce projet. Je ne serai pas disponible pendant ce temps.

Merci de votre aide.
CloudCompany

[Torgar]

Bonjour,

Ne compte pas sur nous pour te faire ton menu Au pire on te donne des pistes, au mieux on peut t'aider à corriger un script existant !

Pour ma part, je ferais la partie haute avec des liens <a></a> en display: inline-block (voire inline si le premier ne te donne pas satisfaction).

La partie basse serait des liens <a></a> avec margin-left et margin-right, le tout centré via une balise <p></p> que j'afficherai au survol d'une rubrique de la partie haute.

Le survol serait géré par javascript soit avec une librairie existante comme jQuery ou Mootools, soit par un script perso à base de visibility: hidden|visible.

Sinon tu peux toujours voir du coté des hover CSS.

[CloudCompany]

Bonjour!
Merci de m'avoir répondu aussi rapidement !

J'ai commencer la réécriture de mon menu en fonction de votre idée.
Seulement je me retrouve embêté à cause de mes éléments Inline qui ne veulent pas se centrer au milieu de mon ruban...

Voici: le code CSS :

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
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
#menu_global
{
	border-top: white solid 5px;
	border-bottom: #98b9ef solid 5px;
	font-family: Arial;
	text-align: center;
}
 
#menu_global #menu_principal
{
	background-color:#e4e5e9;
	height: 45px;
}
 
#menu1, #menu2, #menu3
{
	width:300px;;
	height:90px;
	margin-top:10px;
	display:inline;
	background-color:yellow;
	vertical-align: middle;
 
}
 
#menu1 a, #menu2 a, #menu3 a
{
	color:#396;
	text-decoration:none;
}
 
#itemSecondaire
{
	display: inline;
}
 
#sous_menu1, #sous_menu2, #sous_menu3
{
	display:none;
	background-color:#83a2d1;
	height: 45px;
}
 
#sous_menu1 a, #sous_menu2 a, #sous_menu3 a
{
	text-decoration: none;
	color: white;
	padding: 10px;
}

Et voici le code HTML :

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
<div id="menu_global">
	<div id="menu_principal">
        <div id="menu1"><a href="#">Accueil 1</a></div>
        <div id="menu2"><a href="#">Accueil 2</a></div>
        <div id="menu3"><a href="#">Accueil 3</a></div>
	</div>
 
    <div id="sous_menu">
		<div id="sous_menu1">
        	<div id="itemSecondaire"><a href="#">Accueil 11</a></div>
           	<div id="itemSecondaire"><a href="#">Accueil 12</a></div>
        </div>
 
		<div id="sous_menu2">
        	<div id="itemSecondaire"><a href="#">Accueil 21</a></div>
           	<div id="itemSecondaire"><a href="#">Accueil 22</a></div>
        </div>
 
        <div id="sous_menu3">
        	<div id="itemSecondaire"><a href="#">Accueil 31</a></div>
           	<div id="itemSecondaire"><a href="#">Accueil 32</a></div>
        </div>
    </div>    
</div>

[ouldfella]

bonjour,
voici un exemple que tu peux adapter à ton menu :
http://users.tpg.com.au/j_birch/plug...rfish/#sample4
tu le télécharge ici :
http://users.tpg.com.au/j_birch/plug...fish/#download

[CloudCompany]

Merci pour cette proposition, mais je suis arrivé à avoir la forme que je souhaitais grâce aux conseils de Torgar. J'ai juste un problème, je n'arrive pas à modifier l'alignement vertical de mes <a> en inline.

En pièce jointe l'état actuel de mon menu.

Merci de votre aide dans tous les cas ^^

CloudCompany

[Torgar]

Pour un alignement vertical d'un texte sur une seule ligne il faut utiliser height et line-height avec une même valeur.

Ici, la logique voudrait qu'elle soit la même que celle de ta partie haute (bleu ciel). Désolé j'ai pas pu me pencher sur ton code pour te donner l'identifiant que tu as choisi.

[CloudCompany]

Bonsoir !
Ca y'est j'ai réussi mon menu !

Mon problème vient du fait que mon display:inline doit se transformer en display: inline-block.

Merci à tous pour vos précieux conseils qui m'ont permis d'obtenir le résultat que j'attendais !

A la prochaine!



CloudCompany

[NoSmoking]

Bonsoir,
pour info il existe http://css.developpez.com/galerie/?p...orizontaux#MH4, javascript inside.