Im folgenden Artikel wird die Einbindung einer mit jquery animierten fullscreen Navigation in Contao erklärt.
Aktuell bin ich dabei, meine Webseite zu überarbeiten. Das ist gerade bei Designern nicht immer einfach: Viele Webdesigner toben sich dann richtig aus, das Ergebnis ist nach meinem Empfinden aber nicht immer optimal: Technisch mag zwar alles perfekt ausgeklügelt sein, aber die Nutzbarkeit ist, gerade für weniger Internet-affine Nutzer, die aber wiederum die Zielgruppe sind, meist eingeschränkt.
Dennoch wollte ich bei meiner neuen Webseite einige schlichte, moderne, seltene, auffällige und einprägsame Dinge einbauen. Die Liste an Kriterien ist insofern lang gewesen. 😉
Einem dieser Elemente – dem wohl wichtigsten – möchte ich heute einen Beitrag widmen: Der Navigation. Ich habe mich hier für eine Vollbild-Navigation entschieden, da hier keine größeren Änderungen für die Mobilversion nötig sind (die ist quasi von Haus aus responsive), seeeeehr viel Platz (z.B. für große Icons, Action-Buttons, usw.) vorhanden ist und das Ganze nach meinem Empfinden auch sehr gut aussieht. Als Basis dient die „Full-Screen Pop-Out Navigation“ von codyhouse.co.
Um das Ganze in Contao zu implementieren, sind folgende Schritte nötig:
- Das Paket herunterladen und entpacken.
- In Contao im Seitenlayout einen eigenen Navigationsbereich hinzufügen; bei mir heißt er Navigation, die zugewiesene id ist entsprechend #Navigation
- Bevor es los geht, bearbeiten wir noch schnell die main.js und style.css aus dem Paket: Mit suchen&ersetzen ersetzen wir alle .cd-header durch #Navigation
- Nun laden wir die style.css und main.js in Contao hoch und binden sie unter Seitenlayout im Header ein:
12<link rel="stylesheet" href="<Pfad>/style.css" type="text/css"/><script src="<Pfad>/main.js"></script> - Im Seitenlayout aktivieren wir außerdem jquery.
- Jetzt legen wir eine neue Seite an, die wir im Menü verstecken. Hier werden wir unsere Navigation einfach als Textelement anlegen und hübsch stylen. Ich würde die Verwendung eines responsive grids oder der rocksolid columns empfehlen.
- Sobald das erledigt ist, legen wir ein neues html-Modul an, mit dem wir die Navigation, die aufgerufen wird, einbinden:
12345<nav><div class="cd-primary-nav">{{insert_article::<ARTIKEL ID EINGEBEN>}}</div></nav> - Um den Button, mit dem die Navigation aufgerufen wird, einzubinden, legen wir ebenfalls ein html-Modul an. Ich habe dem Ganzen noch die Klasse .navbutton gegeben, um den Button in meiner #Navigation anordnen zu können:
12345<div class="navbutton"><a class="cd-primary-nav-trigger" href="{{page::alias}}.html#0"><span class="cd-menu-text">Menü</span><span class="cd-menu-icon"></span></a></div> - Als nächstes binden wir die Module im Seitenlayout ein. Den Button (7. Schritt) fügen wir in unseren unter 2. angelegten Navigationsbereich ein, die Navigation (6. Schritt) in der Hauptspalte.
- Das war es auch schon – die Navigation sollte nun nach einem Klick auf den Menü Button herunter fahren. Natürlich kann das .css noch etwas angepasst werden, nicht benötigte Elemente wie .cd-logo oder .cd-secondary-nav können entfernt werden.
Was mir dann noch nicht gefallen hatte war der Umstand, dass das Menü beim Klicken eines Ankerlinks offen geblieben ist. Das ist insbesondere bei Onepage-Webseiten sehr unpraktisch. Ich habe daher die main.js wie folgt angepasst, um die Navigation beim Anklicken eines Links zu schließen:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
jQuery(document).ready(function($){ //if you change this breakpoint in the style.css file (or _layout.scss if you use SASS), don't forget to update this value as well var MQL = 1170; //primary navigation slide-in effect if($(window).width() > MQL) { var headerHeight = $('#Navigation').height(); $(window).on('scroll', { previousTop: 0 }, function () { var currentTop = $(window).scrollTop(); //check if user is scrolling up if (currentTop < this.previousTop ) { //if scrolling up... if (currentTop > 0 && $('#Navigation').hasClass('is-fixed')) { $('#Navigation').addClass('is-visible'); } else { $('#Navigation').removeClass('is-visible is-fixed'); } } else { //if scrolling down... $('#Navigation').removeClass('is-visible'); if( currentTop > headerHeight && !$('#Navigation').hasClass('is-fixed')) $('#Navigation').addClass('is-fixed'); } this.previousTop = currentTop; }); } //open/close primary navigation $('.cd-primary-nav-trigger').on('click', function(){ $('.cd-menu-icon').toggleClass('is-clicked'); $('#Navigation').toggleClass('menu-is-open'); //in firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden if( $('.cd-primary-nav').hasClass('is-visible') ) { $('.cd-primary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){ $('body').removeClass('overflow-hidden'); }); } else { $('.cd-primary-nav').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){ $('body').addClass('overflow-hidden'); }); } }); $( ".cd-primary-nav a" ).click(function() { $('.cd-menu-icon').toggleClass('is-clicked'); $('#Navigation').toggleClass('menu-is-open'); //in firefox transitions break when parent overflow is changed, so we need to wait for the end of the trasition to give the body an overflow hidden if( $('.cd-primary-nav').hasClass('is-visible') ) { $('.cd-primary-nav').removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){ $('body').removeClass('overflow-hidden'); }); } else { $('.cd-primary-nav').addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){ $('body').addClass('overflow-hidden'); }); } }); }); |
Hallo Jonathan, danke für deine tolle Anleitung, ich habe sie sehr schnell für eine neue HP umsetzen können..
Leider funktioniert das Script aber nicht auf meiner Kontaktseite mit integrierter Google-Maps Karte! Hast Du da vielleicht einen Tip wie man das Script dort auch zum laufen bekommt??