Menu déroulant et coloration en CSS
Fermé
hansou0208
Messages postés
2
Date d'inscription
lundi 12 novembre 2012
Statut
Membre
Dernière intervention
12 novembre 2012
-
12 nov. 2012 à 15:16
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 - 12 nov. 2012 à 17:26
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 - 12 nov. 2012 à 17:26
A voir également:
- Menu déroulant et coloration en CSS
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Windows 11 menu démarrer classique - Guide
- Supprimer menu déroulant excel - Forum Excel
1 réponse
tryan44
Messages postés
1288
Date d'inscription
mardi 24 janvier 2012
Statut
Membre
Dernière intervention
26 octobre 2014
220
12 nov. 2012 à 17:26
12 nov. 2012 à 17:26
Salut,
Je pense qu'il faut utiliser du Javascript et la fonction onmouseout et onmouseover mais je peut me planter ...
On associe un id unique pour chaque menu. Pour chaque "li" du sous-menu correspondant on attribue une fonction Javascript sur"onmouseout" et "onmouseover".
Les 2 fonctions :
La première fonction change la couleur de fond du menu correspondant au sous menu survolé. La seconde fonction rétablie la couleur d'origine.
Je pense qu'il faut utiliser du Javascript et la fonction onmouseout et onmouseover mais je peut me planter ...
On associe un id unique pour chaque menu. Pour chaque "li" du sous-menu correspondant on attribue une fonction Javascript sur"onmouseout" et "onmouseover".
<ul> <li class="current_page_item"><a href="index.html">Accueil</a></li> <li><a id="aa" href="presentation.html">Qui sommes-nous ? </a> <ul class="sous-menu"> <li onmouseover="changecouleur('aa');" onmouseout="normal('aa');"> <a href="quiSommesNous.html"> Qui sommes-nous? </a></li> <li onmouseover="changecouleur('aa');" onmouseout="normal('aa');"> <a href="notreConcept.html"> Notre concept </a></li> <li onmouseover="changecouleur('aa');" onmouseout="normal('aa');""> <a href="nosValeurs.html"> Nos valeurs </a></li> </ul> </li> <li><a id="bb" href="polygonum.html">Le polygonum </a> <ul class="sous-menu"> <li onmouseover="changecouleur('bb');" onmouseout="normal('bb');"> <a href="originePoly.html"> Les origines du polygonum </a></li> <li onmouseover="changecouleur('bb');" onmouseout="normal('bb');"> <a href="composantsPoly.html"> Les composants du polygonum </a></li> </ul> </li> <li><a href="https://www.moraz.fr/6-baume-reparateur" target="_blank">Commander le produit </a></li> <li><a href="contact.html">Nous contacter</a></li> <li class="last"><a href="https://www.moraz.fr/" target="_blank">Nos autres produits</a></li> </ul>
Les 2 fonctions :
function changecouleur(id){ var couleur = document.getElementById(id); couleur.style.background="rgb(246, 169,36)"; } function normal(id){ var couleur = document.getElementById(id); couleur.style.background="rgb(123, 143, 56)"; }
La première fonction change la couleur de fond du menu correspondant au sous menu survolé. La seconde fonction rétablie la couleur d'origine.