Core Framework – Top Navigation v1.0.0 – 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. Brand Header
  4. Navigation Frame
  5. Navigation Levels
    1. Tab Navigation
      1. Active Tabs
      2. Layer Sizes
      3. Layer Alignment
      4. Self-aligned Layers
  6. Account Tab
    1. Account Tab Structure
    2. Reduced Account Tab
    3. Login Status
  7. JavaScript
  8. “Powered by” Logo

Complete Sample Markup

Complete example of a top navigation
<div class="corporate-powered-by-container">
  <header class="page-header page-header--white page-header--white--composite" role="banner">
    <div class="content-wrapper vertical-center-container">
      <a href="index.html" title="ImmobilienScout24" aria-label="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 " role="navigation">
    <div class="content-wrapper">
      <a href="#" class="topnavigation__overlay-trigger--account">
        <span class="topnavigation__sso-login__label-text-wrapper">
          <span class="sso-login__user-name font-ellipsis">&nbsp;</span>
          <span class="block">Mein Konto</span>
        </span>
      </a>
      <div class="topnavigation__overlay--account">
        <ul class="topnavigation__level--1 topnavigation__hover-tabs topnavigation__hover-tabs--small-layers topnavigation__slide-in--show-level-2 topnavigation__sso-login sso-login">
          <li>
            <a href="#" class="topnavigation__level--1__label topnavigation__hover-tabs__label topnavigation__hover-tabs__label--reduced">
              <div class="topnavigation__sso-login__user-avatar" data-cms-qa="is24-login-avatar">
                <!-- user image goes here -->
              </div><!-- this comment is here to eat up the white space between two inline-block elements
              --><span class="topnavigation__sso-login__label-text-wrapper">
                <span class="topnavigation__sso-login__welcome-message topnavigation__hover-tabs__label--reduced__hide font-ellipsis">
                  <span class="sso-login__user-name">
                    <span class="sso-login__user-name"><!-- user name goes here --></span>
                  </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>
              </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>
                    <a href="#">Mein Bereich</a>
                  </li>
                </ul>
                <ul class="topnavigation__sso-login__link-list icon-arrow list-spacing padding-top-none">
                  <li class="border-top padding-top">
                    <a href="#">Merkzettel</a>
                  </li>
                  <li>
                    <a href="#">Gespeicherte Suchen</a>
                  </li>
                  <li>
                    <a href="#">Profil</a>
                  </li>
                  <li>
                    <a href="#">Immobilienanzeigen</a>
                  </li>
                  <li>
                    <a href="#">EigentümerPlus</a>
                  </li>
                </ul>
                <ul class="topnavigation__sso-login__link-list--logged-out icon-arrow list-spacing padding-top-none">
                  <li class="border-top padding-top">
                    <a href="#">Anmelden</a>
                  </li>
                  <li>
                    <a href="#">Neu registrieren</a>
                  </li>
                </ul>
                <ul class="topnavigation__sso-login__link-list--logged-in topnavigation__overlay--account__hide icon-arrow list-spacing padding-top-none">
                  <li class="border-top padding-top">
                    <a href="#">Abmelden</a>
                  </li>
                </ul>
                <ul class="topnavigation__sso-login--logged-out topnavigation__overlay--account__show icon-arrow list-spacing padding-top-none">
                  <li>
                    <a href="#">Anmelden</a>
                  </li>
                </ul>
                <ul class="topnavigation__sso-login--logged-in topnavigation__overlay--account__show icon-arrow list-spacing padding-top-none">
                  <li>
                    <a href="#">Abmelden</a>
                  </li>
                </ul>
              </div>
            </div>
          </li>
        </ul><!-- .topnavigation__sso-login -->
      </div>
      <a href="#" class="topnavigation__overlay-trigger--menu" aria-label="Navigation anzeigen/verstecken">
        <div class="burger"></div>
      </a>
      <div class="topnavigation__overlay--menu">
        <img class="topnavigation__overlay--menu__logo" alt="ImmobilienScout24" src="../../img/logo/immobilienscout24.svg"
             onerror="this.src='../../img/logo/immobilienscout24.png';this.onerror=null;" />
        <div class="topnavigation__overlay--menu__close"></div>
        <ul class="topnavigation__level--1 topnavigation__hover-tabs topnavigation__hover-tabs--small-layers topnavigation__hover-tabs--self-aligned">
          <li>
            <span class="topnavigation__level--1__label topnavigation__hover-tabs__label">Wohnen</span>
            <div class="topnavigation__level--2 topnavigation__hover-layer">
              <div class="topnavigation__hover-layer__navigation-wrapper">
                <div class="topnavigation__level--3 topnavigation__hover-layer__link-block">
                  <ul class="list-spacing icon-arrow">
                    <li><a href="#">Mietwohnungen</a></li>
                    <li><a href="#">Eigentumswohnungen</a></li>
                    <li><a href="#">Häuser mieten</a></li>
                    <li><a href="#">Häuser kaufen</a></li>
                    <li><a href="#">SCHUFA Bonitätscheck</a></li>
                    <li><a href="#">Veröffentlichte Profile</a></li>
                    <li><a href="#">Smart Home</a></li>
                    <li><a href="#">Hilfe zur Wohnungssuche</a></li>
                    <li><a href="#">Bundesländer entdecken</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </li>
          <li>
            <span class="topnavigation__level--1__label topnavigation__hover-tabs__label">Anbieten</span>
            <div class="topnavigation__level--2 topnavigation__hover-layer">
              <div class="topnavigation__hover-layer__navigation-wrapper">
                <div class="topnavigation__level--3 topnavigation__hover-layer__link-block">
                  <ul class="list-spacing icon-arrow">
                    <li><a href="#">Anzeige aufgeben</a></li>
                    <li><a href="#">Nachmieter suchen</a></li>
                    <li><a href="#">Makler finden</a></li>
                    <li><a href="#">Für gewerbliche Anbieter</a></li>
                    <li><a href="#">Tipps für die Vermietung</a></li>
                    <li><a href="#">Tipps für den Verkauf</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </li>
          <li>
            <span class="topnavigation__level--1__label topnavigation__hover-tabs__label">Gewerbe</span>
            <div class="topnavigation__level--2 topnavigation__hover-layer">
              <div class="topnavigation__hover-layer__navigation-wrapper">
                <div class="topnavigation__level--3 topnavigation__hover-layer__link-block">
                  <ul class="list-spacing icon-arrow">
                    <li><a href="#">Gewerbeimmobilien suchen</a></li>
                    <li><a href="#">Büro &amp; Praxis</a></li>
                    <li><a href="#">Einzelhandel</a></li>
                    <li><a href="#">Hallenflächen</a></li>
                    <li><a href="#">Gastronomieflächen</a></li>
                    <li><a href="#">Maklersuche</a></li>
                    <li><a href="#">Ratgeber</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </li>
          <li>
            <span class="topnavigation__level--1__label topnavigation__hover-tabs__label">Neubau</span>
            <div class="topnavigation__level--2 topnavigation__hover-layer">
              <div class="topnavigation__hover-layer__navigation-wrapper">
                <div class="topnavigation__level--3 topnavigation__hover-layer__link-block">
                  <ul class="list-spacing icon-arrow">
                    <li><a href="#">Neubau kaufen</a></li>
                    <li><a href="#">Haus bauen</a></li>
                    <li><a href="#">Fertig- und Massivhausanbieter</a></li>
                    <li><a href="#">Häuser nach Preisen</a></li>
                    <li><a href="#">Neubau als Kapitalanlage</a></li>
                    <li><a href="#">Tipps für den Neubau-Kauf</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </li>
          <li>
            <span class="topnavigation__level--1__label topnavigation__hover-tabs__label">Markt &amp; Preise</span>
            <div class="topnavigation__level--2 topnavigation__hover-layer">
              <div class="topnavigation__hover-layer__navigation-wrapper">
                <div class="topnavigation__level--3 topnavigation__hover-layer__link-block">
                  <ul class="list-spacing icon-arrow">
                    <li><a href="#">Immobilienbewertung</a></li>
                    <li><a href="#">Immobilienwert berechnen</a></li>
                    <li><a href="#">Mietpreis prüfen</a></li>
                    <li><a href="#">Grundstück bewerten</a></li>
                    <li><a href="#">Sachverständigen beauftragen</a></li>
                    <li><a href="#">Mietspiegel in Deutschland</a></li>
                    <li><a href="#">Regionale Miet- und Kaufpreise</a></li>
                    <li><a href="#">Immobilienmarkt aktuell</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </li>
          <li>
            <span class="topnavigation__level--1__label topnavigation__hover-tabs__label">Baufinanzierung</span>
            <div class="topnavigation__level--2 topnavigation__hover-layer">
              <div class="topnavigation__hover-layer__navigation-wrapper">
                <div class="topnavigation__level--3 topnavigation__hover-layer__link-block">
                  <ul class="list-spacing icon-arrow">
                    <li><a href="#">Zinsvergleich</a></li>
                    <li><a href="#">Finanzierungsrechner</a></li>
                    <li><a href="#">Mieten oder Kaufen</a></li>
                    <li><a href="#">Anschlussfinanzierung</a></li>
                    <li><a href="#">Wie viel Haus kann ich mir leisten?</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </li>
          <li>
            <span class="topnavigation__level--1__label topnavigation__hover-tabs__label">Umzug</span>
            <div class="topnavigation__level--2 topnavigation__hover-layer">
              <div class="topnavigation__hover-layer__navigation-wrapper">
                <div class="topnavigation__level--3 topnavigation__hover-layer__link-block">
                  <ul class="list-spacing icon-arrow">
                    <li><a href="#">Umzugsunternehmen vergleichen</a></li>
                    <li><a href="#">Transporter mieten</a></li>
                    <li><a href="#">Umzugskosten berechnen</a></li>
                    <li><a href="#">Wohnung kündigen</a></li>
                    <li><a href="#">Vorlagen &amp; Downloads </a></li>
                    <li><a href="#">Umzug-Checkliste</a></li>
                    <li><a href="#">Umzug im Überblick</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </li>
          <li>
            <span class="topnavigation__level--1__label topnavigation__hover-tabs__label">Eigentümer</span>
            <div class="topnavigation__level--2 topnavigation__hover-layer">
              <div class="topnavigation__hover-layer__navigation-wrapper">
                <div class="topnavigation__level--3 topnavigation__hover-layer__link-block">
                  <ul class="list-spacing icon-arrow">
                    <li><a href="#">Aktuelles für Eigentümer</a></li>
                    <li><a href="#">Meine Immobilienverwaltung</a></li>
                    <li><a href="#">Energieausweis</a></li>
                    <li><a href="#">Mietverträge und Mustervorlagen</a></li>
                    <li><a href="#">Nebenkostenabrechnung</a></li>
                    <li><a href="#">SCHUFA-VermieterCheck</a></li>
                    <li><a href="#">Tipps &amp; Checklisten</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </li>
        </ul><!-- .topnavigation__level- -1 -->
      </div>
    </div>
  </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>

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/1.0.0/css/core-topnavigation.min.css" />
<script src="//www.static-immobilienscout24.de/fro/core-topnavigation/1.0.0/js/core-topnavigation.min.js"></script>

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 (Note that image URLs will differ in production.)
<header class="page-header page-header--white page-header--white--composite" role="banner">
  <div class="content-wrapper vertical-center-container">
    <a href="index.html" title="ImmobilienScout24" aria-label="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>

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.)
<div class="topnavigation__overlay--account">
    <ul class="topnavigation__hover-tabs topnavigation__hover-tabs--small-layers topnavigation__sso-login sso-login">
        <li>
            <a href="#" class="topnavigation__level--1__label topnavigation__hover-tabs__label topnavigation__hover-tabs__label--reduced">
              <div class="topnavigation__sso-login__user-avatar" data-cms-qa="is24-login-avatar">
                <!-- user image goes here -->
              </div><!-- this comment is here to eat up the white space between two inline-block elements
              --><span class="topnavigation__sso-login__label-text-wrapper">
                <span class="topnavigation__sso-login__welcome-message topnavigation__hover-tabs__label--reduced__hide font-ellipsis">
                  <span class="sso-login__user-name">
                    <span class="sso-login__user-name"><!-- user name goes here --></span>
                  </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>
              </span>
            </a>
            <div class="topnavigation__level--2 topnavigation__hover-layer topnavigation__hover-layer--right-aligned">
            </div>
        </li>
    </ul>
</div>

Reduced Account Tab

On small displays, 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 (Resize the browser window to see the reduced tab.) (Wrapping elements omitted for the sake of simplicity.)
<div class="topnavigation__overlay--account">
    <a href="#" class="topnavigation__level--1__label topnavigation__hover-tabs__label topnavigation__hover-tabs__label--reduced">
    <div class="topnavigation__sso-login__user-avatar">
      <!-- user image goes here -->
    </div><!-- this comment is here to eat up the white space between two inline-block elements
    --><span class="topnavigation__sso-login__label-text-wrapper">
      <span class="topnavigation__sso-login__welcome-message topnavigation__hover-tabs__label--reduced__hide font-ellipsis">
        <span class="sso-login__user-name"><!-- user name goes 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>
    </span>
  </a>
</div>

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="#" class="topnavigation__level--1__label topnavigation__hover-tabs__label topnavigation__hover-tabs__label--reduced">
          <div class="topnavigation__sso-login__user-avatar" data-cms-qa="is24-login-avatar">
            <!-- user image goes here -->
          </div><!-- this comment is here to eat up the white space between two inline-block elements
          --><span class="topnavigation__sso-login__label-text-wrapper">
            <span class="topnavigation__sso-login__welcome-message topnavigation__hover-tabs__label--reduced__hide font-ellipsis">
              <span class="sso-login__user-name">
                <span class="sso-login__user-name"><!-- user name goes here --></span>
              </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>
          </span>
        </a>
    </li>
</ul>
<ul class="topnavigation__hover-tabs topnavigation__sso-login sso-login sso-login--show-avatar">
    <li>
        <a href="#" class="topnavigation__level--1__label topnavigation__hover-tabs__label">
          <div class="topnavigation__sso-login__user-avatar">
            <img alt="Placeholder" src="../img/topnavigation/log-in/avatar_placeholder_74x74.png" />
          </div><!-- this comment is here to eat up the white space between two inline-block elements
          --><span class="topnavigation__sso-login__label-text-wrapper">
            <span class="topnavigation__sso-login__welcome-message topnavigation__hover-tabs__label--reduced__hide font-ellipsis">
              <span class="sso-login__user-name"><!-- user name goes 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>
          </span>
        </a>
    </li>
</ul>
<ul class="topnavigation__hover-tabs topnavigation__sso-login sso-login sso-login--show-avatar sso-login--logged-in">
    <li>
        <a class="topnavigation__level--1__label topnavigation__hover-tabs__label" href="#">
          <div class="topnavigation__sso-login__user-avatar">
            <img alt="Herzog Frosch von Unkenberg" src="../img/topnavigation/log-in/frog_80x80.jpg" />
          </div><!-- this comment is here to eat up the white space between two inline-block elements
          --><span class="topnavigation__sso-login__label-text-wrapper">
            <span class="topnavigation__sso-login__welcome-message topnavigation__hover-tabs__label--reduced__hide font-ellipsis">
              <span class="sso-login__user-name">
                <span class="sso-login__user-name">Herzog Frosch von Unkenberg</span>
              </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>
          </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();
}