Bonjour !

Voici une petite astuce pour ceux qui aimeraient avoir le menu du haut d’un site web toujours à portée de clic (pour l’exemple ça sera le forum de Developpez mais ça fonctionne pour tous les sites web bien sûr).

On s’appuie ici sur Greasemonkey, un plugin devenu relativement célèbre sur le navigateur Firefox, ce plugin permet de changer des éléments à la voleé sur un site web. Pratique quand on souhaite customiser quelques éléments.

Je vous propose tout simplement d’ajouter quelques styles css supplémentaires sur la page, afin de fixer le menu. Dans un premier temps on peut déjà utiliser firebug pour « tester » les modifications du css sur la page en live, c’est très pratique, et aussi pour repérer l’id des éléments HTML que l’on doit modifier. Dans notre cas l’id de la div à modifier est « quicknav ».

Voici le code css qui va nous aider :

#quicknav {  left: 50%; margin-left: -450px; position: fixed; z-index: 2; }

On s’aperçoit sur firebug que l’attribut « position: fixed; » nous fixe bien le menu mais il se colle à gauche et se positionne sous les autres éléments. Pour le re-centrer on utilise une parade avec un left à 50% puis un margin-left à peu près à la moitié de la taille du menu. Et voila ! Le menu n’étant pas conçu pour se balader sur la page, ce n’est pas de toute beauté mais là c’est le côté pratique qu’on recherche

Pour utiliser le script, si vous êtes sur Firefox, vous devez tout d’abord installer le plugin Greasemonkey, ensuite vous pouvez installer n’importe quel script qui est conforme, vous en trouverez tout plein sur le site userscripts.org véritable mine d’or pour les custommer en herbe, sinon sur Chrome c’est utilisable directement ! Il suffit de charger un script, ou de cliquer sur « install » sur le site userscripts.org.

Vous trouverez le script que l’on viens de faire sur cette page.

++