TypoScript Navigation mit Bootstrap 3 Navbar

Die Navbar von Twitter Bootstrap hat sich als Quasi-Standard bei der Generierung responsiver Webseite durchgesetzt. Das Framework erlaubt es mit seinem Modell von row und col nicht nur, Inhalte einer Webseite so zu verschachteln, dass sie auf einem Desktop Rechner und einem Smartphone sichtbar angezeigt werden können. Eine weitere Stärke von Bootstrap ist es auch, eine Navigation so aufzubauen, dass sie bei einer bestimmten Breite eines Browserfensters umgeschaltet wird.

Das zweite wichtige Prinzip einer Bootstrap Navigation: Wenn man in einem Menu eine Navigation mit lediglich einer Ebene hat, so werden diese Punkte als Links dargestellt. Gibt es jedoch eine zweite Ebene in einer Navigation, so schaltet man den Link zu einem Dropdown-Menu um. Beim Klick auf dieses Drop Down Menu wird dann die folgende Ebene geöffnet. Das Wesen einer Navbar.

Der große Vorteil des Verhaltens der Navbar: Wenn man auf einem Touchscreen das Menu anklickt, erscheint die folgende Ebene auf dem Bildschirm. Nutzt man einen Hover-Effekt, so öffnet sich bei einem Touchscreen zwar kurz die zweite Ebene, man ruft aber automatisch die gerade berührte Seite auf.

Der große Nachteil dieses Verhaltens: Die erste Ebene einer Navigation ist nun, zumindest über die obere Leiste, nicht mehr erreichbar. Wenn man also in einer Seite einen Überblick über die folgenden Seiten schaffen möchte, muss man diese Seite in die folgende Ebene verlagern. Zudem kann man die 1. Ebene trotzdem noch über eine Parallel-Navigation erreichen. Man sollte also einen Verweis in die Übersicht in der 2. Ebene einrichten, um duplicate Content zu vermeiden.

Navigation mit Bootstrap in 3 Ebenen.

lib.navigation_top = COA
lib.navigation_top {
  wrap = <nav class="navbar navbar-default"> <div class="container-fluid"> | </div> </nav>
   
  ## Hamburger Button zum Aufklappen der Navigation auf kleineren Endgeräten
  30 = COA
  30 {
    wrap = <div class="navbar-header"> | </div>
    10 = COA
    10 {
      // hamburger icon:
      wrap (
        <button type="button"              ## Zeilenumbruch
          class="navbar-toggle collapsed" 
          data-toggle="collapse" 
          data-target="#navbar" 
          aria-expanded="false" 
          aria-controls="navbar">|</button>
      )
      10 = TEXT
      10.value = <span class="sr-only">Navigation Einklappen</span>
      20 = TEXT
      20.value = <span class="icon-bar"></span>
      21 < .20
      22 < .20
    }
  }
   
  ## Aufbau der Navigation
  20 = HMENU
  20 {
    wrap = <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> | </ul> </div>
    
    ## Startseite und Sitemap ausschliessen
    excludeUidList = 1, 2
     
    ## 1. Ebene der Navigation
    1 = TMENU
    1 {
      expAll = 1
         
      NO = 1
      NO {
        ATagTitle.field = title
        wrapItemAndSub = <li>|</li>
      }
      
      CUR < .NO
      CUR {
        wrapItemAndSub = <li class="active">|</li>
      }
      
      ACT < .CUR
      
      IFSUB = 1
      IFSUB {
        ATagTitle.field = title
        ATagParams = class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"
        linkWrap = |<b class="caret"></b>
        ATagBeforeWrap = 1
        wrapItemAndSub = <li class="dropdown">|</li>
      }
      
      ACTIFSUB < .IFSUB
      ACTIFSUB {
        wrapItemAndSub = <li class="dropdown active">|</li>
      }
      
      CURIFSUB < .ACTIFSUB
    }
    
    ## 2. Ebene der Navigation
    2 < .1
    2 {
      wrap = <ul class="dropdown-menu">|</ul>
       
      IFSUB {
        ATagTitle.field = title
        ATagParams = class="arrowbox"
        linkWrap = |
        ATagBeforeWrap = 1
        wrapItemAndSub = <li>|</li>
      }
      CURIFSUB {
        ATagTitle.field = title
        ATagParams = class="arrowbox"
        linkWrap = |
        ATagBeforeWrap = 1
        wrapItemAndSub = <li>|</li>
      }
      ACTIFSUB {
        ATagTitle.field = title
        ATagParams = class="arrowbox active"
        linkWrap = |
        ATagBeforeWrap = 1
        wrapItemAndSub = <li>|</li>
      }
    }
         
    ## 3. Ebene der Navigation 
    3 < .2
    3 {
      wrap = <ul class="dropdown-menu">|</ul>
      NO = 1
      NO {
        ATagTitle.field = title
        wrapItemAndSub = <li>|</li>
      }
      
      IFSUB >
    }
  }
}

Ergänzen Sie die Genierung der obersten HTML-Zeile für die Navigation mit der Klasse navbar-fixed-top:

lib.navigation_top = COA
lib.navigation_top {
  wrap = <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> | </div> </nav>
  [...weiteres TypoScript...]
}