Menu accordéon horizontal

Question

Bonjour, 
Je souhaiterai savoir comment faire un menu accordéon horizontal comme celui-ci: http://www.rueducommerce.fr/home/index.htm , car je n'ai jamais trouvé comment le faire,donc si vous pouviez m'aider vous seriez gentil
Merci d'avance



Configuration: Windows XP / Chrome 25.0.1364.172

88av · Answer

Tu peut essayer avec le code là : J'ai juste fait un copier coller de mon code, mais tu dois pouvoir le modifier facilement, ce code n'est pas très compliquer. Pour le html : ET pour le css body { width: 93%; background-color: #97EB66; } #menu ul { margin:0; padding:0; list-style-type:none; text-align:center; } #menu li { float:left; margin:auto; padding:0; background-color:#f40000; } #menu li a { display:block; width:100px; color:white; text-decoration:none; padding:5px; } #menu li a:hover { color:#FFD700; } #menu ul li ul { display:none; } #menu ul li:hover ul { display:block; } #menu li:hover ul li { float:none; } #menu li ul { position:absolute; } #menu { height:50px; text-align: center; font-size: 20px } #menu a { text-align: center; }

Thewebmaster76 · Answer

Merci beaucoup 88av, mais juste une question, comment tu fais pour enlever la couleur de fond?

Thewebmaster76 · Answer

Merci pour ses informations :)

Thewebmaster76 · Answer

Pas tout à fait car je voulais faire un effet.C'étais d'arrondir les coins des menus et quand on passait sur un lien ça le surlignait , comme sur ce site en haut en droite de la page: https://jquery.com/

Thewebmaster76 · Answer

Oui moi aussi, mais avant une question, tu n'aurai pas un lien pour les styles des menus accordéons, histoire que je le rende super dart?

Thewebmaster76 · Answer

Comment centrer le menu car j'ai essayé de modifier le fichier css et html mais ça ne change rien :(
Merci de votre aide

88av · Answer

Je nais pas eu le temps d'essayer, mais essaye de mettre la balise dans le code html. Voila ce qu'il faut faire : Le code html Je redit que je n'ai pas eu le temps d'essayer, mais si ça ne marche pas, alors, je ne saurais pas comment faire.

Thewebmaster76 · Answer

Ca ne marche pas. Aidez moi SVP! :'(

88av · Answer

Je crois que j'ai trouvé : dans le code CSS, tu dois normalement avoir ça :  


#menu   
{   
height:50px;  
text-align: center;  
font-size: 20px;  
}  

En fait, il faut rajouter ces lignes :  

margin-left: 25%;  
margin-right: 25%;  
width: 50%;  


Cela donne :  

#menu   
{   
height:50px;  
text-align: center;  
font-size: 20px;  
margin-left: 25%;  
margin-right: 25%;  
width: 50%;  
}  


Normalement, ça devrait marcher.

Thewebmaster76 · Answer

Merci, ça fonctionne à merveille!

Thewebmaster76 · Answer

Et comment fait-on pour qu'il fasse toute la largeur de la page?

inspiring · Answer

#menu
{
height:50px;
text-align: center;
font-size: 20px;
width: 100%;
}


:)

Thewebmaster76 · Answer

Ca marche pas :(

Thewebmaster76 · Answer

Ca ne marche pas et en plus j'aimerais pouvoir écrire des deux cotés du menu sans que ca le decale

88av · Answer

Je ne comprend pas.


Par contre, pour que ton menu fasse toute la largeur de la page, ça dépend combien tu veux mettre d'onglet a ton menu.

Thewebmaster76 · Answer

Je voudrais mettre 7 onglets et pour ce qui est de ce que tu ne comprends pas, je voudrais écrire "ACCEUIL" des deux cotés du menu mais ca décale le menu et "ACCEUIL".
Voici le lien pour que tu vois: http://img407.imageshack.us/img407/6854/imagemenuhorizontal.jpg

88av · Answer

J'ai compris ce que tu veux dire, mais je vais regarder un autre jour, là, j'ai pas trop le temps.

Thewebmaster76 · Answer

Ok à plus tard alors ;)
Ps: si quelqu'un d'autre veut me répondre, il peut.

Thewebmaster76 · Answer

Tu as le temps de me répondre maintenant 88av ?

Thewebmaster76 · Answer

C'est bon, mon menu est centré mais les sous-menus s'affichent horizontalement et non verticalement !
Quelqu'un pourrait t-il y remédier ?


body 
{ 
width: 100%; 
background-color: #97EB66; 
} 

#menu ul { 
margin:0; 
padding:0; 
list-style-type:none; 
text-align:center; 
} 

#menu li { 
display:inline-block; 
margin:auto; 
padding:0; 
background-color:#f40000; 
} 

#menu li a { 
display:block; 
width:100px; 
color:white; 
text-decoration:none; 
padding:5px; 
} 

#menu li a:hover { 
color: #000000;
background-color: #0000FF; 
} 

#menu ul li ul { 
display:none; 
} 

#menu ul li:hover ul { 
display:block; 
} 

#menu li:hover ul li { 
float:none; 
} 

#menu li ul { 
position:absolute;
} 

#menu 
{ 
 
text-align: center; 

} 

#menu a 
{ 
text-align: center; 
}

88av · Answer

A tu une copie écran quand un menu déroulant est déplié ?

Menu accordéon horizontal

21 réponses

Votre réponse

Discussions similaires

Newsletters