Responsive Toggler-Navigation anpassen

Abhängig von der Bildschirmauflösung können Sie die Navigation optimiert für geringere Auflösungen ausgeben.

Um den Besuchern Ihrer Webseiten bei kleinen Endgeräten (geringer Bildschirmauflösung) eine optimierte Seitenausgabe zu liefern, sollte auch die Navigation entsprechend an den zur Verfügung stehenden Platz angepasst werden. Hierzu bietet sich eine Toggler-Navigation (oft auch Hamburgermenü oder Menünavigation genannt) an.

Umsetzung aktuelle BASE

Weblication® CMS liefert Ihnen mit der aktuellen BASE (Mobile First) bereits viele Einstellungen zum Kopfbereich, welche komfortable über Masken vorgenommen werden können.

Bei Nutzung des Kopfbereiches über den Struktureditor kann über Konfigurationsmaske der eingebundenen Navigation gewählt werden, wie die Darstellung am Großbildschirm und Mobil sein soll (z.B. Standard mit Layer, Menünavigation standard, etc.).
So lässt sich einstellen, ob schon bei Großbildschirm die Menünavigation (Toggler-Navigation) genutzt werden soll oder nur bei mobiler Darstellung (also bei kleiner Bildschirmbreite).

Über "Einstellungen Kopfbereich" (erreichbar über den Layout-Wizard, also "Layout anpassen" (page.scss)) kann zum "Kopfbereich über Struktureditor" über die Auswahl "Mindestbreite, um Standardnavigation anzuzeigen" festgelegt werden, ab welchem Breakpoint diese genutzt werden soll (z.B. "Breakpoint L").

Auch das Aussehen der Menünavigation (Hamburger-Icons) lässt sich über Masken festlegen. Dies nehmen Sie über "Kopfbereich anpassen" direkt zum Aufruf der eingebundenen Navigation vor.

Umsetzung BASE Classic

1) Allgemeines

Die BASE (ab 2.x) liefert Ihnen hierzu schon im Standard vorbereitet eine Umsetzung, bei der ab einer Bildschirmauflösung von 768 Pixel (px) eine Toggler-Navigation an Stelle der Hauptnavigation eingeblendet und die linke Unternavigation ausgeblendet wird.

Eine Toggler-Navigation bezieht sich auf Navigationen, welche über Weblication® CMS Navigationsdateien (z.B. standard.wNavigation.php) umgesetzt sind. Bereichsnavigationen (siehe Weblic® Bereichsnavigation) werden zur Toggler-Navigation nicht berücksichtigt!

BASE Standardnavigation
BASE Standardnavigation

Ab der definierten maximalen Breite wird die Navigation über eine Toggler-Schaltfläche angezeigt, die ein Aufklappen und Zuklappen dieser Responsive optimierten Navigation ermöglicht (siehe rechts).

BASE Responsive Navigation
BASE Responsive Navigation

2) Erforderliche Komponenten

Die in der BASE intergrierte Toggler-Navigation wird über CSS definiert und über Javascript angesprochen. Folgende Dateien sind hierfür verantwortlich:

  • design.css
    Pfad: /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/styles/design.css
    Beinhaltet die CSS-Definitionen zur Responsive-Navigation und die Angabe der Media Queries für die gewünschten Breiten (siehe auch Quelltext-Beispiele unten).
  • design.js
    Pfad: /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/scripts/design.js
    Beinhaltet die Javascript-Definitionen mit Angabe der Media Query Funktionen für die gewünschten Breiten (siehe auch Quelltext-Beispiele unten).
  • Projektpfad muß über Javascript in der includes.global.php innerhalb des htmlHeader-Templates gesetzt sein (siehe auch aktuelle BASE)
  • navigationResponsiveAll.php
    Pfad: /[IHR-LAYOUT-PROJEKT]/wGlobal/scripts/php/navigationResponsiveAll.php
    Skript für den Aufruf der Responsive-Navigation, welches über die design.js per Ajax angesprochen wird. Das Skript finden Sie in der aktuellen BASE unter dem genannten Pfad (Pfade ggf. anpassen!).
  • responsiveAll.wNavigation.php
    Pfad: /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/navigations/responsiveAll.wNavigation.php
    Navigationstemplate für die Responsive-Navigation. Das Template finden Sie in der aktuellen BASE unter dem genannten Pfad (Pfade ggf. anpassen!).

"[IHR-LAYOUT-PROJEKT]" steht für den Pfadnamen Ihres globalen Projektes (z.B. /de-wGlobal). Passen Sie die Pfade an Ihrer Projektpfade an!

Im Projekt sollte immer die jQuery-Version im Einsatz sein, welche auf in der BASE verwendet wird!

Zum Aufklappmenü (Burgermenü) wird übrigens das Wort "NAVIGATION" über die design.js als Togglertext data-Attribut des Navigationstemplates eingelesen. Dies nutzt im Navigationstemplate einen Textbaustein (navigation_main_toggler), welcher in der Textbaustein-Datei des Inhaltsprojektes definiert ist.

3) Zusammenspiel der Komponenten

In der design.css definieren Sie die Media Query Angaben mit den gewünschten Breiten. Zu einer definierten Breite (z.B. 768 px) legen Sie fest, was zu den jeweiligen CSS-Selektoren definiert sein soll. Sofern Ihr Projekt noch keine CSS-Only-Variablen unterstützt, notieren Sie anstatt der Variablen direkt die entsprechenden Werte für Farbe, Schriftgröße, etc.

Auszug aus der design.css zu bestimmten Media Queries (gesamte Definitionen siehe aktuelle BASE)

/* ... */
/* Gestaltung der mobilen Navigation */
#navigationResponsiveAll                                                                 {display:none;clear:both;position:relative;overflow:hidden;margin:0;padding:0;background-color:$backgroundColorNavigationMain;}
#navigationResponsiveAll ul                                                              {list-style-type:none;margin:0;padding:0}
#navigationResponsiveAll li                                                              {display:block;overflow:hidden;margin:0;padding:0}
/* ... (gesamte Definitionen siehe aktuelle BASE) ... */

/* ... */

/*#responsive Responsive Webdesign */

/* ... */

/*@wCssFragment{class:mediaquerySize;variant:max768;caption:wenn die Fensterbreite kleiner gleich 768 Pixel ist;caption-en:if window width is equal or less 768 pixel;} */
@media only screen and (max-width: 768px){
  .max768                        {display:none !important;}

  /* ... */
  #navigationSub                 {display:none}
  /* ... */

  /* ... (gesamte Definitionen siehe aktuelle BASE) ... */

  #blockMainOuter.nextToSidebar                  {margin-left:0;}
  #navigationSidebar                             {display:block;position:absolute;z-index:100;padding-right:40px;top:0;left:0;height:100%;background-color:$backgroundColorNavigationMain;}
  #navigationSidebar.navigationSidebarClosed     {padding-right:0;transition:padding 0.05s linear;}

  #navigationSidebar #navigationMainToggler      {display:block;position:absolute;top:0;right:0;box-sizing:border-box;-moz-box-sizing:border-box;width:40px;height:80px;margin:0;padding:12px 24px 12px 16px;cursor:pointer;color:$fontColorNavigationMain;text-decoration:none;font-size:$fontSizeNavigationLevel1;text-transform:uppercase;}

  #navigationMainToggler                         {display:block;position:relative;margin-right:2px;padding:12px 38px 12px 16px;cursor:pointer;color:$fontColorNavigationMain;text-decoration:none;font-size:$fontSizeNavigationLevel1;text-transform:uppercase;}
  #navigationMainToggler:before                  {content:'';position:absolute;margin-top:3px;right:12px;width:18px;height:11px;box-sizing:border-box;border-top:solid 4px $fontColorNavigationMain;border-bottom:solid 4px $fontColorNavigationMain;}
  #navigationMainToggler:after                   {content:'';position:absolute;margin-top:3px;right:12px;width:18px;height:18px;box-sizing:border-box;border-bottom:solid 4px $fontColorNavigationMain;}

  #navigationMainToggler.closed:before           {transition:all 0.3s linear,border-color 0.3s 0.3s linear;}
  #navigationMainToggler.closed:after            {transition:all 0.3s linear;}

  #navigationMainToggler.open:before             {transition:all 0.3s linear,border-color 0.1s linear;margin-top:6px;transform:rotate(45deg);right:14px;width:19px;border-bottom-color:transparent;}
  #navigationMainToggler.open:after              {transition:all 0.3s linear;margin-top:-5px;transform:rotate(-45deg);right:17px;width:19px;}

  #blockTop #navigationMain > ul,
  #blockLeft #navigationMain > ul,
  #blockBeforeLeftContentRightInner #navigationMain > ul {display:none;}
  #navigationMain > ul                           {display:none;}
  #navigationMain li.navLevel1                   {float:none;width:auto;border-bottom:none;border-top:solid 1px $borderColorNavigationLayer;border-bottom:none;}
  #navigationMain li.navLevel1:nth-child(odd),
  #navigationMain li.navLevel1:nth-child(even),
  #navigationMain li.navLevel1:nth-last-child(2),
  #navigationMain li.navLevel1:nth-child(2),
  #navigationMain li.navLevel1:last-child        {border-right:none;border-bottom:none;}

  #navigationMain li.navLevel1Open:hover ul.navLevel2Container,
  #navigationMain li.navLevel2Open:hover ul.navLevel3Container,
  #navigationMain li.navLevel3Open:hover ul.navLevel4Container {display:none;}

  #navigationSub                        {display:none;}

  /* ... (gesamte Definitionen siehe aktuelle BASE) ... */

}

/*@wCssFragment{class:mediaquerySize;variant:min769;caption:wenn die Fensterbreite größer 768 Pixel ist;caption-en:if window width is larger than 768 pixel;} */
@media only screen and (min-width: 769px){
  .min769 {display:none;}
}
/* ... */

Im o.g. Quelltextbeispiel ist z.B. für eine maximale Breite von 768 px festgelegt, daß die Unternavigation (CSS-Selektor #navigationSub) ausgeblendet wird (display:none).
Bei einer maximalen Breite von 768 px wird dann die Hauptnavigation (#navigationMain ul.navLevel1Container) ausgeblendet (display:none). Dafür wird das Symbol (Toggler) für die Responsive-Navigation (#navigationMainToggler) eingeblendet.

Um für den Seitenbesucher die Responsive-Navigation per Klick ersichtlich zu machen, erfolgt über die design,js eine entsprechende Abfrage auf die in der design.css gesetzten Breiten und die sonst erforderlichen Funktionen:

Auszug aus der design.js zu bestimmten Media Queries (gesamte Definitionen siehe aktuelle BASE)

// ...

////////////////////////////////////////////////////////////////
//
// Initialisieren der Seite
//
////////////////////////////////////////////////////////////////

jQuery(document).ready(function(){

  // ...

  if(typeof wEditor == 'undefined'){

    // ...

    jQuery('ul.navLevel1Container').before(function(){if(typeof jQuery(this).data('togglertext') != 'undefined') return '<div id="navigationMainToggler" class="closed">' + jQuery(this).data('togglertext') + '</div>'});
    jQuery('#navigationMainToggler').click(function(){
      // ... (siehe design.js der aktuellen BASE 2.x
    });

    // ...

////////////////////////////////////////////////////////////////
//
// Beim Aktivieren bzw. Deaktivieren von Media Queries
//
////////////////////////////////////////////////////////////////  

mediaquery_max768_onactivate = function(){
  //console.log('mediaquery_max768_onactivate');
  //jQuery('#blockTop').removeClass('wglKeepInsideTopOnScroll');
  
  if(jQuery('#navigationSidebar').length > 0 && jQuery('#navigationSidebar #navigationMainToggler').length == 0){
    //jQuery('#navigationSidebar').prepend(jQuery("#navigationMainToggler").html(''));
  }

  if(jQuery('#navigationResponsiveAll').length > 0 || window['hasLoadNavigationResponsiveAll']){
    //jQuery('#navigationResponsiveAll').show();
  }
  else{
    window['hasLoadNavigationResponsiveAll'] = true;
    jQuery.ajax({
      type: "GET",
      async: true,
      url: '/[IHR-LAYOUT-PROJEKT]/wGlobal/scripts/php/navigationResponsiveAll.php?project=' + wProjectPath + '&navid=' + (typeof(wNavidStandard) != 'undefined' ? wNavidStandard : ''),
      success: function(result){
        if(jQuery('#navigationSidebar').length > 0){
          jQuery('#navigationSidebar').append(result);
        }
        else{
          jQuery('#navigationMain').after(result);
        }
        jQuery('.navLevelOpener, .navLevelCloser').bind('click', function(){
          if(jQuery(this).next().css('display') != 'none' || jQuery(this).next().data('isopen') == 1){
            jQuery(this).addClass('navLevelOpener').removeClass('navLevelCloser');
            jQuery(this).next().slideUp('fast', function(){
              jQuery(this).data('isopen', 0);
            });
          }
          else{
            jQuery(this).addClass('navLevelCloser').removeClass('navLevelOpener');
            console.log(jQuery(this).next().get(0));
            jQuery(this).next().slideDown('fast', function(){
              jQuery(this).data('isopen', 1);
            });
          }
        });
      }
    });
  }  
  
  jQuery('#blockTopInner #navigationMeta').addClass('navigationMetaInitSourceTop').insertBefore("#blockBottomInner");  
};

mediaquery_max768_ondeactivate = function(){
  //console.log('mediaquery_max768_ondeactivate');

  jQuery('ul.navLevel1Container').css({'display' : ''});
  jQuery('#navigationResponsiveAll').hide();
  
  jQuery('.navigationMetaInitSourceTop').insertBefore("#blockTopInner #navigationMain");  
};

// ... weitere Einträge zu diversen Breiten

Achten Sie darauf, daß die Breitenangaben in der design.css über die design.js korrekt abgefragt werden! Bei einer anderen gewünschten Breite (z.B. Responsive-Navigation schon ab maximal 1024 px anstatt erst bei 768 px) müssen Sie dies sowohl in der design.css und auch design.js entsprechend anpassen!
Passen Sie im Beispiel die Pfade an Ihre Projektpfade an (/[IHR-LAYOUT-PROJEKT]).

Damit für die o.g. Templates/Skripte der Projektpfad innerhalb Javascript bekannt ist, wird dieser über die includes.global.php global im htmlHeader-Template gesetzt (wProjectPath='<xsl:value-of select="$wProjectPath" />';):

Auszug aus der includes.global.php zum Setzen diverser Javascript-Variablen

...
  <!-- HTML-Header -->
  <xsl:template name="htmlHeader">
    ...
    <script type="text/javascript">wNavidStandard='<xsl:value-of select="$wNavidStandard" />';wProjectPath='<xsl:value-of select="$wProjectPath" />';<xsl:if test="php:functionString('wVariables::getValue', 'images_hd_create', $wGlobalProjectPath) != '' and php:functionString('wVariables::getValue', 'images_hd_limit_dpr', $wGlobalProjectPath) != '2'">hdLimitDpr='<xsl:value-of select="php:functionString('wVariables::getValue', 'images_hd_limit_dpr', $wGlobalProjectPath)" />';</xsl:if>lightboxType='<xsl:value-of select="php:functionString('wVariables::getValue', 'lightbox_type', $wGlobalProjectPath)" />';</script>
    ...
...

4) Nachrüsten der Responsive-Navigation in älteren Projekten

Für eine Nachrüstung der Responsive Toggler-Navigation in etwas älteren BASE 2.x Projekten gehen Sie bitte wie folgt vor:

  • Backup des Global-Projektes anlegen
  • Weblic® ui.js per Update auf aktuellen Stand bringen
  • Weblic® design.js per Update auf aktuellen Stand bringen
    (bereits vorgenommene individuelle Anpassung an dieser JS-Datei müssen nach dem Update wieder manuell nachgeführt werden!)
    Dann können die Anpassungen zu onactivate/deactivate der mediaquery Angaben vorgenommen werden.
  • Projektpfad, etc. als JavaScript in includes.global.php innerhalb des htmlHeader-Templates ergänzen (siehe Quelltextbeispiel oben)
  • navigationResponsiveAll.php für Ajax-Aufruf abgelegen (siehe oben)
  • Navigations-Template responsiveAll.wNavigation.php abgelegen (siehe oben)
  • Sicherstellen, daß das ul-Tag des Navigationstemplates das data-togglerText Attribut gesetzt hat und der Textbaustein entsprechend befüllt ist.
  • CSS in der design.css ergänzen (#navigationResponsiveAll , Styles zu ...Toggler, etc., siehe aktuelle BASE)
    je nach Seitenstruktur eines älteren BASE 2.x Projektes müssen Sie ggf. auch die mediaquery-Angaben anpassen.
  • Projektcache leeren, damit die Seiten einen neuen Datei-Cache erhalten
    (Weblication Panel: Werkzeuge - Projekt bereinigen - Projekt-Cache löschen)

Gehen Sie bei einer gewünschten Nachrüstung bzw. einer Anpassung zuerst diese Punkte durch.

5) Toggler-Navigation bei allen Bildschirmbreiten nutzen

Sofern im Projekt die Toggler-Navigation (Navigation mit "Burger-Menü") bereits in der normalen Ansicht gewünscht ist, verschieben Sie die entsprechenden Definitionen aus den mediaquery-Angaben in den nicht Responsive-Bereich.

Zur design.css bedeutet dies, daß Sie die weiter oben genannten CSS-Definitionen aus dem Responsive-Webdesign Block innerhalb z.B. @media only screen and (max-width: 768px) rausnehmen und direkt in der design.css (z.B. oberhalb des Blockes "/*#responsive Responsive Webdesign */") einfügen.
Zusätzlich müssen Sie dafür sorgen, daß der Selektor für #navigationMainToggler (Block /* Einblender für Hauptnavigation bei schmalen Bildschirmen */ ) nicht mehr ausgeblendet wird. Ein "Auskommentieren" (#__navigationMainToggler        {display:none;} ) reicht in der Regel aus.

Zur design.js bedeutet dies, daß Sie die weiter oben genannten JavaScript-Definitionen aus dem Block "Beim Aktivieren bzw. Deaktivieren von Media Queries" herausnehmen und direkt im Block "Initialisieren der Seite" einfügen.

Individuelle Anpassungen können Sie abschliessend in den genannten Dateien durchführen und beachten bitte die weiteren Hinweise unten.

6) Weitere Hinweise / Zu beachten

Löschen Sie nach einer Anpassung der Breiten den Projektcache und auch den Browsercache, um die gemachten Änderungen testen zu können!