Menus hover animations

[Commercique]

Bonjour tout le monde
Je suis à la recherche de plusieurs choses pour poursuivre la création de mon site ( https://www.jr-commercique.fr/news/ ) . On peut voir que j'ai créé un menu en dessous du slider (un peu de css personnalisé pour ce rendu, le but était d'avoir un menu un peu style win8/10 ) .

Mais ce que j'aimerais, c'est que quand je passe ma souris sur un des item du menu (attention, suite à certaines directives il n'y a pas de sous menu mais un autre menu accessible en cliquant sur les item) , il y ait une mise en valeur du menu actuel (police plus grosse, couleur plus claire peut-être) avec une animation . Je m'explique : quand je passe ma souris sur par exemple "Tutos" , le mot "tutos" se déplace vers le haut par exemple et en dessous y a quelque chose qui apparait.
Je sais que ceci est faisable directement en css personnalisé, mais je voulais savoir si sur joomla ya une extension qui permettrait ceci sans devoir rentrer dans le code?

Bonne journée

[pmleconte]

Re : Menus hover animations

Bonjour,

Il y a pas mal de solutions. J'en ai essayé une : http://extensions.favthemes.com/faveffects

Sinon, regardez du côté de https://www.joomlack.fr/extensions-joomla/maximenu-ck

Bonne journée,

Pascal

[Commercique]

Re : Menus hover animations

Merci de la réponse rapide pmleconte
Mais est-il possible d'appliquer favthemes sur des menus?

Pur maximenu je sais pas si c'est possible ce que je veux faire

Bonne journée

[pmleconte]

Re : Menus hover animations

Bonjour,

Pour une démo, j'ai utilisé des bouts de css que j'ai inclus dans mon custom.css et cela donne http://432473037d.url-de-test.ws/gouz/

J'ai repris le faveffects-effect6 et, dans l'onglet "Type de lien" de chacun de mes menus, j'ai mis faveffects-effect6 dans "Style CSS du lien".

Le code ajouté dans mon custom CSS (j'ai pris l'effet 6, mais vous pouvez en prendre un autre dans le css de faveffects)

.faveffects-effect6 {
  -webkit-transition: 700ms;
  -o-transition: 700ms;
  transition: 700ms;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.faveffects-effect6:hover {
  -webkit-transform: translateY(10%);
  -ms-transform: translateY(10%);
  -o-transform: translateY(10%);
  transform: translateY(10%);
  background-color: #eee!important;
  border-color: #444!important;
  color: #444!important;
}
.faveffects-effect6 i:hover {
  color: #444!important;
}

Pascal