Core Framework – Top Navigation v0.5.3 – Documentation

Top Navigation

The global top navigation is ImmobilienScout24's central navigation hub. It links to all of the most relevant product and content pages and provides access to the user's account area.

The header configuration is centrally managed within the CMS, so if you wish to use the top navigation in your pages, you should include it by way of a CMS content snippet. (For more information on how to do that, please refer to the Wiki or bribe your CMS team with shiny things.)

See the Change Log to find out what's changed from previous versions.
  1. Complete Sample Markup
  2. CSS and JS Dependencies
  3. Page Frame
  4. Brand Header
  5. Navigation Frame
  6. Navigation Levels
    1. Tab Navigation
      1. Active Tabs
      2. Delayed Hover Effect
      3. Layer Sizes
      4. Layer Alignment
      5. Self-aligned Layers
  7. Slide-in Navigation
  8. Account Tab
    1. Account Tab Structure
    2. Reduced Account Tab
    3. Login Status
  9. JavaScript
  10. “Powered by” Logo

Complete Sample Markup

Complete example of a top navigation
<div class="corporate-powered-by-container">
  <header class="page-header--white page-header--white--composite">
    <div class="content-wrapper vertical-center-container">
      <a href="index.html" title="ImmobilienScout24" class="page-header__logo vertical-center">
        <img src="../../img/logo/immobilienscout24.svg" alt="ImmobilienScout24" onerror="this.src='../../img/logo/immobilienscout24.png';this.onerror=null;" />
      </a><span class="page-header__brand vertical-center">
        Der Marktführer:<br />
        Die Nr. 1 rund um Immobilien
      </span>
    </div>
  </header>
  <nav class="topnavigation">
    <div class="content-wrapper">
      <a href="#" class="topnavigation__slide-in-trigger--right"><span class="block">Mein Konto</span></a>
      <ul class="topnavigation__level--1 topnavigation__hover-tabs topnavigation__hover-tabs--small-layers topnavigation__hover-tabs--delayed topnavigation__slide-in--right topnavigation__slide-in--show-level-2 topnavigation__sso-login sso-login">
        <li>
          <a href="#">
            <div class="topnavigation__sso-login__user-avatar"><!-- insert user image here --></div>
          </a>
          <a class="topnavigation__level--1__label topnavigation__hover-tabs__label topnavigation__hover-tabs__label--reduced inline-block" href="#">
            <span class="topnavigation__sso-login__welcome-message topnavigation__hover-tabs__label--reduced__hide font-ellipsis">
              <span class="sso-login__user-name"><!-- insert user name here --></span>
            </span>
            <span class="block">
              <span class="topnavigation__hover-tabs__label--reduced__hide">Mein Konto</span>
              <span class="topnavigation__sso-login__tab-decorator"></span>
            </span>
          </a>
          <div class="topnavigation__level--2 topnavigation__hover-layer topnavigation__hover-layer--right-aligned">
            <div class="topnavigation__hover-layer__navigation-wrapper">
              <ul class="topnavigation__sso-login__link-list icon-arrow list-spacing">
                <li class="border-bottom border-lightblue padding-bottom">
                  <a href="#" id="link_loginStartLink">Mein Bereich</a>
                </li>
              </ul>
              <ul class="topnavigation__sso-login__link-list icon-arrow list-spacing padding-top-none">
                <li>
                  <a href="#">Merkzettel</a>
                </li>
                <li>
                  <a href="#">Gespeicherte Suchen</a>
                </li>
                <li>
                  <a href="#">Suchanzeige</a>
                </li>
                <li>
                  <a href="#">EigentümerPlus</a>
                </li>
                <li class="border-bottom border-lightblue padding-bottom">
                  <a href="#">Persönliches Profil</a>
                </li>
              </ul>
              <ul class="topnavigation__sso-login__link-list--logged-out icon-arrow list-spacing padding-top-none">
                <li>
                  <a href="#" id="link_loginLinkInternal">Anmelden</a>
                </li>
                <li>
                  <a href="#" id="link_registerLinkInternal">Neu registrieren</a>
                </li>
              </ul>
              <ul class="topnavigation__sso-login__link-list--logged-in icon-arrow list-spacing padding-top-none">
                <li>
                  <a href="#" id="link_logoutLinkInternal">Abmelden</a>
                </li>
              </ul>
            </div>
          </div>
        </li>
      </ul><!-- .topnavigation__hover-tabs -->
      <a href="#" class="topnavigation__slide-in-trigger--left"><span class="fa fa-bars"></span></a>
      <ul class="topnavigation__level--1 topnavigation__hover-tabs topnavigation__hover-tabs--large-layers topnavigation__hover-tabs--self-aligned topnavigation__hover-tabs--delayed topnavigation__slide-in--left topnavigation__slide-in--show-level-1">
        <li class="active">
          <span class="topnavigation__level--1__label topnavigation__hover-tabs__label">Wohnen</span>
          <div class="topnavigation__level--2 topnavigation__hover-layer">
            <div class="equal-height one-whole">
              <div class="topnavigation__hover-layer__navigation-wrapper equal-height__column three-fourths">
                <div class="grid gutter-horizontal-xl gutter-vertical-m">
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Mieten</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Mietwohnungen</a>
                      </li>
                      <li>
                        <a href="#">Häuser mieten</a>
                      </li>
                      <li>
                        <a href="#">Wohnen auf Zeit</a>
                      </li>
                      <li>
                        <a href="#">WGs</a>
                      </li>
                      <li>
                        <a href="#">Seniorenwohnen</a>
                      </li>
                      <li>
                        <a href="#">Grundstücke pachten</a>
                      </li>
                      <li>
                        <a href="#">Garagen/Stellplätze</a>
                      </li>
                    </ul>
                  </div>
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Kaufen</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Eigentumswohnungen</a>
                      </li>
                      <li>
                        <a href="#">Häuser kaufen</a>
                      </li>
                      <li>
                        <a href="#">Grundstück kaufen</a>
                      </li>
                      <li>
                        <a href="#">Anlageobjekte</a>
                      </li>
                      <li>
                        <a href="#">Neubauimmobilien</a>
                      </li>
                      <li>
                        <a href="#">Zwangsversteigerungen</a>
                      </li>
                      <li>
                        <a href="#">Auslandsimmobilien</a>
                      </li>
                    </ul>
                  </div>
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Bauen</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Fertig- & Massivhaussuche</a>
                      </li>
                      <li>
                        <a href="#">Fertig- & Massivhaus Anbieter</a>
                      </li>
                      <li>
                        <a href="#">Hausbau Kataloge</a>
                      </li>
                      <li>
                        <a href="#">Traumhaussuche</a>
                      </li>
                      <li>
                        <a href="#">Baugebiete</a>
                      </li>
                    </ul>
                  </div>
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Suchanzeigen</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Suchanzeige aufgeben</a>
                      </li>
                      <li>
                        <a href="#">In Suchanzeigen stöbern</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="topnavigation__hover-layer__teaser-wrapper equal-height__column one-fourth">
                <div class="topnavigation__hover-layer__teaser">
                  <div class="padding-vertical-l padding-left-s padding-right-xl">
                    <h3 class="font-brandorange">NEU: Mehr Angebote mit der Suchanzeige!</h3>
                    <p class="margin-bottom-xl margin-top-s font-line-l">
                      Unser Geheimtipp – mit einer Suchanzeige finden Sie auch Immobilien, die noch nicht auf ImmobilienScout24 veröffentlicht wurden.
                    </p>
                    <a class="button-primary padding-horizontal-s" href="#">Suchanzeige aufgeben</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <a class="topnavigation__level--1__label topnavigation__hover-tabs__label" href="#">Anbieten</a>
          <div class="topnavigation__level--2 topnavigation__hover-layer">
            <div class="equal-height one-whole">
              <div class="topnavigation__hover-layer__navigation-wrapper equal-height__column three-fourths">
                <div class="grid gutter-horizontal-xl gutter-vertical-m">
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Als privater Anbieter</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Anzeigen schalten</a>
                      </li>
                      <li>
                        <a href="#">Anbieten Tipps</a>
                      </li>
                      <li>
                        <a href="#">Ratgeber</a>
                      </li>
                      <li>
                        <a href="#">Erfolgreicher inserieren</a>
                      </li>
                      <li>
                        <a href="#">Hilfe & Beratung</a>
                      </li>
                    </ul>
                  </div>
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Als gewerblicher Anbieter</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Anzeigen schalten</a>
                      </li>
                      <li>
                        <a href="#">Profi-Werkzeuge</a>
                      </li>
                      <li>
                        <a href="#">Erfolgstipps & Hilfe</a>
                      </li>
                      <li>
                        <a href="#">VIA-Produkte</a>
                      </li>
                      <li>
                        <a href="#">Gewerbethemen</a>
                      </li>
                    </ul>
                  </div>
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Vermieten</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Nachmieter suchen</a>
                      </li>
                      <li>
                        <a href="#">MietpreisCheck</a>
                      </li>
                      <li>
                        <a href="#">SCHUFA-BonitätsCheck</a>
                      </li>
                      <li>
                        <a href="#">Mietverträge</a>
                      </li>
                      <li>
                        <a href="#">Wohnung inserieren</a>
                      </li>
                    </ul>
                  </div>
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Verkaufen</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Immobilienbewertung</a>
                      </li>
                      <li>
                        <a href="#">Energieausweis</a>
                      </li>
                      <li>
                        <a href="#">Grundbuchauszug</a>
                      </li>
                      <li>
                        <a href="#">Haus verkaufen</a>
                      </li>
                    </ul>
                  </div>
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Makler finden</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Branchenbuch</a>
                      </li>
                      <li>
                        <a href="#">Maklerprovision</a>
                      </li>
                      <li>
                        <a href="#">Maklersoftware</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="topnavigation__hover-layer__teaser-wrapper equal-height__column one-fourth">
                <div class="topnavigation__hover-layer__teaser">
                  <div class="padding-vertical-l padding-left-s padding-right-xl">
                    <h3 class="font-brandorange">Jetzt Anzeige schalten</h3>
                    <p class="margin-bottom-xl margin-top-s font-line-l">
                      Schalten Sie einfach in nur 5 Minuten eine Anzeige bei uns und vermieten/verkaufen Sie schnell und zuverlässig.
                    </p>
                    <a class="button-primary padding-horizontal-s" href="#">Jetzt anmelden & starten</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <a class="topnavigation__level--1__label topnavigation__hover-tabs__label" href="#">Gewerbe</a>
          <div class="topnavigation__level--2 topnavigation__hover-layer">
            <div class="equal-height one-whole">
              <div class="topnavigation__hover-layer__navigation-wrapper equal-height__column three-fourths">
                <div class="grid gutter-horizontal-xl gutter-vertical-m">
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Büro</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Büroflächen suchen</a>
                      </li>
                      <li>
                        <a href="#">Büroflächenrechner</a>
                      </li>
                      <li>
                        <a href="#">Büro auf Zeit</a>
                      </li>
                      <li>
                        <a href="#">Büromakler</a>
                      </li>
                      <li>
                        <a href="#">Büroinvestment</a>
                      </li>
                    </ul>
                  </div>
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Einzelhandel</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Einzelhandelsflächen suchen</a>
                      </li>
                      <li>
                        <a href="#">Einzelhandelsmakler</a>
                      </li>
                      <li>
                        <a href="#">Lage und Standort</a>
                      </li>
                      <li>
                        <a href="#">Einzelhandel für Einsteiger</a>
                      </li>
                      <li>
                        <a href="#">Einzelhandelsinvestment</a>
                      </li>
                    </ul>
                  </div>
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Hallenflächen</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Hallenflächen suchen</a>
                      </li>
                      <li>
                        <a href="#">Standortkriterien</a>
                      </li>
                      <li>
                        <a href="#">Halleneinrichtung</a>
                      </li>
                      <li>
                        <a href="#">Hallenmakler</a>
                      </li>
                      <li>
                        <a href="#">Halleninvestment</a>
                      </li>
                    </ul>
                  </div>
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Gastronomie</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Gastronomieflächen suchen</a>
                      </li>
                      <li>
                        <a href="#">Gastronomiebedarf</a>
                      </li>
                      <li>
                        <a href="#">Gastronomie für Einsteiger</a>
                      </li>
                      <li>
                        <a href="#">Rechtsthemen Gastronomie</a>
                      </li>
                      <li>
                        <a href="#">Gastronomieinvestment</a>
                      </li>
                    </ul>
                  </div>
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Gewerbewissen</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Gewerbe Trends</a>
                      </li>
                      <li>
                        <a href="#">Gewerberecht</a>
                      </li>
                      <li>
                        <a href="#">Existenzgründung</a>
                      </li>
                      <li>
                        <a href="#">Lexikon Gewerbe</a>
                      </li>
                      <li>
                        <a href="#">Marktberichte </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="topnavigation__hover-layer__teaser-wrapper equal-height__column one-fourth">
                <div class="topnavigation__hover-layer__teaser">
                  <div class="padding-vertical-l padding-left-s padding-right-xl">
                    <h3 class="font-brandorange">Sie suchen eine Gewerbefläche?</h3>
                    <p class="margin-bottom-xl margin-top-s font-line-l">
                      Lassen Sie sich helfen – ImmobilienScout24 hat den passenden Berater!
                    </p>
                    <a class="button-primary padding-horizontal-s" href="#">Jetzt finden</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <a class="topnavigation__level--1__label topnavigation__hover-tabs__label" href="#">Markt & Preise</a>
          <div class="topnavigation__level--2 topnavigation__hover-layer">
            <div class="equal-height one-whole">
              <div class="topnavigation__hover-layer__navigation-wrapper equal-height__column three-fourths">
                <div class="grid gutter-horizontal-xl gutter-vertical-m">
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Immobilienpreise</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">für Immobilienkäufer</a>
                      </li>
                      <li>
                        <a href="#">für Eigentümer und Verkäufer</a>
                      </li>
                      <li>
                        <a href="#">für Makler</a>
                      </li>
                      <li>
                        <a href="#">Regionale Immobilienpreise</a>
                      </li>
                      <li>
                        <a href="#">Preisentwicklung IMX</a>
                      </li>
                    </ul>
                  </div>
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Produktübersicht</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Immobilienbewertung online</a>
                      </li>
                      <li>
                        <a href="#">Mietpreisrechner</a>
                      </li>
                      <li>
                        <a href="#">MarktNavigator</a>
                      </li>
                    </ul>
                  </div>
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Ratgeber</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Checklisten</a>
                      </li>
                      <li>
                        <a href="#">Immobilienverkauf</a>
                      </li>
                      <li>
                        <a href="#">Immobilienkauf</a>
                      </li>
                      <li>
                        <a href="#">Immobilienerbe</a>
                      </li>
                    </ul>
                  </div>
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Wertermittlungsverfahren</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Ertragswertverfahren</a>
                      </li>
                      <li>
                        <a href="#">Sachwertverfahren</a>
                      </li>
                      <li>
                        <a href="#">Vergleichswertverfahren</a>
                      </li>
                    </ul>
                  </div>
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Lexikon</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Erbschaftssteuer</a>
                      </li>
                      <li>
                        <a href="#">Schenkungssteuer</a>
                      </li>
                      <li>
                        <a href="#">Bodenrichtwert</a>
                      </li>
                      <li>
                        <a href="#">Wohnflächenberechnung</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="topnavigation__hover-layer__teaser-wrapper equal-height__column one-fourth">
                <div class="topnavigation__hover-layer__teaser">
                  <div class="padding-vertical-l padding-left-s padding-right-xl">
                    <h3 class="font-brandorange">Immobilienbewertung</h3>
                    <p class="margin-bottom-xl margin-top-s font-line-l">
                      Ermitteln Sie einfach online den Marktwert von Immobilien und sparen Sie Zeit und Geld gegenüber teuren Gutachtern.
                    </p>
                    <a class="button-primary padding-horizontal-s" href="#">Jetzt Wert ermitteln</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <a class="topnavigation__level--1__label topnavigation__hover-tabs__label" href="#">Baufinanzierung</a>
          <div class="topnavigation__level--2 topnavigation__hover-layer">
            <div class="equal-height one-whole">
              <div class="topnavigation__hover-layer__navigation-wrapper equal-height__column three-fourths">
                <div class="grid gutter-horizontal-xl gutter-vertical-m">
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Zinsvergleich</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Hausfinanzierung ohne EK</a>
                      </li>
                      <li>
                        <a href="#">Anschlussfinanzierung</a>
                      </li>
                      <li>
                        <a href="#">Aktueller Zinskommentar</a>
                      </li>
                      <li>
                        <a href="#">Hypothekenzinsen</a>
                      </li>
                      <li>
                        <a href="#">Das kleine Zins-Einmaleins</a>
                      </li>
                    </ul>
                  </div>
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Rechner</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Finanzierungsrechner</a>
                      </li>
                      <li>
                        <a href="#">Tilgungsrechner</a>
                      </li>
                      <li>
                        <a href="#">Darlehensrechner</a>
                      </li>
                      <li>
                        <a href="#">So viel Haus kann ich mir leisten</a>
                      </li>
                    </ul>
                  </div>
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Checklisten</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Wohnungskaufvertrag</a>
                      </li>
                      <li>
                        <a href="#">Darlehensvertrag</a>
                      </li>
                      <li>
                        <a href="#">Fragen & Antworten</a>
                      </li>
                      <li>
                        <a href="#">Mieten oder kaufen?</a>
                      </li>
                    </ul>
                  </div>
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Kauf vorbereiten</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Darlehensarten</a>
                      </li>
                      <li>
                        <a href="#">Kosten & Nebenkosten</a>
                      </li>
                      <li>
                        <a href="#">KfW-Förderung</a>
                      </li>
                      <li>
                        <a href="#">Bankgespräch</a>
                      </li>
                      <li>
                        <a href="#">Notargebühren</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="topnavigation__hover-layer__teaser-wrapper equal-height__column one-fourth">
                <div class="topnavigation__hover-layer__teaser">
                  <div class="padding-vertical-l padding-left-s padding-right-xl">
                    <h3 class="font-brandorange">Der Finanzierungsrechner für Ihren Baukredit</h3>
                    <p class="margin-bottom-xl margin-top-s font-line-l">
                      Berechnen Sie, was Ihr Finanzierungsvorhaben monatlich kostet.
                    </p>
                    <a class="button-primary padding-horizontal-s" href="#">Jetzt berechnen</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <a class="topnavigation__level--1__label topnavigation__hover-tabs__label" href="#">Umzug</a>
          <div class="topnavigation__level--2 topnavigation__hover-layer">
            <div class="equal-height one-whole">
              <div class="topnavigation__hover-layer__navigation-wrapper equal-height__column three-fourths">
                <div class="grid gutter-horizontal-xl gutter-vertical-m">
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Umzug leicht gemacht</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Umzugsunternehmen vergleichen</a>
                      </li>
                      <li>
                        <a href="#">Transporter mieten</a>
                      </li>
                      <li>
                        <a href="#" target="_blank" rel="nofollow">Umzugskartons bestellen</a>
                      </li>
                      <li>
                        <a href="#">Ummelden</a>
                      </li>
                    </ul>
                  </div>
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Umziehen in Eigenregie</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Umzugshelfer organisieren</a>
                      </li>
                      <li>
                        <a href="#">Halteverbotsschild bestellen</a>
                      </li>
                      <li>
                        <a href="#">Privatvermittlung von Fahrzeugen</a>
                      </li>
                      <li>
                        <a href="#">Möbel einlagern</a>
                      </li>
                      <li>
                        <a href="#">Sperrmüll beseitigen</a>
                      </li>
                    </ul>
                  </div>
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Umzugsplanung</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Umzugscheckliste</a>
                      </li>
                      <li>
                        <a href="#">SCHUFA-BonitätsCheck</a>
                      </li>
                      <li>
                        <a href="#">Telefon und Internet</a>
                      </li>
                      <li>
                        <a href="#">Stromanbieter</a>
                      </li>
                      <li>
                        <a href="#">Umzugskosten berechnen</a>
                      </li>
                    </ul>
                  </div>
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Vorlagen & Muster</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Kündigung der Wohnung</a>
                      </li>
                      <li>
                        <a href="#">Wohnungsübergabeprotokoll</a>
                      </li>
                      <li>
                        <a href="#">Mietminderung</a>
                      </li>
                      <li>
                        <a href="#">Untermietvertrag</a>
                      </li>
                      <li>
                        <a href="#">Fragen & Antworten</a>
                      </li>
                    </ul>
                  </div>
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Einrichten & Renovieren</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Wohntyptest</a>
                      </li>
                      <li>
                        <a href="#">Heimwerkertipps</a>
                      </li>
                      <li>
                        <a href="#">Malern</a>
                      </li>
                      <li>
                        <a href="#">Tapezieren</a>
                      </li>
                      <li>
                        <a href="#">Ratgeber</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="topnavigation__hover-layer__teaser-wrapper equal-height__column one-fourth">
                <div class="topnavigation__hover-layer__teaser">
                  <div class="padding-vertical-l padding-left-s padding-right-xl">
                    <h3 class="font-brandorange">Ein kompletter Umzug ist günstiger, als Sie denken</h3>
                    <img class="margin-top-s margin-bottom-m shadow" style="max-width: 100%;" src="../img/topnavigation/layer-teasers/umzug-notizzettel.png" alt="Umzug" />
                    <a class="button-primary padding-horizontal-s" href="#">Jetzt informieren</a>
                    <p class="margin-top font-light font-s">* Die Rechnung beruht auf Durchschnittswerten und kann regionalen Schwankungen unterliegen.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li>
          <a class="topnavigation__level--1__label topnavigation__hover-tabs__label" href="#">Eigentümer</a>
          <div class="topnavigation__level--2 topnavigation__hover-layer">
            <div class="equal-height one-whole">
              <div class="topnavigation__hover-layer__navigation-wrapper equal-height__column three-fourths">
                <div class="grid gutter-horizontal-xl gutter-vertical-m">
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Eigentümer werden</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Lage- und Preisinformation</a>
                      </li>
                      <li>
                        <a href="#">Erbschaft: plötzlich Eigentümer</a>
                      </li>
                      <li>
                        <a href="#">Immobile als Kapitalanlage</a>
                      </li>
                      <li>
                        <a href="#">Was kann ich mir leisten?</a>
                      </li>
                      <li>
                        <a href="#">Fördermöglichkeiten</a>
                      </li>
                    </ul>
                  </div>
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Vermietung & Verkauf</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Anzeige aufgeben</a>
                      </li>
                      <li>
                        <a href="#">Erfolgreich vermarkten</a>
                      </li>
                      <li>
                        <a href="#">Miethöhe prüfen</a>
                      </li>
                      <li>
                        <a href="#">Immobilienwert ermitteln</a>
                      </li>
                      <li>
                        <a href="#">Makler finden</a>
                      </li>
                    </ul>
                  </div>
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Recht & Versicherung</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Gesetzesänderungen & Urteile</a>
                      </li>
                      <li>
                        <a href="#">Musterverträge</a>
                      </li>
                      <li>
                        <a href="#">Rechtsberatung</a>
                      </li>
                      <li>
                        <a href="#">Versicherungen</a>
                      </li>
                      <li>
                        <a href="#">Schäden & Reparaturen</a>
                      </li>
                    </ul>
                  </div>
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Energie sparen</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">Energieausweis bestellen</a>
                      </li>
                      <li>
                        <a href="#">Modernisieren & Sanieren</a>
                      </li>
                      <li>
                        <a href="#">ModernisierungsCheck</a>
                      </li>
                      <li>
                        <a href="#">HeizungsCheck</a>
                      </li>
                      <li>
                        <a href="#">FördermittelCheck</a>
                      </li>
                    </ul>
                  </div>
                  <div class="grid-item topnavigation__hover-layer__link-block topnavigation__level--3">
                    <h3><a href="#">Meine Immobilienverwaltung</a></h3>
                    <ul class="list-spacing-xs icon-arrow">
                      <li>
                        <a href="#">EigentümerPlus</a>
                      </li>
                      <li>
                        <a href="#">Marktwerteinschätzung</a>
                      </li>
                      <li>
                        <a href="#">Immobiliencheck</a>
                      </li>
                      <li>
                        <a href="#">Grundbuchauszug online</a>
                      </li>
                      <li>
                        <a href="#">HausgeldCheck</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="topnavigation__hover-layer__teaser-wrapper equal-height__column one-fourth">
                <div class="topnavigation__hover-layer__teaser">
                  <div class="padding-vertical-l padding-left-s padding-right-xl">
                    <h3 class="font-brandorange">Auf der sicheren Seite!</h3>
                    <p class="margin-bottom-xl margin-top-s font-line-l">
                      Mit unseren rechtssicheren Musterverträgen, der kostenfreien Marktwerteinschätzung uvm. können Sie sich entspannt zurücklehnen.
                    </p>
                    <a class="button-primary padding-horizontal-s" href="#">Jetzt testen</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul><!-- .topnavigation__hover-tabs -->
    </div><!-- .content-wrapper -->
  </nav><!-- .topnavigation -->
  <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function () {
      if (window.IS24 && IS24.core && IS24.core.extensions && IS24.core.extensions.topnavigation) {
        IS24.core.extensions.topnavigation.init();
      }
    });
  </script>
  <div class="corporate-powered-by">
      <div class="content-wrapper align-right">
          <a rel="nofollow" target="_blank" href="#">
              <img src="../../img/vendor/powered-by-telekom.svg"
                   alt="Powered by Telekom" class="corporate-powered-by__logo"
                   onerror="this.src='../../img/vendor/powered-by-telekom.png';this.onerror=null;" />
          </a>
      </div>
  </div>
</div>
Der Marktführer:
Die Nr. 1 rund um Immobilien

CSS and JS Dependencies

The Top Navigation relies on the Core Framework in an arbitrary version, as well as the additional top navigation CSS and JS included in this package.

Note: If you are using the central CMS header, you won't need to include the core-topnavigation resources as they are already delivered as part of the header snippet.

Top Navigation CSS and JS inclusion
<link rel="stylesheet" href="//www.static-immobilienscout24.de/fro/core-topnavigation/0.5.3/css/core-topnavigation.min.css" />
<script src="//www.static-immobilienscout24.de/fro/core-topnavigation/0.5.3/js/core-topnavigation.min.js"></script>

Page Frame

The page wrapper needs the additional topnavigation-slide-in-container class, which handles all styling for the slide-in part of the top navigation.

Page structure for top navigation
<body>
  <div class="viewport">
    <div class="page-wrapper topnavigation-slide-in-container">
      <!-- header goes here -->
    </div>
  </div>
</body>

Brand Header

The white section of the top navigation, which includes the brand logo and claim, is a variation of the Core Framework's standard white header. It introduces the page-header--white--composite class, along with a few minor markup changes.

Top navigation brand header
<header class="page-header--white page-header--white--composite">
    <div class="content-wrapper vertical-center-container">
        <a href="index.html" title="ImmobilienScout24" class="page-header__logo vertical-center">
            <img src="../../img/logo/immobilienscout24.svg" alt="ImmobilienScout24" />
        </a><span class="page-header__brand vertical-center">
            Der Marktführer:<br />
            Die Nr. 1 rund um Immobilien
        </span>
    </div>
</header>

Account Tab

The account tab layout differs from ordinary tabs. Depending on configuration and log-in status, it may show a user image and a user name.

Account Tab Structure

The account tab contains a number of additional DOM elements.

  1. A user image (topnavigation__sso-login__user-avatar)
  2. A welcome message to the logged-in user (topnavigation__sso-login__welcome-message)
  3. A tab decorator icon (topnavigation__sso-login__tab-decorator)

Also, the classes sso-login and sso-login__user-name serve as handles for the log-in script.

An account tab (Top navigation wrapper left out for the sake of simplicity.)
<ul class="topnavigation__hover-tabs topnavigation__hover-tabs--small-layers topnavigation__sso-login sso-login">
    <li>
        <a href="#">
            <div class="topnavigation__sso-login__user-avatar"><!-- insert user image here --></div>
        </a>
        <a class="topnavigation__hover-tabs__label inline-block" href="#">
            <span class="topnavigation__sso-login__welcome-message topnavigation__hover-tabs__label--reduced__hide font-ellipsis">
                <span class="sso-login__user-name"><!-- insert user name here --></span>
            </span>
            <span class="block">
                <span class="topnavigation__hover-tabs__label--reduced__hide">Mein Konto</span>
                <span class="topnavigation__sso-login__tab-decorator"></span>
            </span>
        </a>
        <div class="topnavigation__level--2 topnavigation__hover-layer topnavigation__hover-layer--right-aligned">
        </div>
    </li>
</ul>

Reduced Account Tab

The account tab may be stripped of its label and the user name to save space. To do so, apply the class topnavigation__hover-tabs__label--reduced to the label.

A reduced account tab (Wrapping elements omitted for the sake of simplicity.)
<a class="topnavigation__hover-tabs__label topnavigation__hover-tabs__label--reduced inline-block" href="#">
    <span class="topnavigation__sso-login__welcome-message topnavigation__hover-tabs__label--reduced__hide font-ellipsis">
        <span class="sso-login__user-name"><!-- insert user name here --></span>
    </span>
    <span class="block">
        <span class="topnavigation__hover-tabs__label--reduced__hide">Mein Konto</span>
        <span class="topnavigation__sso-login__tab-decorator"></span>
    </span>
</a>

Log-in Status

The account tab on the right is displayed differently depending on whether or not the user is logged in. The view is toggled with the sso-login--logged-in class on the surrounding list element.

Similarly, the sso-login--show-avatar class determines whether to show or hide the user avatar or placeholder image.

Login panel in logged-in and logged-out state (Top navigation wrapper left out for the sake of simplicity.)
<ul class="topnavigation__hover-tabs topnavigation__sso-login sso-login">
  <li>
    <a href="#">
      <div class="topnavigation__sso-login__user-avatar">
        <img alt="Placeholder" src="../img/topnavigation/log-in/avatar_placeholder_74x74.png" />
      </div>
    </a>
    <a class="topnavigation__level--1__label topnavigation__hover-tabs__label inline-block" href="#">
      <span class="topnavigation__sso-login__welcome-message font-ellipsis">
        <span class="sso-login__user-name"></span>
      </span>
      <span class="block">
        <span class="topnavigation__hover-tabs__label--reduced__hide">Mein Konto</span>
        <span class="topnavigation__sso-login__tab-decorator"></span>
      </span>
    </a>
  </li>
</ul>
<ul class="topnavigation__hover-tabs topnavigation__sso-login sso-login sso-login--show-avatar">
  <li>
    <a href="#">
      <div class="topnavigation__sso-login__user-avatar">
        <img alt="Placeholder" src="../img/topnavigation/log-in/avatar_placeholder_74x74.png" />
      </div>
    </a>
    <a class="topnavigation__level--1__label topnavigation__hover-tabs__label inline-block" href="#">
      <span class="topnavigation__sso-login__welcome-message font-ellipsis">
        <span class="sso-login__user-name"></span>
      </span>
      <span class="block">
        <span class="topnavigation__hover-tabs__label--reduced__hide">Mein Konto</span>
        <span class="topnavigation__sso-login__tab-decorator"></span>
      </span>
    </a>
  </li>
</ul>
<ul class="topnavigation__hover-tabs topnavigation__sso-login sso-login sso-login--show-avatar sso-login--logged-in">
  <li>
    <a href="#">
      <div class="topnavigation__sso-login__user-avatar">
        <img alt="Herzog Frosch von Unkenberg" src="../img/topnavigation/log-in/frog_80x80.jpg" />
      </div>
    </a>
    <a class="topnavigation__level--1__label topnavigation__hover-tabs__label inline-block" href="#">
      <span class="topnavigation__sso-login__welcome-message font-ellipsis">
        <span class="sso-login__user-name">Herzog Frosch von Unkenberg</span>
      </span>
      <span class="block">
        <span class="topnavigation__hover-tabs__label--reduced__hide">Mein Konto</span>
        <span class="topnavigation__sso-login__tab-decorator"></span>
      </span>
    </a>
  </li>
</ul>

JavaScript

To initialize the top navigation logic (including the slide-in behavior and support for touch interfaces), call IS24.core.extensions.topnavigation.init.

Note: If you use the CMS header snippet, this is already taken care of.

if (window.IS24 && IS24.core && IS24.core.extensions && IS24.core.extensions.topnavigation) {
  IS24.core.extensions.topnavigation.init();
}