Sujet Précédent Sujet Suivant

Menu accordéon horizontal

Thewebmaster76 Messages postés 387 Statut Membre -  
88av Messages postés 381 Statut Membre -
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

A voir également:

21 réponses

  • 1
  • 2
Réponse 1 / 21
88av Messages postés 381 Statut Membre 7
 
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 :

<div id="menu">
<ul>
<li><a href="">Accueil</a>
<ul>
<li><a href="index.html">Accueil</a>
<li><a href="code.php">Entrer un<br/>code</a>
</ul>
<li><a href="">Monde 1</a>
<ul>
<li><a href="1nivau1.html">Niveau 1</a>
<li><a href="1nivau2.html">Niveau 2</a>
<li><a href="1nivau3.html">Niveau 3</a>
<li><a href="1nivau4.html">Niveau 4</a>
<li><a href="1nivau5.html">Niveau 5</a>
<li><a href="1impossible.html">L'impossible</a>
</ul>
<li><a href="">Monde 2</a>
<ul>
<li><a href="2nivau1.html">Niveau 1</a>
<li><a href="2nivau2.html">Niveau 2</a>
<li><a href="2nivau3.html">Niveau 3</a>
<li><a href="2nivau4.html">Niveau 4</a>
<li><a href="2nivau5.html">Niveau 5</a>
<li><a href="2impossible.html">L'impossible</a>
</ul>
<li><a href="">Monde 3</a>
<ul>
<li><a href="3nivau1.php">Niveau 1</a>
<li><a href="3nivau2.php">Niveau 2</a>
<li><a href="3nivau3.php">Niveau 3</a>
<li><a href="3nivau4.php">Niveau 4</a>
<li><a href="3nivau5.php">Niveau 5</a>
<li><a href="3impossible.php">L'impossible</a>
</ul>
</div>

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;
}
0
Réponse 2 / 21
Thewebmaster76 Messages postés 387 Statut Membre 11
 
Merci beaucoup 88av, mais juste une question, comment tu fais pour enlever la couleur de fond?
0
88av Messages postés 381 Statut Membre 7
 
Pour enlever la couleur du fond de la page, dans le code css, tu dois avoir ça :

body
{
width: 93%;
background-color: #97EB66;
}

En faites, il suffit d'enlever la ligne background-color: #97EB66;

__________________________________________________________________________

Pour enlever la couleur du menu déroulant, dans le code css, tu dois avoir ça :

#menu li {
float:left;
margin:auto;
padding:0;
background-color:#f40000;
}


Et bien tu enlève la ligne background-color: #f40000;


__________________________________________________________________________

Si tu veux, tu peut aussi changer le code couleur.
0
Réponse 3 / 21
Thewebmaster76 Messages postés 387 Statut Membre 11
 
Merci pour ses informations :)
0
88av Messages postés 381 Statut Membre 7
 
De rien !!!

Ta question est-elle résolut ?
0
Réponse 4 / 21
Thewebmaster76 Messages postés 387 Statut Membre 11
 
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/
0
88av Messages postés 381 Statut Membre 7
 
Pour arrondir, je ne sais pas, mais pour surligner quand on passe la souris, c'est simple :

Dans le code CSS, tu dois avoir ça :

#menu li a:hover {
color:#FFD700;
}


Il suffit de rajouter cette ligne:
background-color: #000000;


Cela donne donc :

#menu li a:hover {
color:#FFD700;
background-color: #000000;
}
0
Thewebmaster76 Messages postés 387 Statut Membre 11
 
merci!
0
inspiring Messages postés 1936 Statut Membre 265
 
pour arrondir les coins, tu utilise la propriété "border-radius" sur l'élément voulu

En exemple :

#menu { background:#333; border-radius:4px; }
0
88av Messages postés 381 Statut Membre 7
 
Là, je pense que tu peut mettre "résolue" a la question.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 21
Thewebmaster76 Messages postés 387 Statut Membre 11
 
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?
0
88av Messages postés 381 Statut Membre 7
 
Non, désolé
0
Réponse 6 / 21
Thewebmaster76 Messages postés 387 Statut Membre 11
 
Comment centrer le menu car j'ai essayé de modifier le fichier css et html mais ça ne change rien :(
Merci de votre aide
0
Réponse 7 / 21
88av Messages postés 381 Statut Membre 7
 
Je nais pas eu le temps d'essayer, mais essaye de mettre la balise <center> dans le code html. Voila ce qu'il faut faire :

<html>
<body>
<center>

Le code html

</center>

</body>
</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.
0
Réponse 8 / 21
Thewebmaster76 Messages postés 387 Statut Membre 11
 
Ca ne marche pas. Aidez moi SVP! :'(
0
Réponse 9 / 21
88av Messages postés 381 Statut Membre 7
 
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.
0
Réponse 10 / 21
Thewebmaster76 Messages postés 387 Statut Membre 11
 
Merci, ça fonctionne à merveille!
0
Réponse 11 / 21
Thewebmaster76 Messages postés 387 Statut Membre 11
 
Et comment fait-on pour qu'il fasse toute la largeur de la page?
0
Réponse 12 / 21
inspiring Messages postés 1936 Statut Membre 265
 
#menu
{
height:50px;
text-align: center;
font-size: 20px;
width: 100%;
}

:)
0
Réponse 13 / 21
Thewebmaster76 Messages postés 387 Statut Membre 11
 
Ca marche pas :(
0
Réponse 14 / 21
Thewebmaster76 Messages postés 387 Statut Membre 11
 
Ca ne marche pas et en plus j'aimerais pouvoir écrire des deux cotés du menu sans que ca le decale
0
Réponse 15 / 21
88av Messages postés 381 Statut Membre 7
 
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.
0
Réponse 16 / 21
Thewebmaster76 Messages postés 387 Statut Membre 11
 
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
0
Réponse 17 / 21
88av Messages postés 381 Statut Membre 7
 
J'ai compris ce que tu veux dire, mais je vais regarder un autre jour, là, j'ai pas trop le temps.
0
Réponse 18 / 21
Thewebmaster76 Messages postés 387 Statut Membre 11
 
Ok à plus tard alors ;)
Ps: si quelqu'un d'autre veut me répondre, il peut.
0
Réponse 19 / 21
Thewebmaster76 Messages postés 387 Statut Membre 11
 
Tu as le temps de me répondre maintenant 88av ?
0
Réponse 20 / 21
Thewebmaster76 Messages postés 387 Statut Membre 11
 
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; 
}
0

Discussions similaires

TV continental Edison bloqué sur le menu
Utilisateur anonyme -
jeannets -

1 réponse
menu caché
laurent -
ChariduP -

7 réponses
Mon PC marque press the esc key for startup menu
Jonas2022 -
SATS_fr -

5 réponses
Comment activer le Bluetooth sur une TV Samsung ?
zaraki490 -
Marjo -

110 réponses
Déblocage du mode hôtel Philips 20HF5234/10
Jo_3 -
TRAORE_2505 -

7 réponses