Menu déroulant
Résolu
youssef.allmlg
Messages postés
44
Date d'inscription
Statut
Membre
Dernière intervention
-
youssef.allmlg Messages postés 44 Date d'inscription Statut Membre Dernière intervention -
youssef.allmlg Messages postés 44 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Sur mon site, j'ai une boîte que lorsque je mets ma souris dessus, un menu déroulant s'affiche à la suite. Seulement, je ne sais pas comment faire en Javascript ou CSS. Mon est:
Je veux que lorsque je mets la souris sur le bouton «Lang», les boutons «Fr» et «En» s'affichent.
J'ai déjà essayé en CSS:
mais ça ne fonctionne évidemment pas. Je crois que la seule façon est d'utiliser Javascript.
Quelqu'un peut m'aider?
Merci d'avance!
Sur mon site, j'ai une boîte que lorsque je mets ma souris dessus, un menu déroulant s'affiche à la suite. Seulement, je ne sais pas comment faire en Javascript ou CSS. Mon est:
<div>
<ul id="lang-selection">
<a href=""><li id="lang-button">Lang</li></a>
<a href="fr/hosting"><li class="dropdown" style="border-bottom: none;">Fr</li></a>
<a href="en/hosting"><li class="dropdown">En</li></a>
</ul>
</div>
<style>
#lang-selection {width: 60px;
text-align: center;
font-size: 12pt;}
#lang-button {list-style-type: none;
padding-right: 18px;
background: url([http://potato.96.lt/dropdown.png)] no-repeat top right;
background-color: #f7b900;
color: black;
text-decoration: none;}
:hover#lang-button {background-color: #f4ca5a;}
.dropdown {display: none;
list-style-type:none;
border: 1px solid #f7b900;
color: black;
text-decoration: none;}
:hover.dropdown {background-color: #f7b900;
border-top: 1px solid #fdee00;}
</style>
Je veux que lorsque je mets la souris sur le bouton «Lang», les boutons «Fr» et «En» s'affichent.
J'ai déjà essayé en CSS:
:hover#lang-button {
.dropdown {display: normal;}
}
mais ça ne fonctionne évidemment pas. Je crois que la seule façon est d'utiliser Javascript.
Quelqu'un peut m'aider?
Merci d'avance!
A voir également:
- Menu déroulant
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Supprimer menu déroulant excel - Forum Word
- Effacer le contenue d'une cellule avec liste déroulante - Forum Excel
1 réponse
Salut,
Pour commencer tu as quelques erreurs dans ton code html et javascript.
1. Les balises <li> doivent être des enfants directes de la balises <ul>. Tes balises <a> doivent donc être placée dans la balise <li>. Exemple :
2. La pseudo classe :hover doit être placée après le sélecteur css. Par exemple pour cibler le hover de l'élément #lang-button :
3. Tu ne peux pas ajouter de sélecteur dans un bloc contenant des règles css :
Ici tu essayes de cibler l'élément dropdown à partir de l'élément #lang-button, ceci est syntaxiquement incorrect (revoir sélecteur css).
4. La valeur 'normal' n'existe pas pour la propriété display. Tu trouveras ici la liste des valeurs possibles : https://www.w3schools.com/cssref/pr_class_display.asp
Après avoir corriger ces erreurs, je te propose une nouvelle structure html pour la construction du sous-menu :
-> Le sous menu est encadré dans un unique <li class="dropdown">
A partir de cette structure, il suffit d'afficher (display: block;) le <li class="dowdown"> qui est le frère de l'élément <li id="lang-button"> (dont le sélecteur css #lang-button:hover + .dropdown) :
Bonne journée
Pour commencer tu as quelques erreurs dans ton code html et javascript.
1. Les balises <li> doivent être des enfants directes de la balises <ul>. Tes balises <a> doivent donc être placée dans la balise <li>. Exemple :
<ul id="lang-selection"> <li id="lang-button"><a href="">Lang</a></li> </ul>
2. La pseudo classe :hover doit être placée après le sélecteur css. Par exemple pour cibler le hover de l'élément #lang-button :
#lang-button:hover {
/* règles css */
}
3. Tu ne peux pas ajouter de sélecteur dans un bloc contenant des règles css :
:hover#lang-button {
.dropdown {display: normal;}
}
Ici tu essayes de cibler l'élément dropdown à partir de l'élément #lang-button, ceci est syntaxiquement incorrect (revoir sélecteur css).
4. La valeur 'normal' n'existe pas pour la propriété display. Tu trouveras ici la liste des valeurs possibles : https://www.w3schools.com/cssref/pr_class_display.asp
Après avoir corriger ces erreurs, je te propose une nouvelle structure html pour la construction du sous-menu :
<div>
<ul id="lang-selection">
<li id="lang-button"><a href="">Lang</a></li>
<li class="dropdown">
<ul>
<li style="border-bottom: none;"><a href="fr/hosting">Fr</a></li>
<li ><a href="en/hosting">En</a></li>
</ul>
</li>
</ul>
</div>
-> Le sous menu est encadré dans un unique <li class="dropdown">
A partir de cette structure, il suffit d'afficher (display: block;) le <li class="dowdown"> qui est le frère de l'élément <li id="lang-button"> (dont le sélecteur css #lang-button:hover + .dropdown) :
#lang-selection {width: 60px;
text-align: center;
font-size: 12pt;}
#lang-button {list-style-type: none;
padding-right: 18px;
background: url('http://potato.96.lt/dropdown.png') no-repeat top right;
background-color: #f7b900;
color: black;
text-decoration: none;}
#lang-button:hover {background-color: #f4ca5a;}
.dropdown {display: none;
list-style-type:none;
border: 1px solid #f7b900;
color: black;
text-decoration: none;}
.dropdown:hover {background-color: #f7b900;
border-top: 1px solid #fdee00;}
/* on affiche le sous menu quand la souris passe #lang-button et quand la souris est sur le sous menu */
#lang-button:hover + .dropdown,
.dropdown:hover {
display: block;
}
Bonne journée
youssef.allmlg
Messages postés
44
Date d'inscription
Statut
Membre
Dernière intervention
Merci beaucoup. Et en passant c'était un exemple vite fait puisque je n'avais pas encore fait mon code.
youssef.allmlg
Messages postés
44
Date d'inscription
Statut
Membre
Dernière intervention
je vient d'essayer et ça ne marche pas!?!?
Pitet
Messages postés
2826
Date d'inscription
Statut
Membre
Dernière intervention
527
http://jsfiddle.net/zw2v7myo/
youssef.allmlg
Messages postés
44
Date d'inscription
Statut
Membre
Dernière intervention
Merci beaucoup!!