Comment faire texte dans un menu mobile?

Par passealasuite, il y a 15 ans

Les bases HTML/CSS

**Bonjour, Je suis à la recherche d'un script pour faire ce genre de menu, avec un effet sur le texte, présent tout en bas de ce site web: h[url=ttp://www.true-blood-fr.net/]ttp://www.true-blood-fr.net/[/url] Ou il y a un petit effet de déplacement. Merci par avance. Cordialement **

3 réponses

mespeche, il y a 15 ans

Salut, tu fais comme ceci :

$(document).ready(function(){
    $(".nav ul ul a").hover(function(){
        $(this).find('span').stop().animate({marginLeft:'10px'},{queue:false, duration:300, easing: 'easeOutBounce'})
    },function(){
        $(this).find('span').stop().animate({marginLeft:'0px'},{queue:false, duration:300, easing: 'easeOutBounce'})
    });

    $(".col_1 li a").hover(function(){
        $(this).find('span').stop().animate({marginLeft:'10px'},{queue:false, duration:300, easing: 'easeOutBounce'})
    },function(){
        $(this).find('span').stop().animate({marginLeft:'0px'},{queue:false, duration:300, easing: 'easeOutBounce'})
    });

});

Il te faut en plus de jquery.js, jquery.easing.js

passealasuite, il y a 15 ans

Salut,

Merci pour ta réponse mais je ,n'ai pas bien compris comment il faut faire.
Je suis novice donc j'ai un peut de mal.

Ce serait sympa de m'expliquer plus clairement la démarche à suivre.

Merci

mespeche, il y a 15 ans

Salut à toi,

Pas de problème je vais essayer de t'expliquer tout ça.
Alors en fait, les effets de rebond font parti des fonctionnalités qui ont été ajouté à jquery par la suite et donc pour les utiliser, il faut utiliser le plugin. En locurence, ici il faut que tu utilise jquery + jquery.easing (que tu peux télécharger sur le lien que je t'ai donné).

Ensuite dans ton html après avoir inclue jquery tu inclue le plugin de la façon suivante :

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.easing.js"></script>

Ensuite, il te faut ton script à toi à inclure aussi de la même façon et à l'intérieur de ton script, tu fois faire ceci : 

$(document).ready(function(){
    var lien = $("a");
    lien.hover(function(){
        $(this).find('span').stop().animate({marginLeft:'10px'},{queue:false, duration:300, easing: 'easeOutBounce'})
    },function(){
        $(this).find('span').stop().animate({marginLeft:'0px'},{queue:false, duration:300, easing: 'easeOutBounce'})
    });

A toi d'adapter le script par rapport à ta structure HTML, si tu as besoin d'aide plus poussée : contact@devaddict.fr