Top Navigation

Complete Sample Markup

Umzug — Complete example of a top navigation

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

Navigation Frame

The top navigation is wrapped in a topnavigation block, 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="topnavigation">
    <div class="content-wrapper"></div>
</nav>

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 (topnavigation__hover-tabs),
the individual list elements, each with a tab label (topnavigation__hover-tabs__label),
and the hover layer (topnavigation__hover-layer).

Top navigation tabs (Other classes omitted for the sake of simplicity.)

<nav class="topnavigation">
    <div class="content-wrapper">
        <ul class="topnavigation__hover-tabs">
            <li>
                <a class="topnavigation__hover-tabs__label" href="#">Wohnen</a>
                <div class="topnavigation__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 (Top navigation wrapper left out for the sake of simplicity.)

<ul class="topnavigation__hover-tabs">
    <li>
        <a class="topnavigation__hover-tabs__label" href="#">Inactive</a>
    </li>
    <li class="active">
        <a class="topnavigation__hover-tabs__label" href="#">Active</a>
    </li>
    <li>
        <a class="topnavigation__hover-tabs__label" href="#">Inactive</a>
    </li>
</ul>

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 topnavigation__hover-tabs--delayed class.

Top navigation tabs with delayed hover effect (Top navigation wrapper left out for the sake of simplicity.)

<ul class="topnavigation__hover-tabs topnavigation__hover-tabs--delayed topnavigation__hover-tabs--small-layers">
    <li>
        <a class="topnavigation__hover-tabs__label" href="#">Delayed</a>
        <div class="topnavigation__hover-layer">
            It took 200ms for me to show and will take as long for me to vanish.
        </div>
    </li>
</ul>

Layer Sizes

Top navigation layers come in two sizes: small and large. Large layers will span the whole width of the top navigation, while small layers are just wide enough for a single link list.

Tab lists opening differently sized layers (Top navigation wrapper left out for the sake of simplicity.)

<ul class="topnavigation__hover-tabs topnavigation__hover-tabs--small-layers topnavigation__sso-login">
    <li>
        <span class="topnavigation__hover-tabs__label">
            A small layer
        </span>
        <div class="topnavigation__level--2 topnavigation__hover-layer topnavigation__hover-layer--right-aligned">
            Nothing much here.
        </div>
    </li>
</ul>
<ul class="topnavigation__hover-tabs topnavigation__hover-tabs--large-layers">
    <li>
        <span class="topnavigation__hover-tabs__label">
            A large layer
        </span>
        <div class="topnavigation__hover-layer">
            This place for rent. Also, blind text. And some more, just to reach the other end of the container
            and force a break.
        </div>
    </li>
</ul>

A large layer
This place for rent. Also, blind text. And some more, just to reach the other end of the container and force a break.

Layer Alignment

Small layers are by default left-aligned. To align a layer to the right edge of the tab, use the topnavigation__hover-layer--right-aligned class.

Layers aligned to the left and to the right (Top navigation wrapper left out for the sake of simplicity.)

<ul class="topnavigation__hover-tabs topnavigation__hover-tabs--small-layers">
    <li>
        <span class="topnavigation__hover-tabs__label">
            Left-aligned
        </span>
        <div class="topnavigation__hover-layer">
            This layer is left-aligned as per default.
        </div>
    </li>
    <li>
        <span class="topnavigation__hover-tabs__label">
            Right-aligned
        </span>
        <div class="topnavigation__hover-layer topnavigation__hover-layer--right-aligned">
            This layer is aligned to the right, which comes in handy if there is not enough space on the right to fit the layer.
        </div>
    </li>
</ul>

Self-aligned Layers

Since the top navigation has flexible dimensions depending on display size, layers may need to be right-aligned only some of the time.

To have layers aligned on demand, set the topnavigation__hover-tabs--self-aligned class on the respective tab list. The required script will be run as part of IS24.core.extensions.topnavigation.init.

A tab list with self-aligned layers

<ul class="topnavigation__hover-tabs topnavigation__hover-tabs--small-layers topnavigation__hover-tabs--self-aligned">
</ul>

Layer Content

The content of a layer is structured differently depending on the layer's size.

Small layers need only the topnavigation__hover-layer__navigation-wrapper wrapper element, which takes care spacing.

Large layers have a slightly more complex structure to allow for multiple link list blocks, teasers, and equally sized content columns.

Content structure for small and large layers

<nav class="topnavigation">
  <div class="content-wrapper">
    <ul class="topnavigation__hover-tabs topnavigation__hover-tabs--small-layers topnavigation__sso-login">
      <li>
        <span class="topnavigation__hover-tabs__label">
          A small layer
        </span>
        <div class="topnavigation__hover-layer topnavigation__hover-layer--right-aligned">
          <div class="topnavigation__hover-layer__navigation-wrapper">
            <ul class="icon-arrow list-spacing">
              <li> <a href="#">A couple</a></li>
              <li> <a href="#">of entries</a></li>
              <li> <a href="#">in a single</a></li>
              <li> <a href="#">link list</a></li>
            </ul>
          </div>
        </div>
      </li>
    </ul><!-- .topnavigation__hover-tabs -->
    <ul class="topnavigation__hover-tabs topnavigation__hover-tabs--large-layers">
      <li>
        <span class="topnavigation__hover-tabs__label">
          A large layer
        </span>
        <div class="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">
                  <h3><a href="#">There is</a></h3>
                  <ul class="list-spacing-xs icon-arrow">
                    <li><a href="#">Ample space here</a></li>
                    <li><a href="#">To fit</a></li>
                  </ul>
                </div>
                <div class="grid-item topnavigation__hover-layer__link-block">
                  <h3><a href="#">Several</a></h3>
                  <ul class="list-spacing-xs icon-arrow">
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Lists</a></li>
                  </ul>
                </div>
                <div class="grid-item topnavigation__hover-layer__link-block">
                  <h3><a href="#">You can</a></h3>
                  <ul class="list-spacing-xs icon-arrow">
                    <li><a href="#">Keep it</a></li>
                    <li><a href="#">In one line</a></li>
                  </ul>
                </div>
                <div class="grid-item topnavigation__hover-layer__link-block">
                  <h3><a href="#">Or use two</a></h3>
                  <ul class="list-spacing-xs icon-arrow">
                    <li><a href="#">If you prefer</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">Also: Teasers.</h3>
                  <p class="margin-bottom-xl margin-top-s font-line-l">
                    Because where would we be if not for teasers?
                  </p>
                  <a class="button-primary padding-horizontal-s" href="#">Right?</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul><!-- .topnavigation__hover-tabs -->
  </div><!-- .content-wrapper -->
</nav><!-- .topnavigation -->

A small layer

A large layer
There is

Ample space here

To fit

Several

Link

Lists

You can

Keep it

In one line

Or use two

If you prefer
Also: Teasers.

Because where would we be if not for teasers?
Right?

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 topnavigation__slide-in-trigger--left and topnavigation__slide-in-trigger--right classes.

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

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

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

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

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

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.

A user image (topnavigation__sso-login__user-avatar)
A welcome message to the logged-in user (topnavigation__sso-login__welcome-message)
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 class="topnavigation__level--1__label topnavigation__hover-tabs__label" href="#">
            <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 class="topnavigation__level--2 topnavigation__hover-layer topnavigation__hover-layer--right-aligned">
        </div>
    </li>
</ul>

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

<a class="topnavigation__level--1__label topnavigation__hover-tabs__label topnavigation__hover-tabs__label--reduced" href="#">
    <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>

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 class="topnavigation__level--1__label topnavigation__hover-tabs__label" href="#">
            <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>
    </li>
</ul>

<ul class="topnavigation__hover-tabs topnavigation__sso-login sso-login sso-login--show-avatar">
    <li>
        <a class="topnavigation__level--1__label topnavigation__hover-tabs__label" href="#">
            <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();
}

“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 within a corporate-powered-by-container element 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 topnavigation-slide-in-container corporate-powered-by-container">
             <!-- header goes here -->
             <!--
                 ... other, more relevant 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>