Salut je voudrais faire ce style de menu ?
Menu avec le texte quand ont pointe sur un lien
Merci part avance !

4 réponses


marrtin
Réponse acceptée

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

Mousse
Réponse acceptée

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.

    <a href="monlien1.html"id='menu1'> Lien1 </a>
    <a href="monlien2.html"id='menu2'> Lien2 </a>
    <a href="monlien3.html"id='menu3'> Lien3 </a>

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

    <img src="monimage1.png" alt="" id='menu1_img' />
    <img src="monimage2.png" alt="" id='menu2_img' />
    <img src="monimage3.png" alt="" id='menu3_img' />

  • 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())".

;)

c'est une image avec un hover

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