Responsive Toggler-Navigation anpassen

/* ... */
/* 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;}
}
/* ... */

// ...

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

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