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.

Complete Sample Markup
CSS and JS Resources
Page Frame
Brand Header
Navigation Frame
Navigation Levels
1. Tab Navigation
  1. Active Tabs
  2. Delayed Hover Effect
Slide-in Navigation
Log-in Status
JavaScript
“Powered by” Logo

Complete Sample Markup

Umzug — Complete example of a top navigation

CSS and JS Resources

In addition to its own CSS and JS, the Top Navigation relies on the Core Framework in an arbitrary version.

Note: If you are using the central CMS header, you won't need to include these 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.1.1/css/core-topnavigation.min.css" />
<script src="//www.static-immobilienscout24.de/fro/core-topnavigation/0.1.1/js/core-topnavigation.min.js"></script>

Page Frame

The page wrapper needs the additional top-navigation-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 top-navigation-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 White Header, with the addition of the 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 Levels

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

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

Tab Navigation

When the tab navigation is active, 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 taps on) a tab.

The tab navigation is composed of three main components:

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">
        <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>

Delayed Hover Effect

When a tab is hovered, the corresponding layer will take 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">
        <!-- 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.

<ul class="topnavigation__hover-tabs topnavigation__sso-login sso-login">
  <li>
    <a href="#">
      <div class="top-navigation__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">
        Mein Konto <span class="fa fa-chevron-down font-s palm-hide lap-hide"></span>
      </span>
    </a>
  </li>
</ul>

<ul class="topnavigation__hover-tabs topnavigation__sso-login sso-login sso-login--show-avatar">
  <li>
    <a href="#">
      <div class="top-navigation__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">
        Mein Konto <span class="fa fa-chevron-down font-s palm-hide lap-hide"></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="top-navigation__sso-login__user-avatar">
        <img alt="Herzog Frosch von Unkenberg" src="../img/topnavigation/log-in/frog_80x80.jpg" />
      </div>
    </a>
    <a class="top-navigation__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">
        Mein Konto <span class="fa fa-chevron-down font-s palm-hide lap-hide"></span>
      </span>
    </a>
  </li>
</ul>

JavaScript

The top navigation needs a bit of JavaScript for the slide-in navigation.

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

“Powered by” Logo

The powered-by logo in the top right hand corner is absolutely positioned so that it can be placed low in the document tree.

Place it in a wrapper with the corporate-powered-by-container class to give it a proper positioning reference.

Note: You don't need to worry about the wrapper if you get your header markup from the CMS. The snippet brings its own powered-by wrapper.

 <body>
     <div class="viewport">
         <div class="page-wrapper top-navigation-slide-in-container corporate-powered-by-container">
             <!-- header goes here -->
             <!-- ... other, more important content here -->
             <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>
     </div>
 </body>

Top Navigation

Complete Sample Markup

NEU: Mehr Angebote mit der Suchanzeige!

Jetzt Anzeige schalten

Sie suchen eine Gewerbefläche?

Immobilienbewertung

Der Finanzierungsrechner für Ihren Baukredit

Ein kompletter Umzug ist günstiger, als Sie denken

Auf der sicheren Seite!