Vous pouvez ajouter une interaction dans votre menu en utilisant un effet de survol : placez votre souris sur un lien de menu et l'image d'aperçu dans la colonne changera en fonction des paramètres de cet élément de menu. C'est une fonctionnalité intéressante que vous pouvez facilement faire en utilisant Maximenu CK.
Comment ça marche
Vous devez définir une image pour chaque élément de menu, cette image sera masquée par défaut. Ensuite, ajoutez une image dans une colonne, ou à un autre endroit dans le même sous-menu que votre élément de menu, et lorsque vous survolez l'élément de menu Maximenu CK remplacera automatiquement l'image de la colonne par sa propre image. Vous obtiendrez alors un effet de survol !
Les réglages à faire :
- configurer les éléments de menu avec une classe css personnalisée
rolloveritem - configurer une image personnalisée dans un module ou où vous le souhaitez, avec la classe css
rolloverimage
Configurer la classe css sur les éléments de menu
Allez dans le gestionnaire de menu de votre site web Joomla et créez votre structure de menu comme vous le souhaitez. Créez des liens et pour chaque lien où vous souhaitez ajouter l'effet de survol, allez dans l'onglet Maximenu CK Params et ajoutez la classe css rolloveritem
Créer le module personnalisé
Vous pouvez utiliser un module personnalisé mod_custom pour ajouter une image dans votre menu. Consultez la documentation Charger un module dans le menu pour ajouter votre module.
Modifiez le code de votre éditeur (ou utilisez un éditeur qui autorise la fonctionnalité de classe css sur l'image) et ajoutez l'attribut de classe avec la valeur rolloverimage
Configurer la disposition du menu
Allez dans Maximenu CK et éditez le menu pour créer vos colonnes. Voir la documentation Manage the columns and rows
Ajoutez ensuite l'image pour chaque élément de menu où vous avez ajouté l'élément de survol de classe css, et chargez le module avec l'image dans le sous-menu.
C'est tout, votre menu va maintenant vous montrer chaque image d'élément de menu au survol de la souris.
News