[Résolu] Fermer/ouvrir footer

Bonjour, j'aimerais pouvoir ajouter une petite fonction à mon footer. J'aimerai qu'il y est une petit croix pour que les utilisateurs puissent le fermer ou l'ouvrir. Il y a une quantité de sujet là dessus mais ca concerne surtout afficher/masquer du texte et c'est pas vraiment ce que souhaite.

Connaissez vous des tutoriels ou script spécifique à ca?

Merci

Hello,

Avec javascript/jQuery, c'est très simple à mettre en place. Exemple à comprendre puis à adapter à ton cas par toi même :

HTML :

<a class="btn-toggle" href="#">Ouvrir/fermer le pied de page</a>
<div class="footer">
    <p>Du texte dans mon pied de page</p>
</div>

JS (note : pense à inclure la lib jQuery avant ton code) :

$(function(){
    $('.footer').hide(); /* Masquer le pied de page au chargement de la page */
    $('.btn-toggle').click(function(event){
        event.preventDefault(); /* au clic sur le bouton, ne pas suivre le lien */
        $('.footer').slideToggle(); /* deplier ou replier l'élément */
    });
});

Les fonctions jQuery utilisées dans cet exemple sont hide(), click(), slideToggle() (suivre les liens pour accéder à la doc).
À toi d'adapter cette base à ton cas par toi-même ! Reviens poster ici si tu rencontre des soucis
Modifié par audrasjb (20 Sep 2014 - 14:08)

Merci audrasjb, mon plus gros souci va être de comprendre comment bien intégrer :

$(function(){
    $('.footer').hide(); /* Masquer le pied de page au chargement de la page */
    $('.btn-toggle').click(function(event){
        event.preventDefault(); /* au clic sur le bouton, ne pas suivre le lien */
        $('.footer').slideToggle(); /* deplier ou replier l'élément */
    });
});

car je débute. ceci est donc un js que je peut intégrer dans un fichier.js que peux ensuite appeler dans mon body comme ceci :

<script src="js/fichier.js"></script>

mais qu'est ce que la "lib jQuery" ? J'ai un fichier intitulé jquery-1.11.0, dans mon thème, est ce que je dois l'utiliser ?

Bonjour,

Lorsque le footer doit être masqué au chargement de la page, l'utilisation d'un display:none en css n'est-il pas meilleur qu'un hide() javascript ?

Salut,

gwenm a écrit :
Merci audrasjb, mon plus gros souci va être de comprendre comment bien intégrer (…) car je débute. Qu'est ce que la "lib jQuery" ? J'ai un fichier intitulé jquery-1.11.0, dans mon thème, est ce que je dois l'utiliser ?

Oui, il faut l'intégrer juste avant le script JS cité ci-dessus, de préférence juste avant la fermeture de balise </body> (donc dans ton fichier footer.php a priori).

AliceRossa a écrit :
Lorsque le footer doit être masqué au chargement de la page, l'utilisation d'un display:none en css n'est-il pas meilleur qu'un hide() javascript ?

Si on veut, le code ci-dessus n'est qu'un exemple basique. On peut aussi animer l'affichage du bloc avec la fonction animate(), mettre un timer, etc. L'idée c'était surtout de montrer à gwenm dans quelle direction se diriger

Pour préciser ma dernière réponse, tu vas obtenir quelque chose comme ça dans ton fichier footer.php :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
    $('.footer').hide(); /* Masquer le pied de page au chargement de la page */
    $('.btn-toggle').click(function(event){
        event.preventDefault(); /* au clic sur le bouton, ne pas suivre le lien */
        $('.footer').slideToggle(); /* deplier ou replier l'élément */
    });
});
</script>

Modifié par audrasjb (21 Sep 2014 - 19:38)

Merci beaucoup pour cette aide précieuse je devrais y arriver avec ca

Merci