Menu accordéon horizontal
Fermé
Thewebmaster76
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
-
21 mars 2013 à 20:16
88av Messages postés 263 Date d'inscription dimanche 3 mars 2013 Statut Membre Dernière intervention 17 avril 2015 - 9 mai 2013 à 15:38
88av Messages postés 263 Date d'inscription dimanche 3 mars 2013 Statut Membre Dernière intervention 17 avril 2015 - 9 mai 2013 à 15:38
A voir également:
- Menu accordéon horizontal
- Menu déroulant excel - Guide
- Windows 11 menu démarrer classique - Guide
- Canon quick menu - Télécharger - Utilitaires
- Réinitialiser menu démarrer windows 10 - Guide
- Menu demarrer windows 10 - Guide
21 réponses
88av
Messages postés
263
Date d'inscription
dimanche 3 mars 2013
Statut
Membre
Dernière intervention
17 avril 2015
7
Modifié par 88av le 21/03/2013 à 20:26
Modifié par 88av le 21/03/2013 à 20:26
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;
}
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;
}
Thewebmaster76
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
11
21 mars 2013 à 22:07
21 mars 2013 à 22:07
Merci beaucoup 88av, mais juste une question, comment tu fais pour enlever la couleur de fond?
88av
Messages postés
263
Date d'inscription
dimanche 3 mars 2013
Statut
Membre
Dernière intervention
17 avril 2015
7
22 mars 2013 à 18:42
22 mars 2013 à 18:42
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.
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.
Thewebmaster76
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
11
22 mars 2013 à 19:50
22 mars 2013 à 19:50
Merci pour ses informations :)
88av
Messages postés
263
Date d'inscription
dimanche 3 mars 2013
Statut
Membre
Dernière intervention
17 avril 2015
7
Modifié par 88av le 23/03/2013 à 17:27
Modifié par 88av le 23/03/2013 à 17:27
De rien !!!
Ta question est-elle résolut ?
Ta question est-elle résolut ?
Thewebmaster76
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
11
23 mars 2013 à 18:38
23 mars 2013 à 18:38
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
dimanche 3 mars 2013
Statut
Membre
Dernière intervention
17 avril 2015
7
23 mars 2013 à 20:26
23 mars 2013 à 20:26
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;
}
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
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
11
24 mars 2013 à 00:01
24 mars 2013 à 00:01
merci!
inspiring
Messages postés
1813
Date d'inscription
vendredi 28 janvier 2011
Statut
Membre
Dernière intervention
31 décembre 2018
265
24 mars 2013 à 00:10
24 mars 2013 à 00:10
pour arrondir les coins, tu utilise la propriété "border-radius" sur l'élément voulu
En exemple :
#menu { background:#333; border-radius:4px; }
En exemple :
#menu { background:#333; border-radius:4px; }
88av
Messages postés
263
Date d'inscription
dimanche 3 mars 2013
Statut
Membre
Dernière intervention
17 avril 2015
7
24 mars 2013 à 12:48
24 mars 2013 à 12:48
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
Thewebmaster76
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
11
24 mars 2013 à 12:53
24 mars 2013 à 12:53
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
dimanche 3 mars 2013
Statut
Membre
Dernière intervention
17 avril 2015
7
24 mars 2013 à 13:33
24 mars 2013 à 13:33
Non, désolé
Thewebmaster76
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
11
6 avril 2013 à 17:44
6 avril 2013 à 17:44
Comment centrer le menu car j'ai essayé de modifier le fichier css et html mais ça ne change rien :(
Merci de votre aide
Merci de votre aide
88av
Messages postés
263
Date d'inscription
dimanche 3 mars 2013
Statut
Membre
Dernière intervention
17 avril 2015
7
6 avril 2013 à 20:11
6 avril 2013 à 20:11
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.
<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.
Thewebmaster76
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
11
6 avril 2013 à 21:46
6 avril 2013 à 21:46
Ca ne marche pas. Aidez moi SVP! :'(
88av
Messages postés
263
Date d'inscription
dimanche 3 mars 2013
Statut
Membre
Dernière intervention
17 avril 2015
7
Modifié par 88av le 7/04/2013 à 10:05
Modifié par 88av le 7/04/2013 à 10:05
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.
#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
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
11
7 avril 2013 à 16:29
7 avril 2013 à 16:29
Merci, ça fonctionne à merveille!
Thewebmaster76
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
11
7 avril 2013 à 16:51
7 avril 2013 à 16:51
Et comment fait-on pour qu'il fasse toute la largeur de la page?
inspiring
Messages postés
1813
Date d'inscription
vendredi 28 janvier 2011
Statut
Membre
Dernière intervention
31 décembre 2018
265
7 avril 2013 à 18:07
7 avril 2013 à 18:07
#menu
{
height:50px;
text-align: center;
font-size: 20px;
width: 100%;
}
:)
{
height:50px;
text-align: center;
font-size: 20px;
width: 100%;
}
:)
Thewebmaster76
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
11
8 avril 2013 à 19:26
8 avril 2013 à 19:26
Ca marche pas :(
Thewebmaster76
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
11
9 avril 2013 à 21:26
9 avril 2013 à 21:26
Ca ne marche pas et en plus j'aimerais pouvoir écrire des deux cotés du menu sans que ca le decale
88av
Messages postés
263
Date d'inscription
dimanche 3 mars 2013
Statut
Membre
Dernière intervention
17 avril 2015
7
10 avril 2013 à 10:14
10 avril 2013 à 10:14
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.
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
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
11
10 avril 2013 à 11:39
10 avril 2013 à 11:39
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
Voici le lien pour que tu vois: http://img407.imageshack.us/img407/6854/imagemenuhorizontal.jpg
88av
Messages postés
263
Date d'inscription
dimanche 3 mars 2013
Statut
Membre
Dernière intervention
17 avril 2015
7
10 avril 2013 à 13:26
10 avril 2013 à 13:26
J'ai compris ce que tu veux dire, mais je vais regarder un autre jour, là, j'ai pas trop le temps.
Thewebmaster76
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
11
10 avril 2013 à 14:31
10 avril 2013 à 14:31
Ok à plus tard alors ;)
Ps: si quelqu'un d'autre veut me répondre, il peut.
Ps: si quelqu'un d'autre veut me répondre, il peut.
Thewebmaster76
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
11
11 avril 2013 à 19:35
11 avril 2013 à 19:35
Tu as le temps de me répondre maintenant 88av ?
Thewebmaster76
Messages postés
352
Date d'inscription
dimanche 17 mars 2013
Statut
Membre
Dernière intervention
17 février 2019
11
12 avril 2013 à 23:29
12 avril 2013 à 23:29
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 ?
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;
}