Menu accordéon horizontal

Fermé
Signaler
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
-
Messages postés
262
Date d'inscription
dimanche 3 mars 2013
Statut
Membre
Dernière intervention
17 avril 2015
-
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



21 réponses

Messages postés
262
Date d'inscription
dimanche 3 mars 2013
Statut
Membre
Dernière intervention
17 avril 2015
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;
}
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
11
Merci beaucoup 88av, mais juste une question, comment tu fais pour enlever la couleur de fond?
Messages postés
262
Date d'inscription
dimanche 3 mars 2013
Statut
Membre
Dernière intervention
17 avril 2015
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.
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
11
Merci pour ses informations :)
Messages postés
262
Date d'inscription
dimanche 3 mars 2013
Statut
Membre
Dernière intervention
17 avril 2015
7
De rien !!!

Ta question est-elle résolut ?
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
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/
Messages postés
262
Date d'inscription
dimanche 3 mars 2013
Statut
Membre
Dernière intervention
17 avril 2015
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;
}
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
11
merci!
Messages postés
1811
Date d'inscription
vendredi 28 janvier 2011
Statut
Membre
Dernière intervention
31 décembre 2018
266
pour arrondir les coins, tu utilise la propriété "border-radius" sur l'élément voulu

En exemple :

#menu { background:#333; border-radius:4px; }
Messages postés
262
Date d'inscription
dimanche 3 mars 2013
Statut
Membre
Dernière intervention
17 avril 2015
7
Là, je pense que tu peut mettre "résolue" a la question.
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
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?
Messages postés
262
Date d'inscription
dimanche 3 mars 2013
Statut
Membre
Dernière intervention
17 avril 2015
7
Non, désolé
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
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
Messages postés
262
Date d'inscription
dimanche 3 mars 2013
Statut
Membre
Dernière intervention
17 avril 2015
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.
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
11
Ca ne marche pas. Aidez moi SVP! :'(
Messages postés
262
Date d'inscription
dimanche 3 mars 2013
Statut
Membre
Dernière intervention
17 avril 2015
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.
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
11
Merci, ça fonctionne à merveille!
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
11
Et comment fait-on pour qu'il fasse toute la largeur de la page?
Messages postés
1811
Date d'inscription
vendredi 28 janvier 2011
Statut
Membre
Dernière intervention
31 décembre 2018
266
#menu
{
height:50px;
text-align: center;
font-size: 20px;
width: 100%;
}


:)
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
11
Ca marche pas :(
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
11
Ca ne marche pas et en plus j'aimerais pouvoir écrire des deux cotés du menu sans que ca le decale
Messages postés
262
Date d'inscription
dimanche 3 mars 2013
Statut
Membre
Dernière intervention
17 avril 2015
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.
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
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
Messages postés
262
Date d'inscription
dimanche 3 mars 2013
Statut
Membre
Dernière intervention
17 avril 2015
7
J'ai compris ce que tu veux dire, mais je vais regarder un autre jour, là, j'ai pas trop le temps.
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
11
Ok à plus tard alors ;)
Ps: si quelqu'un d'autre veut me répondre, il peut.
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
11
Tu as le temps de me répondre maintenant 88av ?
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
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; 
}