Définir un menu fixe dans un site web sous SPIP Aussi appelé sticky menu

3 |

Comme vous pouvez le voir sur ce même site, si vous faites défiler la page, le menu reste fixé en haut de l’écran .


Conserver le menu de navigation en permanence en haut de l’écran même quand on est fait défiler les pages est très pratique et facilite grandement la navigation.


Je vous explique les quelques manipulations à réaliser sur un site sous SPIP et ScolaSPIP (mais c’est bien évidement possible sur n’importe quel autre site).

1. Ajouter des éléments à la feuille de style

1.1 Accéder à l’interface privée de SPIP, cliquer au menu Squelettes, choisir l’onglet Thèmes et couleurs et repérer en bas la zone de texte intitulée Règles CSS.

1.2. Ajouter dans cette zone de texte (au début ou à la fin) les lignes suivantes, en fonction de la configuration de ScolaSPIP :

  • Si vous utilisez un menu sur toute la largeur de la page (bandeau élargi sur ScolaSpip) :
    1. /* =============================== */
    2. /* Menu fixe bandeau élargi */
    3. /* =============================== */
    4. .menu_fixe {
    5.   position: fixed;
    6.   top: 0;
    7.   width: 100% ;
    8. }
    9. /* =============================== */

    Télécharger

  • Si vous utilisez un menu de largeur fixe (bandeau "classique" sur ScolaSpip) :
    1. /* =============================== */
    2. /* Menu fixe bandeau largeur fixe */
    3. /* =============================== */
    4. .menu_fixe {
    5.   position: fixed;
    6.   top: 0;
    7. }
    8.  
    9. @media (max-width: 767px) {
    10.      .menu_fixe {
    11.       width: 100% ;
    12.       }
    13. }
    14. /* =============================== */

    Télécharger

2. Modification du squelette

2.1 Installer et activer le plugin Skeleditor.

2.2. Aller sur la page d’accueil de votre site, cliquer en haut le bouton « Squelette&CSS ».

2.3. Tout en bas de page, cliquer sur le bandeau jaune « xxxxxxx/squelettes/footer/dist.html ».

2.4. Modifier le squelette en ajoutant tout en bas de la zone de texte le code JavaScript suivant :

  • Script JavaScript à ajouter :
    1. <script type="text/javascript">
    2.      window.onscroll = function() {fixerMenu()};
    3.      var menu = document.getElementById("nav");
    4.      var distance_haut = menu.offsetTop;
    5.      function fixerMenu() {
    6.        if (window.pageYOffset >= distance_haut) {menu.classList.add("menu_fixe")}
    7.        else {menu.classList.remove("menu_fixe");}
    8.        }
    9. </script>

    Télécharger

Les plus curieux auront remarqué le "nav" qui correspond à l’identifiant ("id") menu. Il suffit de le modifier pour fixer un autre élément de la page.




Dans la même rubrique