Tutoriel gantry 5 - Mise en place d'un menu fixe pendant le défilement sur votre page (Custom javascript)

Affichages : 7612

Dans cet article, je vais vous montrer comment mettre en œuvre un menu fixe pour le template Hydrogen avec Gantry 5 en utilisant la script headroom.js. Ce tuto pourra bien entendu s'appliquer à d'autres templates.

La procédure décrite dans cet article a depuis été désuètes après la poursuite de l’amélioration et le développement de Gantry 5. Il existe un processus beaucoup plus facile pour y parvenir en mettant en place l'Atom Headroom.js developpé par InspireTheme - voir l'article dédié

Headroom.js est un widget JavaScript léger (sans dépendances!) qui vous permet de réagir au défilement de l'utilisateur. Il est sous la licence MIT License de sorte que vous pouvez l'utiliser dans vos projets personnels et commerciaux.

Donc, nous allons commencer ...

Télécharger headroom.js de Github

Une fois téléchargez, vous devez décompresser le fichier  headroom.js-master.zip. Vous trouverez plusieurs fichiers et dossiers, mais celui que vous avez besoin est appelé dist.

Dans la dossier dist, vous verrez trois versions différentes de headroom.js - un écrit en angular, un autre en jQuery et le dernier en pur JavaScript. Je recommande fortement la version JS pur, headroom.min.js, vous n'aurai alors pas besoin de charger les bibliothèques JS supplémentaires qui ajouteront plus de poids à votre site Web.

Copier Headroom.js dans hydrogen

Comme décrit dans la documentation Gantry5, vous devez garder toutes vos modifications et ajouts dans le répertoire SITE_ROOT / templates / g5_hydrogen / custom / afin qu'elles ne soient pas écrasés lors des mise à jour.

Vous créez donc un répertoire dédié js dans la structure de votre template - SITE_ROOT / templates / g5_hydrogen / custom / js /  et vous copiez le fichier headroom.min.js dans ce répertoire.

Chargement de Headroom.js dans hydrogen

Maintenant, vous devez charger le script dans le template. Vous pouvez le faire avec le "particles" CSS personnalisé / JS atom à partir du gestionnaire de configuration du template, mais comme c'est un script global qui doit être chargé sur toutes les pages, c'est probablement une meilleure idée de le coder en dur dans le template. Pour cela, nous devons créer une surcharge du fichier principal du template page.html.twig :

  1. Créez 2 répertoires, engine, templates dans la structure :  SITE_ROOT/templates/g5_hydrogen/custom/engine/templates/.
  2. Aller à SITE_ROOT/media/gantry5/engines/nucleus/templates/et copiez le fichier page.html.twig.
  3. Collez le fichier  page.html.twig dans le répertoire que vous avez créé étape 1 (templates).
  4. Modifier le fichier SITE_ROOT/templates/g5_hydrogen/custom/engine/templates/page.html.twig  en ajoutant les code suivant sur ​​la ligne 71, juste en dessous des main.js :
<script type="text/javascript" src="/{{ url('gantry-theme://custom/js/headroom.min.js') }}"></script>
    <script>
        // grab an element
        var myElement = document.querySelector("#g-navigation");
        // construct an instance of Headroom, passing the element
        var headroom  = new Headroom(myElement);
        // initialise
        headroom.init();

        // grab an element
        var myElement = document.querySelector(".g-offcanvas-toggle");
        // construct an instance of Headroom, passing the element
        var headroom  = new Headroom(myElement);
        // initialise
        headroom.init(); 
</script>

Comme vous pouvez le voir avec les codes  ci-dessus, le menu fixe est associé dans le layout de Gantry 5 aux sections Navigation et Offcanvas (menu mobile). Si votre menu est défini dans la section Header (pas dans la section Navigation), alors vous devez remplacer #g-navigation par #g-header dans le code ci-dessus.

Maintenant, vous avez headroom.js mis en œuvre dans votre site web. Si vous inspectez votre site web avec Firebug ou Chrome, vous devriez voir que les classes headroom ont été ajoutés.

hydrogen headroom class

Ajout du style (SCSS)

Maintenant, vous devez ajouter le style qui fait dire au navigateur que l'élément particulier doit être fixée lorsque le visiteur commence à défiler:

Premièrement: Créez le fichier custom.scss comme décrit dans le tuto "Ajout d'une feuille de style personnalisée (Custom.scss)" et y collez les codes suivant :

@import "dependencies";

#g-navigation.headroom--not-top {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1001;
    left: 0;
}

.g-offcanvas-toggle.headroom--not-top {
    position: fixed;
    z-index: 1002;
}

.g-offcanvas-open {
    #g-navigation.headroom--not-top {
        left: $offcanvas-width;
    }
    .g-offcanvas-toggle.headroom--not-top {
        left: $offcanvas-width + 0.7rem;
    }
}

#g-navigation.headroom--not-top, .g-offcanvas-toggle.headroom--not-top {
    @include transition(all 0.3s);
}

Deuxièmement: Recompilez le CSS dans l'administration Gantry 5

Logiquement tout devrait être OK. Bien entendu vous pouvez pousser la customisation de votre menu fixe en jouant avec les paramètres Headroom ou sur les CSS.

Voir le résultat sur le site test

traduction libre avec quelques modifications de http://gantry.org/blog/fixed-navigation