Comment faire ce style de menu

Ce sujet est résolu
Default
,

Salut je voudrais faire ce style de menu ?

Menu avec le texte quand ont pointe sur un lien

Merci part avance !

4 Réponse

210
,

Dans ta feuille de style tu va faire apparaître une image au survol du lien :

a:hover
{
    background-image : ... ;
    margin: ... ;
}

A toi après d'adapter ton code en fonction de se que tu veux (marge, padding etc...)

Default
,

Pour ma part je n'aurai pas fait comme ça.

Dans ma façon de voir les choses, je m'aperçoit que le texte apparait avec une opacité progressive. C'est surement du JQuery. Donc voici ce que je ferai:

  • Tout d'abord le menu. Plusieurs façons de faire. Soit une liste avec ul et li alignée avec du CSS. Soit par des divs également aligné avec du CSS.

    Lien1
    Lien2
    Lien3

  • Ensuite, on positionne les images qui apparaitront au survol. Donc dans le html, en dessous de ton menu: (admettons qu'il y a 3 menus)



  • Puis on passe au CSS de ces 3 images:

    #menu1_img, #menu2_img, #menu3_img{
    position:absolute;
    }
    #menu1_img{ top:20px; left:200px; // on le positionne au dessus (ou au dessous du menu1) }
    #menu2_img{ top:20px; left:400px; // on le positionne au dessus (ou au dessous du menu2) }
    #menu3_img{ top:20px; left:600px; // on le positionne au dessus (ou au dessous du menu3) }

-Et enfin le JQuery (il est necessaire de telecharger la librairie JQuery):

(la syntaxe est à vérifiée)

//On cache par défaut les 3 images
$('#menu1_img').hide();
$('#menu2_img').hide();
$('#menu3_img').hide();


//Quand la souris passe sur un des menus, l'image s'affiche
$('#menu1').mouseover(function() {
  $('#menu1_img').fadeIn("slow"); //fadeIn affiche le div
});
$('#menu2').mouseover(function() {
  $('#menu2_img').fadeIn("slow");
});
$('#menu3').mouseover(function() {
  $('#menu3_img').fadeIn("slow");
});

Voila, je te laisse faire la suite du code pour dire "Quand la souris n'est plus sur le lien (mouseout), l'image se cache (fadeOut())".

;)

Default
,

c'est une image avec un hover

Default
,

Merci pour réponse mais je n'arrive pas à faire le lien texte au passage de la souris si vous aviez une idée merci