Menu accordéon horizontal

Thewebmaster76 Messages postés 354 Date d'inscription Statut Membre Dernière intervention -
88av Messages postés 263 Date d'inscription Statut Membre Dernière intervention - 9 mai 2013 à 15:38

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

Afficher la suite

A voir également:

Menu accordéon horizontal
Menu déroulant excel - Guide
Canon quick menu - Télécharger - Utilitaires
Windows 11 menu contextuel classique - Guide
Windows 11 menu démarrer classique - Guide
Réinitialiser menu démarrer windows 10 - Guide

21 réponses

Réponse 1 / 21

88av Messages postés 263 Date d'inscription Statut Membre Dernière intervention 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;
}

Réponse 2 / 21

Thewebmaster76 Messages postés 354 Date d'inscription Statut Membre Dernière intervention 11

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

88av Messages postés 263 Date d'inscription Statut Membre Dernière intervention 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.

Réponse 3 / 21

Thewebmaster76 Messages postés 354 Date d'inscription Statut Membre Dernière intervention 11

Merci pour ses informations :)

88av Messages postés 263 Date d'inscription Statut Membre Dernière intervention 7

De rien !!!

Ta question est-elle résolut ?

Réponse 4 / 21

Thewebmaster76 Messages postés 354 Date d'inscription Statut Membre Dernière intervention 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/

88av Messages postés 263 Date d'inscription Statut Membre Dernière intervention 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;
}

Thewebmaster76 Messages postés 354 Date d'inscription Statut Membre Dernière intervention 11

merci!

inspiring Messages postés 1813 Date d'inscription Statut Membre Dernière intervention 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; }

88av Messages postés 263 Date d'inscription Statut Membre Dernière intervention 7

Là, je pense que tu peut mettre "résolue" a la question.

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

Posez votre question

Réponse 5 / 21

Thewebmaster76 Messages postés 354 Date d'inscription Statut Membre Dernière intervention 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?

88av Messages postés 263 Date d'inscription Statut Membre Dernière intervention 7

Non, désolé

Réponse 6 / 21

Thewebmaster76 Messages postés 354 Date d'inscription Statut Membre Dernière intervention 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

Réponse 7 / 21

88av Messages postés 263 Date d'inscription Statut Membre Dernière intervention 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.

Réponse 8 / 21

Thewebmaster76 Messages postés 354 Date d'inscription Statut Membre Dernière intervention 11

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

Réponse 9 / 21

88av Messages postés 263 Date d'inscription Statut Membre Dernière intervention 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.

Réponse 10 / 21

Thewebmaster76 Messages postés 354 Date d'inscription Statut Membre Dernière intervention 11

Merci, ça fonctionne à merveille!

Réponse 11 / 21

Thewebmaster76 Messages postés 354 Date d'inscription Statut Membre Dernière intervention 11

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

Réponse 12 / 21

inspiring Messages postés 1813 Date d'inscription Statut Membre Dernière intervention 265

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

:)

Réponse 13 / 21

Thewebmaster76 Messages postés 354 Date d'inscription Statut Membre Dernière intervention 11

Ca marche pas :(

Réponse 14 / 21

Thewebmaster76 Messages postés 354 Date d'inscription Statut Membre Dernière intervention 11

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

Réponse 15 / 21

88av Messages postés 263 Date d'inscription Statut Membre Dernière intervention 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.

Réponse 16 / 21

Thewebmaster76 Messages postés 354 Date d'inscription Statut Membre Dernière intervention 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

Réponse 17 / 21

88av Messages postés 263 Date d'inscription Statut Membre Dernière intervention 7

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

Réponse 18 / 21

Thewebmaster76 Messages postés 354 Date d'inscription Statut Membre Dernière intervention 11

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

Réponse 19 / 21

Thewebmaster76 Messages postés 354 Date d'inscription Statut Membre Dernière intervention 11

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

Réponse 20 / 21

Thewebmaster76 Messages postés 354 Date d'inscription Statut Membre Dernière intervention 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; 
}

Discussions similaires

menu caché

Comment activer le Bluetooth sur une TV Samsung ?

Mon PC marque press the esc key for startup menu

Déblocage du mode hôtel Philips 20HF5234/10

Activer le bluetooth sur smart TV Samsung

Votre réponse

Discussions similaires