Responsive Toggler-Navigation anpassen

22. Dez 2016

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.

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 Standardnavigationzoom
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 Navigationzoom
BASE Responsive Navigation
 

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: /IhrGlobalesProjekt/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: /IhrGlobalesProjekt/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: /IhrGlobalesProjekt/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: /IhrGlobalesProjekt/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!).

"IhrGlobalesProjekt" 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.

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) ... */

/* ... */

/*@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: '/IhrGlobalesProjekt/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 (/IhrGlobalesProjekt).

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

Nachrüsten der Responsive-Navigation in älteren Projekten

Für eine Nachrüstung der Responsive Toggler-Navigation in etwas älteren BASE 2.x Projekte gehen Sie bitte wie folgt vor (ggf. auch bedingt auf BASE 1.x Projekte anwendbar):

  • 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 etnsprechend befüllt ist.
  • CSS in der design.css ergänzen (#navigationResponsiveAll ..., siehe aktuelle BASE)
  • 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.

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

Ähnliche Seiten

Entwicklerbereich Weblication® CMS - © Scholl Communications AG