Menu avec affichage image uniquement au survol d’un élément (Créer un compte)

  • Statut : non résolu
15 sujets de 1 à 15 (sur un total de 16)
  • Auteur
    Messages
  • #553547
    blablabla
    Participant
    Initié WordPress
    23 contributions

    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%20Manager

    quand 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.

    #1018565
    Flobogo
    Modérateur
    Maître WordPress
    20453 contributions

    Bonjour,

    Le plugin Max Mega Menu pourrait vous convenir 😎

    #1018566
    blablabla
    Participant
    Initié WordPress
    23 contributions

    Salut 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
    UberMenu

    et 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.

    #1018567
    PhiLyon
    Modérateur
    Maître WordPress
    28260 contributions

    Bonsoir.

    Menu image le fait, celui-là https://wordpress.org/plugins/menu-image/

    Je l’ai testé.

    🙂

    #1018568
    blablabla
    Participant
    Initié WordPress
    23 contributions

    Bonjour 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 ?

    #1018569
    PhiLyon
    Modérateur
    Maître WordPress
    28260 contributions

    Bonjour.

    Cela se règle comme ça

    Survolimage.png

    🙂

    #1018570
    blablabla
    Participant
    Initié WordPress
    23 contributions

    Effectivement, 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.

    #1018571
    PhiLyon
    Modérateur
    Maître WordPress
    28260 contributions

    Dans 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)

    🙂

    #1018572
    PhiLyon
    Modérateur
    Maître WordPress
    28260 contributions

    Bon 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;
    }

    🙂

    #1018573
    blablabla
    Participant
    Initié WordPress
    23 contributions

    je 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ès

    la quelle faut il utiliser et est ce la même partout ?

    #1018574
    PhiLyon
    Modérateur
    Maître WordPress
    28260 contributions

    J’ai mis Après. Vérifies que les réglages soient les mêmes partout.

    Tu utilises quel thème ?

    🙂

    #1018575
    blablabla
    Participant
    Initié WordPress
    23 contributions

    ok, 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 ! 🙂

    #1018576
    PhiLyon
    Modérateur
    Maître WordPress
    28260 contributions

    que faut il toucher ?

    Le clavier 😆

    Rajoutes cette ligne après la ligne height à la fin

    margin-left: -20px;

    🙂

    #1018577
    blablabla
    Participant
    Initié WordPress
    23 contributions

    super !

    problème résolu, merci !
    👏

    #1018578
    PhiLyon
    Modérateur
    Maître WordPress
    28260 contributions

    Bonjour.

    C’est ✅ qu’il faut afficher.

    🙂

15 sujets de 1 à 15 (sur un total de 16)
  • Vous devez être connecté pour répondre à ce sujet.