Menu déroulant et coloration en CSS
hansou0208
Messages postés
2
Date d'inscription
Statut
Membre
Dernière intervention
-
tryan44 Messages postés 1288 Date d'inscription Statut Membre Dernière intervention -
tryan44 Messages postés 1288 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai mis en place un menu déroulant vertical avec au survol des elements du menu et des sous-menus une coloration (en l'occurence orange).
J'aimerais lorsque je survole un sous-menu, que le menu correspondant reste coloré.
Comment faire?
Merci de votre aide.
Voici mes codes HTML et CSS.
HTML
CSS
J'ai mis en place un menu déroulant vertical avec au survol des elements du menu et des sous-menus une coloration (en l'occurence orange).
J'aimerais lorsque je survole un sous-menu, que le menu correspondant reste coloré.
Comment faire?
Merci de votre aide.
Voici mes codes HTML et CSS.
HTML
<div id="menu"> <ul> <li class="current_page_item"><a href="index.html">Accueil</a></li> <li><a href="presentation.html">Qui sommes-nous ? </a> <ul class="sous-menu"> <li> <a href="quiSommesNous.html"> Qui sommes-nous? </a></li> <li> <a href="notreConcept.html"> Notre concept </a></li> <li> <a href="nosValeurs.html"> Nos valeurs </a></li> </ul> </li> <li><a href="polygonum.html">Le polygonum </a> <ul class="sous-menu"> <li> <a href="originePoly.html"> Les origines du polygonum </a></li> <li> <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> <br/><br/> </div>
CSS
#menu a:hover { background: rgb(246, 169,36); } #menu { background-color : #FFFFF3; width : 1000px; margin : auto; } #menu ul { margin: 0px 0px 0px 0px; padding: 0px 0px; list-style: none; line-height: normal; text-align: center; } #menu li { display: inline-block; } #menu a { display: block; padding: 11px 14px 11px 14px; background-color : rgb(123, 143, 56); text-decoration: none; text-transform: uppercase; text-align: center; font-family: 'Oswald', arial narrow, sans-serif; font-size: 15px; font-weight: 200; color: #FFFFFF; border: none; } #menu .current_page_item a { background: rgb(246, 169,36); } /***********************Sous menu************************/ #menu ul li li { /* on enlève ce comportement pour les liens du sous menu */ display: inherit; } #menu ul ul { position: absolute; /* on cache les sous menus complètement sur la gauche */ left: -999em; } #menu ul li:hover ul { /* Au survol des li du menu on replace les sous menus */ left: auto; } #menu ul li ul li:hover a{ background : black; }
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
- Supprimer menu déroulant excel - Forum Excel
- Canon quick menu - Télécharger - Utilitaires
1 réponse
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.