## Einführung Um die Anatomie des Telekom Headers zu versthen ist es wichtig zu wissen, dass den Telekom Header nicht als "eine Komponente" gibt.<br> 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> <div class="tc-example tc-example-block" lang="en"> <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="#MainMenuExample1"> <button type="button" class="btn btn-clean navbar-btn brandnav-control-up" data-close="brandnav" data-target="#MainMenuExample1"> <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="#MainMenuExample1"> <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="MainMenuExample1"> <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="#MainMenuExample1"> <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> </div> ```html <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> ``` <hr class="offset-top-8"/> <div class="main"> <div class="container-fixed"> <h3>Minimiert</h3> <p> 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. </p> </div> </div> <div class="tc-example tc-example-block" lang="en"> <header class="brand-header"> <div class="brandbar brandbar-minimized"></div> <nav class="navbar navbar-default"> <div class="container-fixed"> <div class="navbar-expanded"> <div class="brandnavhead" data-spy="brandnav" data-target="#MainMenuExample2"> <button type="button" class="btn btn-clean navbar-btn brandnav-control-up" data-close="brandnav" data-target="#MainMenuExample2"> <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="#MainMenuExample2"> <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="MainMenuExample2"> <ul class="nav"> <li><a href="#">Shop</a></li> <li><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="#MainMenuExample2"> <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> </div> ```html <header class="brand-header"> <div class="brandbar brandbar-minimized"></div> <nav class="navbar navbar-default"> ... </nav> </header> ``` <hr class="offset-top-8"/> <div class="main"> <div class="container-fixed"> <h3>Sprachauswahl</h3> <p> Eine Select Box für die Sprache kann hinzugefügt werden, indem eine Auswahlbox den Icons hinzugefügt wird: </p> </div> </div> <div class="tc-example tc-example-block" lang="en"> <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="#MainMenuExample3"> <button type="button" class="btn btn-clean navbar-btn brandnav-control-up" data-close="brandnav" data-target="#MainMenuExample3"> <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="#MainMenuExample3"> <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="MainMenuExample3"> <ul class="nav"> <li><a href="#">Shop</a></li> <li><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="#MainMenuExample3"> <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> <li> <select class="form-select" title="Language"> <option value="de">DE</option> <option value="en">EN</option> </select> </li> </ul> </div> </div> </nav> </header> </div> ```html <li> <select class="form-select" title="Language"> <option value="de">DE</option> <option value="en">EN</option> </select> </li> ``` <hr class="offset-top-8"/> <div class="main"> <div class="container-fixed"> <h3>Portal</h3> <p> 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. </p> </div> </div> <div class="tc-example tc-example-block" lang="en"> <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="navbar-portalname"> Brand Design Net </div> <div class="brandnavhead" data-spy="brandnav" data-target="#MainMenuExample4"> <button type="button" class="btn btn-clean navbar-btn brandnav-control-up" data-close="brandnav" data-target="#MainMenuExample4"> <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="#MainMenuExample4"> <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="MainMenuExample4"> <ul class="nav"> <li><a href="#">Shop</a></li> <li><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="#MainMenuExample4"> <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> </div> ```html <div class="navbar-portalname"> Brand Design Net </div> ``` <hr class="offset-top-8"/> <div class="main"> <div class="container-fixed"> <h3>Suche</h3> <p> Die Suche ist ebenfalls eine eigenständige Komponente. Im Falle des Headers wird sie in das Listen-Element des Such-Buttons integriert. </p> <p> 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.<br> `<a href="#tc-search" data-toggle="search" aria-controls="tc-search">` <p> <p> 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 `<form>`-Element liegen. Das eigentliche Suchfeld liegt dabei in einem `.input-group`-Container der mit Icons ausgestattet ist. Dieser wiederum liegt in einem `.search-form-set` in dem sich dann auch die `.search-results` befinden. </p> <p> <strong>Anzeigen der Suchergebnisse</strong><br> Die `.search-results` können aktiviert werden indem dem `.search-form-set`-Container die CSS-Klasse `.has-results` zugefügt wird. </p> </div> </div> <div class="tc-example tc-example-block" lang="en"> <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="navbar-portalname"> Brand Design Net </div> <div class="brandnavhead" data-spy="brandnav" data-target="#MainMenuExample5"> <button type="button" class="btn btn-clean navbar-btn brandnav-control-up" data-close="brandnav" data-target="#MainMenuExample5"> <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="#MainMenuExample5"> <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="MainMenuExample5"> <ul class="nav"> <li><a href="#">Shop</a></li> <li><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="#MainMenuExample5"> <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 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> <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> </div> ```html <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> ``` <hr class="offset-top-8"/> <div class="main"> <div class="container-fixed"> <h3>Navigation</h3> <p> 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. </p> <p> Der Navigations-Baum besteht aus drei Ebenen und ist durch `<ul>`-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. </p> <p> <strong>Level 1</strong><br> 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. </p> <p> <strong>Level 2</strong><br> 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 %} <div class="brandnav-lvl-2-head"> <button type="button" class="cancel" data-close="brandnav" data-target="#MainMenuExample6"> <span class="icon icon-cancel" aria-hidden="true"></span> </button> </div>{% endhighlight %} </p> <p> <strong>Level 3</strong><br> benötigt lediglich die CSS-Klasse `.brandnav-lvl-3`. </p> </div> </div> <div class="tc-example tc-example-block" lang="en"> <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="#MainMenuExample6"> <button type="button" class="btn btn-clean navbar-btn brandnav-control-up" data-close="brandnav" data-target="#MainMenuExample6"> <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="#MainMenuExample6"> <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="MainMenuExample6"> <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="#MainMenuExample6"> <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="#MainMenuExample6"> <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="#MainMenuExample6"> <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="#MainMenuExample6"> <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="#MainMenuExample1"> <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> </div> ```html <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> ```