Menu fixe pour Firefox et IE7 sans javascript

Vous avez été nombreux à me demander comment faire ce bouton fixe "haut de page" en bas à droite de mon blog. Si vous utilisez Internet Explorer, vous ne voyez pas de quoi je parle, alors voici une copie d'écran.

Je vous livre aujourd'hui le secret en l'adaptant pour en faire un menu utilisable et visible sous Firefox et Internet Explorer 7.

Donc, si vous utilisez l'un des navigateurs cités ci-dessus, vous devez voir en bas à droite quelque chose qui ressemble à ça.

Vous rêvez de la même chose??? Allez zou, un peu d'HTML, un peu de CSS et le tour sera joué!.

Réponses aux questions que vous allez peut-être vous poser

Pourquoi ça marche qu'à partir d'IE7 ? Parce qu'avant cette version d'Internet Explorer, la valeur fixed de la propriété CSS position n'était pas correctement interprétée.

Pourquoi je n'arrive pas à lire les commentaires de cet article? Parce que vous utilisez Inetrnet Explorer inférieur à 7 et que j'ai fait une petite bidouille pas très propre avec les commentaires conditionels pour gérer l'affichage de ce menu sans supprimer mon bouton "haut de page". De toute manière si vous n'utilisez pas FF ou IE7 cet article ne vous intéresse pas... alors pourquoi lire les commentaires :)

... Je compléterais en fonctions des questions récurentes en commentaires :)

Etape 1: l'HTML

Tout d'abord mettons en oeuvre le contenu du menu sur votre blog. Pour cela en mode source (mode HTML) saisissez le code suivant le plus bas possible dans le flux de votre blog (dans le module "pied de page" pour les OverBlogueurs):

HTML

<!--[if lt IE 7]> <style>#fixedmenu {display: none;} <![endif]-->
<div id="fixedmenu">
   <ul>
      <li><a id="home" href="url-de-votre-blog" title="Accueil"> </a></li>
      <li><a id="up" href="#top" title="Haut"> </a></li>
      <li><a id="down" href="#footer" title="Bas"> </a></li>
      <li><a id="rss" href="url-de-votre-flux-rss" title="Feed"> </a></li>
      <li><a id="email" href="mailto:votre-mail"" title="Contact"> </a></li>
      <li><a id="favoris" href="javascript:if(window.sidebar){window.sidebar.addPanel('Titre-pour-le-favoris?', 'url-de-votre-blog','');}else if( window.external ) {window.external.AddFavorite('url-de-votre-blog', 'Titre-pour-le-favoris');}" title="Ajoutez à vos favoris"> </a></li>
   </ul>
</div>

La première ligne permet de masquer l'affichage de ce menu pour les versions d'Internet Explorer ne supportant pas ce coding. Vous trouverez plus d'info sur cette syntaxe dans mon article: Commentaires conditionnels pour IE.

Pour le reste du code, veillez à bien renseigner url-de-votre-blog, url-de-votre-flux-rss et Titre-pour-le-favoris.

Notez les points suivants:

• Le lien identifié par home reroute vers la page d'accueil de votre blog.
• Le lien identifié par up renvoi vers une ancre en haut de votre blog. Pour plus d'info consulter mon article: Naviguer dans une page grâce aux ancres. Si vous souhaitez comme moi un effet de scrolling plus "smooth", consulter mon article: Scriptaculous: Utilisation des effets. L'ancre utilisé dans le code ci-dessus fonctionne pour les blogs OverBlog.
• Le lien identifié par down renvoi vers une ancre en bas de votre blog
• Le lien identifié par rss permet à vos lecteurs souhaitant s'abonner à votre flux RSS de récupérer l'url de ce flux. OverBlogueurs, l'url de votre flux RSS2 est constitué comme suit: url-de-votre-blog/rss2.php. Vous pouvez aussi utiliser votre compte feedburner si vous en avez un. Plus d'info sur mon billet: Statistiques et flux RSS
• Le lien identifié par email permet à vos lecteurs de vous contacter directement. Je vous conseil toutefois de ne pas utilser un mailto: afin d'éviter les SPAMs. Préferez l'option Cerbermail qui empêche les robots de récupérer votre email en forçant l'utilisateur à saisir un CAPTCHA. Vous pouvez aussi utiliser votre Ziki. Plus d'info dans mon article: Je fais mon «blogging out»
• Le lien identifié par favoris permet à vos lecteur de mettre votre blog en favoris aussi bien sous Internet Explorer que Firefox. Attention lorsque vous renseignez Titre-pour-le-favoris, ce titre ne doit pas contenir d'apostrophe (') ou alors pensez à échaper ce caractère!

Etape 2: Télécharger les images

Les images utilisées pour ce menu proviennent de l'excellent Fam Fam Fam et sont libres de droits. Vous pouvez les télécharger en faisant un "clique droit > enregistrer sous..." sur chaucune d'elles:

         

Etape 3: Uploadez les images

Mettez maintenant à dispo sur Internet ces images, vous pouvez utilisez votre espace de stockage préféré, l'essentiel étant de veillez à récupérer l'url de chacune de vos images afin de les renseigner dans le code CSS expliqué ci-après.

Etape 4: Code CSS

Dans votre feuille de style, rajouter le code suivant:

CSS

#fixedmenu {
   position: fixed;
   bottom: 20px;
   right: 20px;
   width: 16px;
   background: transparent;
}

#fixedmenu a, #fixedmenu a:hover {
   text-decoration: none;
   display: block;
   width: 16px;
   height: 16px;
   overflow: hidden;
   font-size: 40px;
   line-height: 1;
   margin: 0 auto;
}

#fixedmenu ul, #fixedmenu li {
   list-style-type:none;
   margin: 5px 0;
   padding: 0;
}

#fixedmenu #home {
   background: transparent url(url-repertoire-icone/home.png) no-repeat;
}

#fixedmenu #up {
   background: transparent url(url-repertoire-icone/up.png) no-repeat;
}

#fixedmenu #down {
   background: transparent url(url-repertoire-icone/down.png) no-repeat;
}

#fixedmenu #rss {
   background: transparent url(url-repertoire-icone/rss.png) no-repeat;
}

#fixedmenu #email {
   background: transparent url(url-repertoire-icone/email.png) no-repeat;
}

#fixedmenu #favoris {
   background: transparent url(url-repertoire-icone/favoris.png) no-repeat;
}

Il ne reste plus qu'à videz le cache de votre navigateur, en visualisant votre blog: Ctrl + F5 afin de charger la CSS modifiée. Pensez aussi à prévenir vos lecteurs ;)

Etape 5: Bonnnnnnn... je vous connais

Pour customiser ce menu, vous avez bien sûr tout loisir de faire joujou avec les codes ci-dessus.

Quelques pistes pour ne pas tout casser:

• Pour "décoller" le menu des bords de la fenêtre, jouer sur les valeurs des propriétés bottom et right de l'identifiant #fixedmenu.
• Si vous préférez le menu à gauche, remplacez right par left
• Si vous préférez le menu en haut, remplacez bottom par top et positionnez le code HTML du menu le plus haut possible dans votre blog (l'entête par exemple)
• Si vous voulez changer les images, pensez que les liens doivent avoir la même largeur (width) et hauteur (height) que celles de vos images
• Vous pouvez rajouter autant de "bouton" au menu que vous le souhaitez

Bien sûr comme d'habitude, si vous avez un souci pour intégrer ce menu à votre blog, ou si vous avez besoin d'aide pour une customisation, laissez moi un commentaire.

Liens

Adaptation de ce menu sous Wordpress par Alexandre.

Bon blogging.