Installer un menu flottant en haut de page

3 2675

Aujourd’hui un peu de codage, je voulais vous faire partager un exemple pour afficher votre menu ou une image même quand le visiteur scroll votre site. Très pratique si vous avez un message à faire passer, ou un menu à laisser constamment flottant.

Configurer un menu flottant (scotché) en haut de votre site :

Dans mon tuto, voici ce que je cherche à faire :

ban-fixeLa bannière flottante ne doit jamais bouger, même quand je scroll le site de haut en bas.

Voici les étapes pour créer ce style, que se soit avec une image, ou une phrase promo genre:
« télécharger la dernière version de notre logiciel ici »

D’abord, rendez vous dans votre fichier style.php, et ajoutez y ces lignes, celles ci servent à créer une balise div au nom de « wrapper » et de configurer son contenu:

#wrapper
{
position:fixed;
border: 2px solid #a7a7a7;
position:fixed;
background-color: #eeeeee;
top:25px;
margin-left: auto;
margin-right: auto;
z-index: 100;
}

Nous allons détailler chacune des fonctions :

« margin-top » (si besoin) : marge depuis le haut du site
« left » : marge depuis l’absolue gauche
« right » : marge depuis l’absolue droite
« border » : épaisseur de l’encadrement
« solid #codecouleur » : couleur de la bordure »height » : hauteur de votre block
« position » : fixed <= permet d’accrocher le menu en haut
« background-color » : couleur d’arrière plan
« color » : couleur du texte
« background-repeat: repeat-x » répète en longueur la couleur de fond
mettre « repeat-y » pour faire la même chose en hauteur de fond
« z-index » : indique une superposition (ici +2 par rapport au texte 0)

Insérer la balise wrapper dans WordPress

Maintenant que le style est défini, allons indiquer où sera appliqué ce style, et quel sera son contenu, pour cela, rendons nous par exemple dans « footer.php »

Dans mon test, j’ai inclus la balise après <body>

balise divNous allons ouvrir la balise et indiquer quel style nous allons appliquer (ici wrapper):

<div id=wrapper>…

Ensuite, nous allons inclure une image :

…<img src= »http://www.votreimage…/sonlien.jpg »>…

Vous pouvez aussi mettre un texte si besoin.

Maintenant fermons la balise :

… </div>

Ce qui nous donne :

<div id=wrapper><img src= »http://www.votreimage…/sonlien.jpg »></div>

Vous pouvez vous amuser à configurer des menus flottants en les plaçant et déplaçant comme bon vous semble. Faites moi part de vos remarques.

3 Commentaires

  1. Salut Rodrigue
    que du neuf pour la nouvelle ère après la fin de ce monde , nouvel avatar, nouveau thème, nouvelle gonz…
    Heu… J’ai gaffé là? ;)
    Sympa le tuto pour garder la bannière immobile,
    je savais le faire avec Exel,:)
    mais pas sur WP

Réagis