## Deprecated

This feature is deprecated and will be removed in a future release. Please refer to the new individual Top Navigation module instead.

# Top Navigation

The global top navigation is the central navigation hub to all of ImmobilienScout24's content sections, as well as to the user's account area.

The navigation bar may stick to the top of the page when the user scrolls down. (We've placed one at the top of this page for your scrolling pleasure.)

On smaller devices, the tabs are replaced with a slide-in navigation, with content links sliding in from the left, and account links sliding in from the right.

1. Snippet Implementation
   1. Page Frame
2. Full Implementation
   1. Brand Header
   2. Navigation Frame
      1. Fixed Navigation
   3. Navigation Levels
      1. Tab Navigation
         1. Active Tabs
         2. Tabs with Delayed Hover Effect
   4. Slide-in Navigation
3. Log-in Status
4. JavaScript
5. Complete Example

The header configuration is centrally managed within the CMS, so if you wish to use the top navigation on your pages, you should include the necessary markup 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.)

## Snippet Implementation

The CMS snippet delivers the complete header markup, along with all the necessary script calls. You do need to make a couple of minor adjustments to the page frame to prepare it for the top navigation, however.

### Page Frame

The page wrapper needs a couple of additional classes to make the top navigation work.

Page structure for top navigation

    <body>
      <div class="page-wrapper top-navigation-slide-in-container corporate-powered-by-container">
        <!-- header goes here -->
      </div>
    </body>

The additional `top-navigation-slide-in-container` class handles all styling for the slide-in part of the top navigation.

The `corporate-powered-by-container` class is necessary to properly show and position the “Powered by Telekom” logo at the top of the header.

## Full Implementation

These are the in-depth implementation details for the individual top navigation components. If you are getting the header from the CMS, you may skip this section entirely.

### Brand Header

The white section of the top navigation including the brand logo and claim is a variation of the White Header, with the addition of a `page-header--white--composite` class, as well as 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>

### Navigation Frame

The top navigation is wrapped in a `top-navigation` container, which in turn contains a `content-wrapper` element to get the navigation items aligned with the left and right margins of any other content sections.

Page structure for top navigation

    <nav class="top-navigation">
        <div class="content-wrapper clearfix"></div>
    </nav>

#### Fixed Navigation

If you're using the fixed navigation, you will need a couple of additional elements to act as the point of reference for where the navigation should be fixed, and as positioning help for pages with skyscraper advertisement banners.

Page structure for fixed top navigation

    <div class="fix-to-top-wrapper fix-to-top-wrapper--top-navigation">
        <nav class="top-navigation fix-to-top">
            <div class="fix-to-top__skyscraper-spacer">
                <div class="content-wrapper clearfix"></div>
            </div>
        </nav>
    </div>

The `fix-to-top-wrapper` element acts as reference for the point at which the navigation needs to be fixed to the viewport.

The `fix-to-top` class on the top navigation element serves as a handle for the JavaScript which toggles the positioning mode when the page is scrolled.

The `fix-to-top__skyscraper-spacer` element is necessary to keep the fixed top navigation within the confines of the page wrapper when the latter is compressed or moved horizontally by the presence of an advertisement banner.

### Navigation Levels

The navigation items are grouped into three levels. These levels are displayed differently depending on the navigation state.

Both the tab navigation and the slide-in navigation are based on the same elements, however, so you won't need to maintain two independent navigations.

#### Tab Navigation

First-level navigation items are shown as tabs in the orange navigation bar. Second and third-level items are grouped under their respective tabs and will be shown when the user hovers over (or touches) a tab.

There are three components in the tab layout: The tab navigation list (`top-navigation__hover-tabs`), the individual tab labels (`top-navigation__hover-tabs__label`), and the hover layer (`top-navigation__hover-layer`).

These classes are addons to the existing elements `top-navigation__level--1`, `top-navigation__level--1__label`, and `top-navigation__level--2`, respectively.

Top navigation tabs

    <nav class="top-navigation">
        <div class="content-wrapper clearfix">
            <ul class="top-navigation__level--1 top-navigation__hover-tabs">
                <li>
                    <a class="top-navigation__level--1__label top-navigation__hover-tabs__label" href="#">Wohnen</a>
                    <div class="top-navigation__level--2 top-navigation__hover-layer">
                        <!-- Layer content -->
                    </div>
                </li>
            </ul>
        </div>
    </nav>

##### Active Tabs

Tabs can be highlighted with the `active` class to give users a general idea about their whereabouts.

Active top navigation tab

    <ul class="top-navigation__level--1 top-navigation__hover-tabs">
        <li class="active">
            <span class="top-navigation__level--1__label top-navigation__hover-tabs__label">Wohnen</span>
            <div class="top-navigation__level--2 top-navigation__hover-layer">
                <!-- Layer content -->
            </div>
        </li>
    </ul>

##### Tabs with Delayed Hover Effect

When a tab is hovered, it will open a layer, which takes up a lot of the viewport area.

To avoid disorienting the user on every mouse stroke that crosses a tab, layers will only be triggered after a short delay. This delay is applied with the `top-navigation__hover-tabs--delayed` class.

Top navigation tabs with delayed hover effect

    <ul class="top-navigation__level--1 top-navigation__hover-tabs top-navigation__hover-tabs--delayed"></ul>

### Slide-in Navigation

The navigation interface will switch from hover tabs to slide-in panels when there is not enough space in the navigation bar to fit the tabs.

Triggers for the left and right-hand panels are assigned with the `top-navigation__slide-in-trigger--left` and `top-navigation__slide-in-trigger--right` classes.

For the panels themselves, attach the `top-navigation__slide-in--left` and `top-navigation__slide-in--right` classes to the respective first-level navigation lists.

Top navigation slide-in panels (Tab navigation classes have been omitted for the sake of clarity.)

    <nav class="top-navigation">
        <div class="content-wrapper clearfix">
            <!-- trigger for the right-hand slide-in panel -->
            <a href="#" class="top-navigation__slide-in-trigger--right"><span class="block">Mein Konto</span></a>
            <!-- right-hand slide-in panel -->
            <ul class="top-navigation__level--1 top-navigation__slide-in--right top-navigation__slide-in--show-level-2"></ul>

            <!-- trigger for the left-hand slide-in panel -->
            <a href="#" class="top-navigation__slide-in-trigger--left"><span class="fa fa-bars"></span></a>
            <!-- left-hand slide-in panel -->
            <ul class="top-navigation__level--1 top-navigation__slide-in--left top-navigation__slide-in--show-level-1"></ul>
        </div>
    </nav>

The classes `top-navigation__slide-in--show-level-1` and `top-navigation__slide-in--show-level-2` determine whether the slide-in panels should show only first-level, or first and second-level entries.

## 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.

Use this button to toggle the log-in status in the top navigation above:

## JavaScript

The top navigation needs a bit of JavaScript for the slide-in navigation and the fix-to-top behavior.

    if (window.IS24 && IS24.core && IS24.core.topNavigation) {
      IS24.core.topNavigation.init();
    }
    if (window.IS24 && IS24.core && IS24.core.fixElementToViewportTop) {
      IS24.core.fixElementToViewportTop.init();
    }

## Complete Example

This is a complete sample of a top navigation as used in the navigation at the top of this page.

Complete example of a top navigation

    <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/logo.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>
    <div class="fix-to-top-wrapper fix-to-top-wrapper--top-navigation">
      <nav class="top-navigation fix-to-top">
        <div class="fix-to-top__skyscraper-spacer">
          <div class="content-wrapper clearfix">
            <a href="#" class="top-navigation__slide-in-trigger--right"><span class="block">Mein Konto</span></a>
            <ul class="top-navigation__level--1 top-navigation__hover-tabs top-navigation__hover-tabs--delayed top-navigation__slide-in--right top-navigation__slide-in--show-level-2 top-navigation__sso-login sso-login">
              <li>
                <a href="#">
                  <div class="top-navigation__sso-login__user-avatar"><!-- insert user image here --></div>
                </a>
                <a class="top-navigation__level--1__label top-navigation__hover-tabs__label inline-block" href="#">
                  <span class="top-navigation__sso-login__welcome-message font-ellipsis">
                    <span class="sso-login__user-name"><!-- insert user name here --></span>
                  </span>
                  <span class="block">Mein Konto <span class="fa fa-chevron-down font-s palm-hide lap-hide"></span></span>
                </a>
                <div class="top-navigation__level--2 top-navigation__hover-layer">
                  <ul class="top-navigation__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="top-navigation__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="top-navigation__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="top-navigation__sso-login__link-list--logged-in icon-arrow list-spacing padding-top-none">
                    <li>
                      <a href="#" id="link_logoutLinkInternal">Abmelden</a>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
            <a href="#" class="top-navigation__slide-in-trigger--left"><span class="fa fa-bars"></span></a>
            <ul class="top-navigation__level--1 top-navigation__hover-tabs top-navigation__hover-tabs--delayed top-navigation__slide-in--left top-navigation__slide-in--show-level-1">
              <li class="active">
                <span class="top-navigation__level--1__label top-navigation__hover-tabs__label">Wohnen</span>
                <div class="top-navigation__level--2 top-navigation__hover-layer">
                  <div class="equal-height one-whole">
                    <div class="top-navigation__level--2__navigation-wrapper equal-height__column three-fourths">
                      <div class="grid gutter-horizontal-xl gutter-vertical-m">
                        <div class="grid-item top-navigation__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 top-navigation__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 top-navigation__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 top-navigation__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="top-navigation__level--2__teaser-wrapper equal-height__column one-fourth">
                      <div class="top-navigation__level--2__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="top-navigation__level--1__label top-navigation__hover-tabs__label" href="#">Anbieten</a>
                <div class="top-navigation__level--2 top-navigation__hover-layer">
                  <div class="equal-height one-whole">
                    <div class="top-navigation__level--2__navigation-wrapper equal-height__column three-fourths">
                      <div class="grid gutter-horizontal-xl gutter-vertical-m">
                        <div class="grid-item top-navigation__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 top-navigation__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 top-navigation__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 top-navigation__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 top-navigation__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="top-navigation__level--2__teaser-wrapper equal-height__column one-fourth">
                      <div class="top-navigation__level--2__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="top-navigation__level--1__label top-navigation__hover-tabs__label" href="#">Gewerbe</a>
                <div class="top-navigation__level--2 top-navigation__hover-layer">
                  <div class="equal-height one-whole">
                    <div class="top-navigation__level--2__navigation-wrapper equal-height__column three-fourths">
                      <div class="grid gutter-horizontal-xl gutter-vertical-m">
                        <div class="grid-item top-navigation__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 top-navigation__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 top-navigation__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 top-navigation__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 top-navigation__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="top-navigation__level--2__teaser-wrapper equal-height__column one-fourth">
                      <div class="top-navigation__level--2__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="top-navigation__level--1__label top-navigation__hover-tabs__label" href="#">Markt & Preise</a>
                <div class="top-navigation__level--2 top-navigation__hover-layer">
                  <div class="equal-height one-whole">
                    <div class="top-navigation__level--2__navigation-wrapper equal-height__column three-fourths">
                      <div class="grid gutter-horizontal-xl gutter-vertical-m">
                        <div class="grid-item top-navigation__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 top-navigation__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 top-navigation__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 top-navigation__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 top-navigation__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="top-navigation__level--2__teaser-wrapper equal-height__column one-fourth">
                      <div class="top-navigation__level--2__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="top-navigation__level--1__label top-navigation__hover-tabs__label" href="#">Baufinanzierung</a>
                <div class="top-navigation__level--2 top-navigation__hover-layer">
                  <div class="equal-height one-whole">
                    <div class="top-navigation__level--2__navigation-wrapper equal-height__column three-fourths">
                      <div class="grid gutter-horizontal-xl gutter-vertical-m">
                        <div class="grid-item top-navigation__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 top-navigation__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 top-navigation__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 top-navigation__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="top-navigation__level--2__teaser-wrapper equal-height__column one-fourth">
                      <div class="top-navigation__level--2__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="top-navigation__level--1__label top-navigation__hover-tabs__label" href="#">Umzug</a>
                <div class="top-navigation__level--2 top-navigation__hover-layer">
                  <div class="equal-height one-whole">
                    <div class="top-navigation__level--2__navigation-wrapper equal-height__column three-fourths">
                      <div class="grid gutter-horizontal-xl gutter-vertical-m">
                        <div class="grid-item top-navigation__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 top-navigation__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 top-navigation__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 top-navigation__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 top-navigation__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="top-navigation__level--2__teaser-wrapper equal-height__column one-fourth">
                      <div class="top-navigation__level--2__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/top-navigation/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="top-navigation__level--1__label top-navigation__hover-tabs__label" href="#">Eigentümer</a>
                <div class="top-navigation__level--2 top-navigation__hover-layer">
                  <div class="equal-height one-whole">
                    <div class="top-navigation__level--2__navigation-wrapper equal-height__column three-fourths">
                      <div class="grid gutter-horizontal-xl gutter-vertical-m">
                        <div class="grid-item top-navigation__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 top-navigation__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 top-navigation__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 top-navigation__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 top-navigation__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="top-navigation__level--2__teaser-wrapper equal-height__column one-fourth">
                      <div class="top-navigation__level--2__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><!-- top-navigation__level- -1 -->
          </div><!-- .content-wrapper -->
        </div><!-- .fix-to-top__skyscraper-spacer -->
      </nav><!-- .top-navigation.fix-to-top -->
    </div><!-- .fix-to-top-wrapper.fix-to-top-wrapper-\-top-navigation -->
    <script type="text/javascript">
      if (window.IS24 && IS24.core && IS24.core.topNavigation) {
        IS24.core.topNavigation.init();
      }
      if (window.IS24 && IS24.core && IS24.core.fixElementToViewportTop) {
        IS24.core.fixElementToViewportTop.init();
      }
    </script>