Core Framework v1.2.0 – Documentation

Page Header – Full

Deprecated

This feature is deprecated. Please refer to Top Navigation instead.

This section explains how to construct the global ImmobilienScout24 header. You will find a complete example of a real-life header, followed by a detailed look at the points that you can tweak to your needs.

  1. Full Code Example
  2. World Navigation
  3. Sub Navigation
    1. Highlighting
    2. “New” Icon
  4. Login
  5. Responsiveness
  6. Scout24 Verticals

Full Code Example

This is an example header based on the actual live header for the Hausbau category as at 2013-12-06.

Header for Wohnen › Hausbau (2013-12-06)
<header class="header-full">
  <div class="header-top">
    <a href="/de/finden/wohnen/index.jsp" title="Zur Startseite">
      <img src="../../img/logo/logo.png" width="112" height="56" alt="ImmobilienScout24" class="header-logo" />
    </a>
    <span class="header-claim">Rein ins neue Leben.</span>
    <h6>Immobilienwelten</h6>
    <ul class="header-worlds">
      <li class="active"><a href="/de/finden/wohnen/index.jsp"><span class="header-verbose">Immobilien zum </span>Wohnen</a></li>
      <li><a href="/de/finden/gewerbe/index.jsp"><span class="header-verbose">Immobilien für Ihr </span>Gewerbe</a></li>
      <li><a href="/de/anbieten/immobilien-inserieren.jsp"><span class="header-verbose">Immobilien zum </span>Anbieten</a></li>
      <li><a href="/eigentuemer/"><span class="header-verbose">Immobilien-</span>Eigentümer</a></li>
    </ul>
    <ul class="header-login">
      <li>
        Willkommen!
        <a href="/sso/login.go">Anmelden</a>
        oder
        <a href="/sso/register.go">neu registrieren</a>.
      </li>
    </ul>
  </div>
  <div class="header-sub-navigation">
    <h6>Navigation</h6>
    <ul class="header-categories">
      <li><a href="/wohnen/">Suchen</a></li>
      <li class="header-category-new"><a href="/suchagent/gesuche">Suchanzeigen</a></li>
      <li><a href="/baufinanzierung/">Baufinanzierung</a></li>
      <li class="active"><a href="/bauen/">Hausbau</a></li>
      <li><a href="/einrichten/">Wohnideen</a></li>
      <li><a href="/umzug/">Umzug</a></li>
      <li><a href="/de/immobilienbewertung/index.jsp">Markt & Preise</a></li>
      <li><a href="/anbieter/">Branchenbuch</a></li>
    </ul>
    <ul class="header-account-tools">
      <li><a href="/sso/login.go?returnUrl=/geschlossenerbereich/merkzettel.html"><span>Merkzettel</span></a></li>
      <li class="last"><a href="/geschlossenerbereich/start.html"><span>Mein Konto</span></a></li>
    </ul>
  </div>
  <div class="header-content-navigation">
    <ul class="header-topics">
      <li><a href="/bauen/goldencube2014.html">Golden Cube 2014</a></li>
      <li><a href="/Lead/Start/Musterhaus/">Musterhäuser</a></li>
      <li><a href="/Lead/Start/Hausbau/">Haus Kataloge</a></li>
      <li><a href="/bauen/musterhausparks.html">Musterhausparks</a></li>
      <li><a href="/bauen/bauplanung.html">Bauplanung</a></li>
      <li><a href="/bauen/news.html">Hausbau-News</a></li>
    </ul>
  </div>
</header>

World Navigation

The world navigation can be highlighted to show in which world the user is at the moment. Change the highlighting by moving around the active class.

Active world tab
<ul class="header-worlds">
    <li><a href="#">Wohnen</a></li>
    <li class="active"><a href="#">Gewerbe</a></li>
    <li><a href="#">Anbieten</a></li>
    <li><a href="#">Eigentümer</a></li>
</ul>

Login

When logged in, the header will show a welcome text, as well as an account link and a logout link.

Logged-in header state
<ul class="header-login">
    <li>
        <a href="#" title="Logout">Abmelden</a>
    </li>
    <li>
        <a href="#">Mein Konto</a>
    </li>
    <li>
        Willkommen, insert_user_name_here
    </li>
</ul>

Note that the login box is only visible in the desk state. It disappears in the palm and lap states and is replaced by a “my account” button.

Responsiveness

The full header is partly responsive in that it will fit any display size in the “lap” and “desk” states. However, there is no definition of the full header for smaller devices. As a result, this header will be hidden on palm-sized devices.

Use a light-weight fallback header for small devices. You can switch between the two using the state-specific hiding classes.

Scout24 Verticals

The standard page layout has links to all of the Scout24 Group's Verticals at the top of the page.
While visually the top-most element on the page, they are meant to be down low in the source code for SEO-related reasons.

To make this work, the link bar needs to be placed at the end of your page wrapper. It will then be positioned absolutely to make sure it is displayed at the top for lap-sized and desk-top devices.

The page wrapper, in turn, needs to get the class has-scout24-verticals to make space at the top for the link bar.

Link bar for Scout24 Verticals (Background colors and paddings added for demonstrational purposes)
<!-- <body> -->
<div class="page-wrapper has-scout24-verticals">
  Other<br />
  page<br />
  content.
  <div class="scout24-verticals">
    <ul>
      <li><a target="_blank" id="Scout24" title="Suchen bei Scout24" href="http://www.scout24.de">Scout24</a></li>
      <li><a target="_blank" id="AutoScout24" title="Auto kaufen & verkaufen bei AutoScout24" href="http://www.autoscout24.de">AutoScout24</a></li>
      <li><a target="_blank" id="FinanceScout24" title="Darlehen bei FinanceScout24" href="http://www.financescout24.de">FinanceScout24</a></li>
      <li><a target="_blank" id="FriendScout24" title="Singles bei FriendScout24" href="http://www.friendscout24.de">FriendScout24</a></li>
      <li><a target="_blank" id="JobScout24" title="JobScout24 – Jobs und Stellenangebote finden" href="http://www.jobscout24.de">JobScout24</a></li>
      <li><a target="_blank" id="TravelScout24" title="Reisen Hotels Last Minute Urlaub bei TravelScout24" href="http://www.travelscout24.de">TravelScout24</a></li>
    </ul>
    <span class="powered-by-telekom">
      <a target="_blank" href="http://wirtschaft.t-online.de/heizoelpreise-und-heizoelpreisrechner-guenstig-heizoel-kaufen/id_12803086/index">
        <img src="../../img/header/powered-by-telekom.png" width="104" height="19" alt="Heizölpreise" />
      </a>
    </span>
  </div>
</div>
<!-- </body> -->