One-Page-Navigation

Demo

Eine Demo mit der One-Page-Navigation findest du hier.

Anleitung

Erweiterung installieren

Installiere die Erweiterung Onepage Navigation von Erdmann & Freunde über den Contao Manager und aktualisiere die Datenbank.

Modul anlegen

Lege ein Modul vom Typ Artikelnavigation (Onepage) an und wähle unter Modul-Template das Template mod_onepage_navigation_nature aus.

Layout anlegen

Lege ein neues Layout an bzw. dupliziere ein vorhandes Layout und wähle unter den Eingebundenen Modulen das eben angelegte Modul aus.

Damit die Navigation oben am Bildschirmrand stehen bleibt sobald man herunterscrollt, füge bitte noch folgende Codeschnipsel unter Eigener JavaScript-Code und Zusätzliche head-Tags ein. Du kannst das natürlich auch in eigene Dateien auslagern und die Dateien im Layout einbinden.

Eigener JavaScript-Code

<script>
jQuery(document).ready(function($) {
    stuckNavbar();
    
    $(window).scroll(function () {
        stuckNavbar();
    });
    
    function stuckNavbar() {
    	var scrollPos = $(window).scrollTop();
        if (scrollPos > 0) {
            $('.mod_navigation.navbar').addClass('stuck');
        } else {
            $('.mod_navigation.navbar').removeClass('stuck');
        }
    }
});
</script>

Zusätzliche head-Tags

<style>
.mod_navigation.navbar {
    position: fixed;
    transition: all .3s;
    
    &.stuck {
    	height: 70px;
    	
    	.navbar-brand img {
    		max-height: 40px;
    	}
    	
    	.navbar-start {
		    padding: 0 70px;
		}
    }
}
</style>

Layout der Seite zuweisen

Das angelegte Layout muss noch der Seite bzw. dem Seiten-Startpunkt zugewiesen werden.

Artikel bearbeiten

Für jeden Menüpunkt wird ein Artikel angelegt. In den Artikeleinstellungen kann unter One-Page-Navigation die Checkbox Als Navigationspunkt hinzufügen aktiviert werden.