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

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.

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.

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

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 small layer

Nothing much here.

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>

Left-aligned

This layer is left-aligned as per default.

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.

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.