- Statut : non résolu
- Ce sujet contient 15 réponses, 4 participants et a été mis à jour pour la dernière fois par soufianisme, le il y a 6 années et 10 mois.
-
AuteurMessages
-
28 août 2015 à 16 h 14 min #553547
Bonjour,
je recherche un plug-in assez spécifique, j’en ai bien essayé une vingtaine mais aucun ne répond précisément à ce que je recherche.
je cherche un plug-in qui gère le menu, et indispensable : qui affichent automatiquement une image à côté du menu mais uniquement quand on passe la souris sur un élément de ce menu.
J’ai bien trouvé des plug-ins qui affichent des images dans le menu, mais impossible de mettre une option : uniquement au survol de la souris.
Comme vous pouvez voir sur cette page :
http://otwthemes.com/demos/1ts/?item=Sidebar%20Widget%20Managerquand on clique une fois sur : le menu Sidebar, et qu’ensuite on passe la souris sur un autre lien, il y a automatiquement une image qui s’affiche sur le côté et celle-ci disparaît immédiatement lorsque la souris passe sur un autre élément.
Avantage de ce menu, c’est que l’on peut avoir de nombreux éléments et que le menu reste toujours agréable à voir.
j’ai environ 200 pages à mettre dans le menu, aussi je souhaite un plug-in à la fois simple et fonctionnel si possible.
Merci pour toutes vos idées.28 août 2015 à 22 h 57 min #1018565Bonjour,
Le plugin Max Mega Menu pourrait vous convenir 😎
29 août 2015 à 8 h 18 min #1018566Salut Flobogo,
merci pour la piste mais je l’avais déjà essayé, et cette option n’est pas possible.
J’ai aussi essayé ceci :
Menu image
Responsive menu
UberMenuet une 20 d’autres, ils ont performants mais n’ont pas cette option d’ajouter l’image uniquement au survol du lien.
Peut être que je devrais voir pour essayer de trouver un code PHP pour faire cela.
29 août 2015 à 20 h 24 min #101856730 août 2015 à 7 h 45 min #1018568Bonjour PhiLyon
merci pour l’idée, mais je l’ai testé et effectivement on peut afficher une image mais pas qu’au survol du lien, celle ci est toujours affichée.
A moins qu’il y a un réglage particulier a faire ?
30 août 2015 à 7 h 53 min #1018569Bonjour.
Cela se règle comme ça
🙂
30 août 2015 à 8 h 50 min #1018570Effectivement, c’est intéressant mais il y a 2 soucis :
1 / impossible d’afficher une image en taille réelle, elle est automatiquement ajustée à je ne sais quoi. Bon j’ai pas encore bien chercher mais ce doit être réglable.
2 / (le plus gênant) la taille en hauteur des items du menu prends en compte la taille de l’image environ 300px, et comme j’ai des menu d’une cinquantaine d’items, ça devient difficile à voir.Enfin c’est pas très fonctionnel et simple pour le visiteur. Mais c’est exactement ce que je recherche, sauf qu’il y a un petit soucis peut être d’ajustement du CSS.
Comme tu peux voir sur le lien donné les items sont tous de la même taille d’environ 25px et cela reste assez simple à visualiser.
30 août 2015 à 8 h 59 min #1018571Dans le dossier du plugin, retires le fichier menu-image.css et remplaces le par celui-ci
https://dl.dropboxusercontent.com/u/37847800/menu-image.css.
Les autres réglages sont dans l’image au-dessus (tu peux mettre Taille originale si tu veux)
🙂
30 août 2015 à 9 h 02 min #1018572Bon mon lien ne fonctionne pas bien. Copies le code ci-dessous et mets le à la place de l’autre (après avoir fait une sauvegarde)
.menu-item a img {
border: none;
box-shadow: none;
vertical-align: middle;
width: auto;
}
.menu-item a.menu-image-hovered img.hovered-image,
.menu-item a.menu-image-hovered:hover img.menu-image {
opacity: 0;
transition: opacity 0.25s ease-in-out 0s;
}
.menu-item a.menu-image-hovered:hover img.hovered-image {
opacity: 1;
}
.menu-item a.menu-image-title-after.menu-image-not-hovered img,
.menu-item a.menu-image-hovered.menu-image-title-after .menu-image-hover-wrapper {
padding-right: 10px;
}
.menu-item a.menu-image-title-before.menu-image-not-hovered img,
.menu-item a.menu-image-hovered.menu-image-title-before .menu-image-hover-wrapper {
padding-left: 10px;
}
.menu-item a.menu-image-title-above,
.menu-item a.menu-image-title-below {
text-align: center;
}
.menu-item a.menu-image-title-above.menu-image-not-hovered img,
.menu-item a.menu-image-hovered.menu-image-title-above .menu-image-hover-wrapper {
display: block;
padding-top: 0px;
margin: 0 auto;
}
.menu-item a.menu-image-title-below.menu-image-not-hovered img,
.menu-item a.menu-image-hovered.menu-image-title-below .menu-image-hover-wrapper {
display: block;
padding-bottom: 0px;
margin: 0 auto;
}
.menu-item a.menu-image-title-hide .menu-image-title {
display: none;
}
.menu-image-hover-wrapper {
padding-right: 20px;
display: block;
position: relative;
z-index: 9999;
height: 0px;
}🙂
30 août 2015 à 10 h 06 min #1018573je viens d’essayer et effectivement il y a du changement, mais uniquement pour le premier et dernier lien du menu c’est bon, et pour les autres c’est toujours en grande taille.
J’ai essayé avec toutes les options :
Position du titre
Cacher | Above | Below | Avant | Aprèsla quelle faut il utiliser et est ce la même partout ?
30 août 2015 à 10 h 09 min #1018574J’ai mis Après. Vérifies que les réglages soient les mêmes partout.
Tu utilises quel thème ?
🙂
30 août 2015 à 10 h 27 min #1018575ok, en fait j’ai trouvé la raison, cela vient de mon thème Patus car il y a ceci dedans pour le menu :
min-width: 200px;
max-width: 250px;et effectivement quand je le met à 350 pour les 2 c’est parfait !
Une petite question, si je souhaite un peu décaler l’image à gauche ou à droite, car la elle se superpose un peu le texte, que faut il toucher ?
Au passage merci pour ton aide, rapide et efficace ! 🙂
30 août 2015 à 12 h 18 min #1018576que faut il toucher ?
Le clavier 😆
Rajoutes cette ligne après la ligne height à la fin
margin-left: -20px;
🙂
31 août 2015 à 7 h 09 min #1018577super !
problème résolu, merci !
👏31 août 2015 à 7 h 54 min #1018578Bonjour.
C’est ✅ qu’il faut afficher.
🙂
-
AuteurMessages
- Vous devez être connecté pour répondre à ce sujet.