Tuto : Un menu fixe pour son blog (sans Javascript)

Publié le 22 décembre 2009 par Seifer

J'ai tout récemment installé un menu fixe sur mon blog. Et je souhaitais en faire partager les codes à tout le monde.

C'est un menu fixe qui ne contient aucune ligne javascript.

Commençons par le code HTML ci-dessous :


<div id="fixedmenu">
<ul>
<li>
<a id="home" title="Accueil" name="home" href="url-du-site"></a>
</li>
<li>
<a id="up" title="Remonter!" name="up" href="#top"></a>
</li>
<li>
<a id="down" title="Descendre!" name="down" href="#footer"></a>
</li>
<li>
<a id="rss" title="Abonnez-vous!" name="feed" href="url-du-feed"></a>
</li>
<li>
<a id="email" title="Contactez moi!" name="email" href="mailto:nom-de-l'adresse-mail"></a>
</li>
<li>
<a id="favoris" title="Ajoutez moi à vos favoris!" name="favoris" href="javascript:if(window.sidebar){window.sidebar.addPanel('Titre du favoris',%20'url-du-site','');}else%20if(%20window.external%20)%20{window.external.AddFavorite('url-du site',%20'Titre du favoris');}"></a>
</li>
</ul>
</div>

Ensuite on upload les images :

home down email favoris

Puis ensuite on passe au CSS :

#fixedmenu {
   position: fixed;
   bottom: 20px;
   margin-left: 800px;
   width: 40px;
   background-image: url(url-de-l'image-de-fond)
}

#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(http://idata.over-blog.com/2/86/92/01/home.png) no-repeat;
}

#fixedmenu #up {
   background: transparent url(http://idata.over-blog.com/2/86/92/01/up.png) no-repeat;
}

#fixedmenu #down {
   background: transparent url(http://idata.over-blog.com/2/86/92/01/down.png) no-repeat;
}

#fixedmenu #rss {
   background: transparent url(http://idata.over-blog.com/2/86/92/01/rss.png) no-repeat;
}

#fixedmenu #email {
   background: transparent url(http://idata.over-blog.com/2/86/92/01/email.png) no-repeat;
}

#fixedmenu #favoris {
   background: transparent url(http://idata.over-blog.com/2/86/92/01/favoris.png) no-repeat;
}