Einführung

Um die Anatomie des Telekom Headers zu versthen ist es wichtig zu wissen, dass den Telekom Header nicht als “eine Komponente” gibt.
Er besteht aus mehreren Einzel-Komponenten die verschiedene Zustände haben können.

Übersicht

Der gesamte Header besteht im groben aus zwei Komponenten. Einer .brandbar mit Brand Logo und Brand Claim, sowie einer .navbar in der sich eine Haupt-Navigation und sowie eine Icon-Navigation befinden. Umgeben wird der header vom HTML5-Tag <header class="brand-header"></header> der die beiden Komponenten zusammenschließt.

Das Haupt-Menü wiederum ist selbst eine eigenständige Komponente. Sie bringt die notwendige Funktionalität für die Navigation auf Desktop oder Mobile mit sich und stellt daher die wichtigste Komponente im Header dar.

</div> </div>

Brand Claim Brand Claim
<header class="brand-header">
  <div class="brandbar">
    <div class="container-fixed">
      <div class="brand-logo">
        <img src="images/deutsche-telekom-logo.svg" alt="Telekom Logo">
        <span class="sr-only">Telekom Logo</span>
      </div>
      <div class="brand-claim">
        <img src="images/brand-claim.svg" alt="Brand Claim">
        <span class="sr-only">Brand Claim</span>
      </div>
    </div>
  </div>
  <nav class="navbar navbar-default">
    <div class="container-fixed">
      <div class="navbar-expanded">
        <div class="brandnavhead" data-spy="brandnav" data-target="#MainMenu">
          <button type="button" class="btn btn-clean navbar-btn brandnav-control-up" data-close="brandnav" data-target="#MainMenu">
            <span class="sr-only">Back</span>
            <span class="icon icon-navigation-left"></span>
          </button>

          <button type="button" class="btn btn-clean navbar-btn navbar-right" data-cancel="brandnav" data-target="#MainMenu">
            <span class="sr-only">Close Navigation</span>
            <span class="icon icon-cancel"></span>
          </button>

          <label class="navbar-header-label brandnav-label">Home</label>
        </div>
        <div class="brandnav brandnav-lvl-1" id="MainMenu">
          <ul class="nav">
            <li><a href="#">Shop</a></li>
            <li class="active"><a href="#">Meine Telekom</a></li>
            <li><a href="#">Hilfe</a></li>
            <li><a href="#">Kontakt</a></li>
          </ul>
        </div>
      </div>
      <div class="navbar-persistent">
        <button type="button" class="btn btn-clean navbar-btn navbar-toggle" data-open="brandnav" data-target="#MainMenu">
          <span class="sr-only">Open Navigation</span>
          <span class="icon icon-list-view"></span>
        </button>
        <ul class="nav navbar-nav navbar-nav-icons navbar-right">
          <li><a href="#"><span class="sr-only">Search</span><span class="icon icon-search"></span></a></li>
          <li><a href="#"><span class="sr-only">Shoppingcart</span><span class="icon icon-shopping-cart"></span></a></li>
          <li><a href="#"><span class="sr-only">My Profile</span><span class="icon icon-my-profile"></span></a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>

Minimiert

Es gibt die Möglichkeit die `.brandbar` und damit den gesamten Header zu minimieren. Dazu wird an die `.brandbar` die CSS-Klasse `.brandbar-minimized` angefügt.

<header class="brand-header">
  <div class="brandbar brandbar-minimized"></div>
  <nav class="navbar navbar-default">
    ...
  </nav>
</header>

Sprachauswahl

Eine Select Box für die Sprache kann hinzugefügt werden, indem eine Auswahlbox den Icons hinzugefügt wird:

Brand Claim Brand Claim
<li>
  <select class="form-select" title="Language">
    <option value="de">DE</option>
    <option value="en">EN</option>
  </select>
</li>

Portal

Der Portalname kann als Element mit der CSS-Klasse `.navbar-portalname` der `.navbar-expanded` zugefügt werden. Somit ist er bis zur Mobile-Variante sichtbar.

Brand Claim Brand Claim
<div class="navbar-portalname">
  Brand Design Net
</div>

Brand Claim Brand Claim
<li class="navbar-search-item navbar-search-item-regular">
    <a href="#tc-search" data-toggle="search" aria-controls="tc-search">
      <span class="sr-only">Search</span>
      <span class="icon icon-search"></span>
    </a>
    <div id="tc-search" class="navbar-search search slide">
      <form class="navbar-form" autocomplete="off">
        <div class="search-form-set">
          <span class="sr-only">Globale Suche</span>
          <div class="input-group has-icon">
            <button type="button" class="cancel" data-toggle="search" data-target="#tc-search" aria-controls="tc-search" aria-label="Cancel">
              <span class="icon icon-cancel" aria-hidden="true"></span>
            </button>
            <span class="icon icon-search form-icon" aria-hidden="true"></span>
            <label class="sr-only" for="q">Suchbegriff</label>
            <input type="text" name="q" id="q" class="form-input" placeholder="Was suchen Sie?" tabindex="3"/>
            <button type="submit" class="sr-only">Suchen</button>
          </div>
          <div class="search-results">
            <ul>
              <li><strong>Samsung Galaxy S</strong>5</li>
              <li><strong>Samsung Galaxy S</strong>6</li>
              <li><strong>Samsung Galaxy S</strong>6 edge</li>
              <li>Hilfe zu <strong>Samsung Galaxy</strong></li>
              <li>Lieferstatus</li>
              <li>Kartenaktivierung</li>
            </ul>
          </div>
        </div>
      </form>
    </div>
  </li>

Navigation

Die Navigation gibt es in den Formaten Mobile, Tablet und Desktop. Anhand der Viewports wird das Menü entsprechend dargestellt. Das Anzeigen der Navigation ist durch ein JavaScript-Plugin realisiert.

Der Navigations-Baum besteht aus drei Ebenen und ist durch `

    `-Listen realisiert. Die CSS-Klasse `.brandnav` liegt dabei auf jeder ebene und stellt die Basis für die Darstellung. Jedes Level im Navigations-Baum hat zusätzlich seine eigene CSS-Klasse `brandnav-lvl-{1,2,3}` und etwas eigenes Markup.

    Level 1
    Das erste Level der Navigation benötigt ein ID-Attribut und die CSS-Klasse `.brandnav-lvl-1`. Über diesen Knoten läuft die ganze Kommunikation des JavaScript-Plugins.

    Level 2
    benötigt die CSS-Klasse `.brandnav-lvl-2` und zusätzliches Markup über das die Schließen-Funktion in der Desktop-Variante gesteuert werden kann. {% highlight html %}

    {% endhighlight %}

    Level 3
    benötigt lediglich die CSS-Klasse `.brandnav-lvl-3`.

Brand Claim Brand Claim
<header class="brand-header">
  <div class="brandbar">
    <div class="container-fixed">
      <div class="brand-logo">
        <img src="images/deutsche-telekom-logo.svg" alt="Telekom Logo">
        <span class="sr-only">Telekom Logo</span>
      </div>
      <div class="brand-claim">
        <img src="images/brand-claim.svg" alt="Brand Claim">
        <span class="sr-only">Brand Claim</span>
      </div>
    </div>
  </div>
  <nav class="navbar navbar-default">
    <div class="container-fixed">
      <div class="navbar-expanded">
        <div class="brandnavhead" data-spy="brandnav" data-target="#MainMenu">
          <button type="button" class="btn btn-clean navbar-btn brandnav-control-up" data-close="brandnav" data-target="#MainMenu">
            <span class="sr-only">Back</span>
            <span class="icon icon-navigation-left"></span>
          </button>

          <button type="button" class="btn btn-clean navbar-btn navbar-right" data-cancel="brandnav" data-target="#MainMenu">
            <span class="sr-only">Close Navigation</span>
            <span class="icon icon-cancel"></span>
          </button>

          <label class="navbar-header-label brandnav-label">Home</label>
        </div>
        <div class="brandnav brandnav-lvl-1" id="MainMenu">
          <ul class="nav">
            <li>
              <a href="#" data-open="brandnav">Shop</a>
              <div class="brandnav brandnav-lvl-2">
                <div class="brandnav-lvl-2-head">
                  <button type="button" class="cancel" data-close="brandnav" data-target="#MainMenu">
                    <span class="icon icon-cancel" aria-hidden="true"></span>
                  </button>
                </div>
                <ul class="nav">
                  <li class="col-l-3">
                    <a href="#" data-open="brandnav">MagentaOne</a>
                    <div class="brandnav brandnav-lvl-3">
                      <ul class="nav">
                        <li><a href="#">Offers</a></li>
                        <li><a href="#">Tariff</a></li>
                        <li><a href="#">Benefit</a></li>
                        <li><a href="#">Buy Now</a></li>
                      </ul>
                    </div>
                  </li>
                  <li class="col-l-3">
                    <a href="#" data-open="brandnav">MagentaMobile</a>
                    <div class="brandnav brandnav-lvl-3">
                      <ul class="nav">
                        <li><a href="#">Special Offers</a></li>
                        <li><a href="#">Smartphones</a></li>
                        <li><a href="#">Tablets & Surfsticks</a></li>
                        <li><a href="#">Tariff</a></li>
                        <li><a href="#">Extras</a></li>
                        <li><a href="#">Accessoires</a></li>
                        <li><a href="#">Buy Now</a></li>
                      </ul>
                    </div>
                  </li>
                  <li class="col-l-3">
                    <a href="#" data-open="brandnav">MagentaHome</a>
                    <div class="brandnav brandnav-lvl-3">
                      <ul class="nav">
                        <li><a href="#">Tariff</a></li>
                        <li><a href="#">Entertain</a></li>
                        <li><a href="#">Extras</a></li>
                        <li><a href="#">Accessoires</a></li>
                      </ul>
                    </div>
                  </li>
                  <li class="col-l-3">
                    <a href="#" data-open="brandnav">More</a>
                    <div class="brandnav brandnav-lvl-3">
                      <ul class="nav">
                        <li><a href="#">Smart Home</a></li>
                        <li><a href="#">Apps</a></li>
                      </ul>
                    </div>
                  </li>
                </ul>
              </div>
            </li>
            <li>
              <a href="#" data-open="brandnav">My Telekom</a>
              <div class="brandnav brandnav-lvl-2">
                <div class="brandnav-lvl-2-head">
                  <button type="button" class="cancel" data-close="brandnav" data-target="#MainMenu">
                    <span class="icon icon-cancel" aria-hidden="true"></span>
                  </button>
                </div>
                <ul class="nav">
                  <li class="col-l-4">
                    <a href="#" data-open="brandnav">Your Profile</a>
                    <div class="brandnav brandnav-lvl-3">
                      <ul class="nav">
                        <li><a href="#">Sims</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Vorteil</a></li>
                        <li><a href="#">Bestellen</a></li>
                      </ul>
                    </div>
                  </li>
                  <li class="col-l-4">
                    <a href="#" data-open="brandnav">Mobile & Home</a>
                    <div class="brandnav brandnav-lvl-3">
                      <ul class="nav">
                        <li><a href="#">Apps</a></li>
                        <li><a href="#">Connectivity</a></li>
                        <li><a href="#">Wifi</a></li>
                        <li><a href="#">Network</a></li>
                        <li><a href="#">Extras</a></li>
                      </ul>
                    </div>
                  </li>
                  <li class="col-l-4">
                    <a href="#" data-open="brandnav">Help</a>
                    <div class="brandnav brandnav-lvl-3">
                      <ul class="nav">
                        <li><a href="#">Browse Help</a></li>
                        <li><a href="#">FAQ</a></li>
                        <li><a href="#">Services</a></li>
                      </ul>
                    </div>
                  </li>
                </ul>
              </div>
            </li>
            <li>
              <a href="#" data-open="brandnav">Help</a>
              <div class="brandnav brandnav-lvl-2">
                <div class="brandnav-lvl-2-head">
                  <button type="button" class="cancel" data-close="brandnav" data-target="#MainMenu">
                    <span class="icon icon-cancel" aria-hidden="true"></span>
                  </button>
                </div>
                <ul class="nav">
                  <li class="col-l-4">
                    <a href="#" data-open="brandnav">Mobile Help</a>
                    <div class="brandnav brandnav-lvl-3">
                      <ul class="nav">
                        <li><a href="#">Services</a></li>
                        <li><a href="#">FAQ</a></li>
                        <li><a href="#">Contact</a></li>
                      </ul>
                    </div>
                  </li>
                  <li class="col-l-4">
                    <a href="#" data-open="brandnav">Telekom Home Help</a>
                    <div class="brandnav brandnav-lvl-3">
                      <ul class="nav">
                        <li><a href="#">Overview</a></li>
                        <li><a href="#">Home Kit</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Extras</a></li>
                      </ul>
                    </div>
                  </li>
                  <li class="col-l-4">
                    <a href="#" data-open="brandnav">Support</a>
                    <div class="brandnav brandnav-lvl-3">
                      <ul class="nav">
                        <li><a href="#">Browse Help</a></li>
                        <li><a href="#">Overview</a></li>
                        <li><a href="#">Contact Us</a></li>
                      </ul>
                    </div>
                  </li>
                </ul>
              </div>
            </li>
            <li>
              <a href="#" data-open="brandnav">Contact</a>
              <div class="brandnav brandnav-lvl-2">
                <div class="brandnav-lvl-2-head">
                  <button type="button" class="cancel" data-close="brandnav" data-target="#MainMenu">
                    <span class="icon icon-cancel" aria-hidden="true"></span>
                  </button>
                </div>
                <ul class="nav">
                  <li class="col-l-4">
                    <a href="#" data-open="brandnav">Help</a>
                    <div class="brandnav brandnav-lvl-3">
                      <ul class="nav">
                        <li><a href="#">Services</a></li>
                        <li><a href="#">FAQ</a></li>
                        <li><a href="#">Contact</a></li>
                      </ul>
                    </div>
                  </li>
                  <li class="col-l-4">
                    <a href="#" data-open="brandnav">Services</a>
                    <div class="brandnav brandnav-lvl-3">
                      <ul class="nav">
                        <li><a href="#">Tools</a></li>
                        <li><a href="#">Applications</a></li>
                        <li><a href="#">Feedback</a></li>
                        <li><a href="#">Phones and Devices</a></li>
                      </ul>
                    </div>
                  </li>
                  <li class="col-l-4">
                    <a href="#" data-open="brandnav">Support</a>
                    <div class="brandnav brandnav-lvl-3">
                      <ul class="nav">
                        <li><a href="#">Top Queries</a></li>
                        <li><a href="#">Latest</a></li>
                      </ul>
                    </div>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="navbar-persistent">
        <button type="button" class="btn btn-clean navbar-btn navbar-toggle" data-open="brandnav" data-target="#MainMenu">
          <span class="sr-only">Open Navigation</span>
          <span class="icon icon-list-view"></span>
        </button>
        <ul class="nav navbar-nav navbar-nav-icons navbar-right">
          <li><a href="#"><span class="sr-only">Search</span><span class="icon icon-search"></span></a></li>
          <li><a href="#"><span class="sr-only">Shoppingcart</span><span class="icon icon-shopping-cart"></span></a></li>
          <li><a href="#"><span class="sr-only">My Profile</span><span class="icon icon-my-profile"></span></a></li>
        </ul>
      </div>
    </div>
  </nav>
</header>