dimanche 1 janvier 2012

Menu flottant dans Blogger

J'ai créé 2 menus flottants et toujours visibles dans mon blog st-martin-meteo-weather.blogspot.com pour permettre une navigation instantanée à la fois dans l'interminable barre latérale de menus et widgets (menu flottant de gauche) et aussi dans la page elle-même (menu flottant de droite). Ces menus sont faits sur le même principe que la flèche "haut" ou "Up" dont j'avais déjà parlé. Ce code est placé dans un widget sans titre en bas de page.

Code du menu flottant (et fixe) de gauche (je n'ai pas mis celui de droite)


<ul id="floatmenu"><div name="menuflottant" style="left:0.2%; top:20%; z-index:1; visibility:visible; position: fixed;">
<table border="0" cellpadding="0" cellspacing="2" style="width: 70px; ">
<tbody><tr><td background="http://dl.dropbox.com/u/19586410/Blogs/bluebutton1.gif" style="background-repeat: no-repeat; height: 30px; text-align: center;"> <div> <a href="#toplinks" target="_self" title="Menu top - Haut du Menu"><strong>TOP</strong></a></div> </td></tr>
<tr><td background="http://dl.dropbox.com/u/19586410/Blogs/bluebutton1.gif" style="background-repeat: no-repeat; height: 30px; text-align: center;"> <div> <a href="#mainlink" target="_self" title="Liens principaux - Main links - Quick access"><strong>MainLinks</strong></a></div> </td></tr>
<tr><td background="http://dl.dropbox.com/u/19586410/Blogs/bluebutton1.gif" style="background-repeat: no-repeat; height: 30px; text-align: center;"> <div> <a href="#cyclone" target="_self" title="Cyclones - Ouragans - Hurricanes - Storms"><strong>Cyclones</strong></a></div>
</td></tr>
<tr><td background="http://dl.dropbox.com/u/19586410/Blogs/bluebutton1.gif" style="background-repeat: no-repeat; height: 30px; text-align: center;"> <div> <a href="#divers" target="_self" title="Divers - Miscellaneous"><strong>Divers</strong></a></div></td></tr>
<tr><td  background="http://dl.dropbox.com/u/19586410/Blogs/bluebutton1.gif" style="background-repeat: no-repeat; height: 30px; text-align: center;"> <div> <a href="#tool" target="_self" title="Utilitaires - Tools"><strong>Outils</strong></a></div></td></tr>
<tr><td background="http://dl.dropbox.com/u/19586410/Blogs/bluebutton1.gif" style="background-repeat: no-repeat; height: 30px; text-align: center;"> <div> <a href="#radar" target="_self" title="Radars Météo - Weather radar"><strong>Radars</strong></a></div></td></tr>
<tr><td background="http://dl.dropbox.com/u/19586410/Blogs/bluebutton1.gif" style="background-repeat: no-repeat; height: 30px; text-align: center;"> <div> <a href="#sat" target="_self" title="Satellites"><strong>Sat</strong></a></div></td></tr>
<tr><td background="http://dl.dropbox.com/u/19586410/Blogs/bluebutton1.gif" style="background-repeat: no-repeat; height: 30px; text-align: center;"> <div> <a href="#seamer" target="_self" title="Mer - Sea - Marine"><strong>Sea</strong></a></div></td></tr>
<tr><td  background="http://dl.dropbox.com/u/19586410/Blogs/bluebutton1.gif" style="background-repeat: no-repeat; height: 30px; text-align: center;"> <div> <a href="#tsuna" target="_self" title="Séismes - tremblements de terre - tsunamis - Earthquake"><strong>Seisms</strong></a></div></td></tr>
<tr><td background="http://dl.dropbox.com/u/19586410/Blogs/bluebutton1.gif" style="background-repeat: no-repeat; height: 30px; text-align: center;"> <div> <a href="#vol" target="_self" title="Vols - Flights- Arrivals - Departures - Alerts"><strong>Vols</strong></a></div></td></tr>
<tr><td background="http://dl.dropbox.com/u/19586410/Blogs/bluebutton1.gif" style="background-repeat: no-repeat; height: 30px; text-align: center;"> <div> <a href="#weather" target="_self" title="World Weather - Meteo monde"><strong>Wx-Met</strong></a></div></td></tr>
<tr><td background="http://dl.dropbox.com/u/19586410/Blogs/bluebutton1.gif" style="background-repeat: no-repeat; height: 30px; text-align: center;"> <div> <a href="#idn" target="_self" title="Meteo Regionale - Regional weather"><strong>Wx-Met</strong></a></div></td></tr>
<tr><td background="http://dl.dropbox.com/u/19586410/Blogs/bluebutton1.gif" style="background-repeat: no-repeat; height: 30px; text-align: center;"> <div> <a href="#webcam" target="_self" title="Webcams"><strong>Webcams</strong></a></div></td></tr>
<tr><td background="http://dl.dropbox.com/u/19586410/Blogs/bluebutton1.gif" style="background-repeat: no-repeat; height: 30px; text-align: center;"> <div> <a href="#bottom" target="_self" title="Bas du Menu - Bottom of the Menu"><strong>BOTTOM</strong></a></div></td></tr></tbody></table></div></ul>


Le code en vert "appelle" le style CSS (inclu dans le HEAD) et le code en rouge permet au DIV d'être flottant et fixe.

J'ai cependant pas mal "ramé" pour la couleur de liens. Voici donc le code de style CSS à éventuellement modifier et à inclure dans le HEAD de votre modèle. Ce code agit évidemment aussi sur le menu de droite. Il aurait été intéressant, je pense, d'y mettre aussi l'image d'arrière-plan des boutons et autres instructions, mais bon, j'avoue que c'est du "bricolage" à la va-vite pour résoudre un problème... Par la suite, je modifiera cela peut-être...


#floatmenu {
margin: 0;
padding: 0;
}
#floatmenu a {
color: #D7F2EA;
display: block;
text-decoration: none;
font-weight:normal;
}
#floatmenu a:hover {
color: #F83008;
    font-weight:normal;
}


Et pour rappel, le code d'une ancre à placer en tête de code d'un Post ou d'un widget:


<a name="anchorname"></a>:


Précision: comme vous pourrez le constater, st-martin-meteo-weather.blogspot.com qui a été quasiment mon premier blog, ressemble plutôt à un site web classique et non pas à un blog. C'est un choix délibéré!

Aucun commentaire:

Enregistrer un commentaire