Cikkek

Bizonyára megfordult már a webmaster fejében a gondolat: Jó lenne, ha a sablon felső részén lévő menü az oldal görgetésével nem tűnne el, hanem továbbra is látható lenne a képernyő tetején. Az eredeti - angol - leírás a http://docs.gantry.org/gantry5/theme-development/theme-customization címen erre három módszert tartalmaz, ebből a szerzők által ajánlott, harmadik módszert mutatjuk be cikkünkben.

A lépések a következők:

1.) Szerezzük be headroom.min.js fájlt a http://wicky.nillia.ms/headroom.js/ címről (a tömörebb, kisebb méretű "Production" verziót kell letölteni) és töltsük fel a THEME_DIR/custom/js/ mappába. (A szkript közvetlen linkje: https://raw.githubusercontent.com/WickyNilliams/headroom.js/v0.7.0/dist/headroom.min.js)

2.) Ahhoz, hogy oldalunk tudtára adjuk a headroom.js script létezését, az Atoms szekcióban be kell ezt állítani:

3.) A következő lépésben a </body> tag elé helyezzük be az alábbi scriptet. Ezt a sablonkezelő "Page Settings" fülön, a "Global Page settings" című lapon, a "Body Attributes" blokkban tehetjük meg. Ez a script fogja a custom/js/ mappában lévő másik scriptet működtetni, amikor azt érzékeli, hogy oldalunkat görgetjük.

<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>

A fenti script a #g-navigation szekcióra van hatással, mert alapesetben ebbe a szekcióba kerül a menü. Ha oldalunkon a menü nem a Navigation szekcióban, hanem a Header szekcióban van, akkor a szkriptben az idézőjelek között írjuk át a #g-navigation szöveget #g-header-re.

A szkript második része engedélyezi szkript használatát a mobil eszközökön az Offcanvas szekció számára.

4.) A következő lépésben ki kell egészítenünk a custom.scss stíluslap fájlt az alábbi definíciókkal:

(egyik típus)

@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);
}

(másik típus) Ez egy  kicsit rafináltabb megjelenítési mód, ehhez viszont az alábbi kódot kell a custom.scss-be illeszteni.
A kettő közötti különbséget a frontenden lehet tesztelni.

@import "dependencies";

//Fixed Header On Scroll - Advanced
.headroom {
    @include transition(transform 200ms linear);
}
.headroom--pinned {
    @include transform(translateY(0%));
}
.headroom--unpinned {
    @include transform(translateY(-100%));
}

#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;
    &.headroom--unpinned {
        top: 0;
    }
}

.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);
}

A custom.scss kiegészítése után természetesen ne felejtsük el újrafordítani azt a [Recompile CSS] gombra kattintással.

A fentiekben bemutatott, nem túl sok munkával látványos módon fejleszthetjük és jobban kezelhetővé tehetjük oldalunkat.

Működés közben megtekinthető itt és itt.