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>
<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:
<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.
<div class="navbar-portalname"> Brand Design Net </div>
Suche
Die Suche ist ebenfalls eine eigenständige Komponente. Im Falle des Headers wird sie in das Listen-Element des Such-Buttons integriert.
Dabei löst das Drücken des Such-Icons das Öffnen des Such-Feldes aus.
Die Verknüpfung wird dabei über das ID-Attribut des HTML-Elements hergestellt.
Da es sich selbst bei einem einfachen Suchfeld bereits um ein Formular im Sinne von HTML handelt
muss die komplette Such-Funktionalität in einem `
``
Anzeigen der Suchergebnisse
Die `.search-results` können aktiviert werden indem dem `.search-form-set`-Container
die CSS-Klasse `.has-results` zugefügt wird.
<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 %}
Level 3
benötigt lediglich die CSS-Klasse `.brandnav-lvl-3`.
<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>