2017-08-26 2 views
-1

J'ai un site wordpress, http://watershedgeo.staging.wpengine.com/#, et j'utilise un thème et il est construit dans le menu nav.CSS - icône animer pour 'faire pivoter' sur la liste déroulante d'un menu sur le site wordpress

Je l'ai modifié pour utiliser des icônes impressionnantes de police après les éléments de menu qui ont des éléments de liste déroulante. J'utilise le bon angle,>, mais j'aimerais utiliser un plugin ou un css pour l'animer de sorte que lorsque la liste déroulante descend, l'icône tourne sur 'V'. Je ne voudrais pas construire de JS dans ce domaine et je sais que cela peut être fait avec CSS Je ne suis pas sûr de la meilleure façon de faire cela qui fonctionne aussi bien dans l'environnement WP.

CSS actuel:

.fusion-megamenu-icon { 
display: inline; 
margin-left: 12px; 
float: right; 
} 


.fusion-megamenu-icon:hover { 
transform: rotate(90deg); 
} 
+0

avez-vous essayé de transformer sur l'icône .current-menu-item ? comme: '.current-menu-item .fa.glyphicon.fa-angle-droit { transformation: rotation (90deg); } 'essayer aussi en stationnaire –

+0

Désolé, j'ai mis à jour avec mon CSS actuel et cela fonctionne quand je survole seulement l'icône. Existe-t-il un moyen pour que cela fonctionne si je survole l'élément de menu en général cependant? –

+0

oui, regardez la structure html et mettez à jour le sélecteur avec la bonne classe. Mon exemple utilise le CSS appliqué à l'élément de liste de la page en cours. (li: hover icon) sélectionnez le parent –

Répondre

1

Ajoutez quelques CSS personnalisés à votre code

Essayez cette

CSS

ul.fusion-menu > li.menu-item-has-children:hover a i.fa{ 
    transform:rotate(90deg); 
} 
+1

pas besoin d'impliquer une nouvelle classe et js là. wordpress utilise sa propre classe et les met à jour pour chaque page demandée si nécessaire;) –