Back to components

Hero Navigation

Bundle

Det oknepiga försäkringsbolaget

Skaffa rätt skydd för ditt hem och dina saker

Table of Contents

Edit this section, Opens in new window

Usage

The Hero Navigation Component is used for the top part for product navigation.

Principles

  • The image should always be a littlebit visible, for feelings sake
  • In desktop always 2 columns for the second row of limnks
  • Check longest product categories and product page length
  • Check for calm animation
  • Animation for the entrance of the second links when the image moves over
  • Arrows aligned with the words (like they are now)
  • Bold links when selected (very left columns)
  • Make sure that the height of the Hero Navigation is correct
Edit this section, Opens in new window

Behaviours

Operational states

Det oknepiga försäkringsbolaget

Skaffa rätt skydd för ditt hem och dina saker

Initial

Det oknepiga försäkringsbolaget

Skaffa rätt skydd för ditt hem och dina saker

Initial with lifestyle image
Step 1
Step 1 with lifestyle image
Step 2
Step 2 with lifestyle image
Edit this section, Opens in new window

Anatomy

Hero Navigation
Hero Navigation step 1
  1. Back button
  2. Hovered element
Hero Navigation step 2
  1. Hovered element
Edit this section, Opens in new window

Implementation

To change the views, when a user clicks the primary button, add .is-active and .step-1 for the first step, and .step-2 for the last step to <div class="if content navigation">.

To use a lifestyle image in the Hero Navigation, add lifestyle to the image container:

  <div class="if transform blur">
    <div class="if image lifestyle"></div>
  </div>
</div>
<section class="if hero-navigation">
  <div class="if container">
    <div class="if content">
      <h1 class="if heading larger">Det oknepiga försäkringsbolaget</h1>
      <p class="if text lead">
        Skaffa rätt skydd för ditt hem och dina saker
      </p>
      <button type="button" class="if button primary large">Hitta försäkring</button>
    </div>
    <nav class="if content navigation">
      <button type="button" class="if navigation back">Tilbaka</button>
      <button type="button" class="if navigation back step-2">Tilbaka</button>
      <div class="if navigation-container">
        <ul class="if navigation-list">
          <li class="if navigation-item">
            <button type="button" class="if navigation-action">Koitini ja muu oimusitinen</button>
            <ul class="if sub-navigation-list">
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/Bilforsäkring" class="if navigation-link">Bilforsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/BMW mc-märkesförsäkring" class="if navigation-link"
                  >BMW mc-märkesförsäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/MC försäkring" class="if navigation-link">MC försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/Mopedförsäkring" class="if navigation-link">Mopedförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/Husbilsförsäkring" class="if navigation-link">Husbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/Husvagnförsäkring" class="if navigation-link">Husvagnförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/Lätt lastbilsförsäkring" class="if navigation-link"
                  >Lätt lastbilsförsäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/Släpvagnsförsäkring" class="if navigation-link"
                  >Släpvagnsförsäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/ATV-försäkring" class="if navigation-link">ATV-försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/Snöskoterförsäkring" class="if navigation-link"
                  >Snöskoterförsäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/Samlarfordonsförsäkring" class="if navigation-link"
                  >Samlarfordonsförsäkring</a
                >
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/Placeholder" class="if navigation-link">Placeholder</a>
              </li>
              <li class="if navigation-item">
                <a href="/Koitini ja muu oimusitinen/Placeholder" class="if navigation-link">Placeholder</a>
              </li>
            </ul>
          </li>
          <li class="if navigation-item">
            <button type="button" class="if navigation-action">Hus och Hem</button>
            <ul class="if sub-navigation-list">
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Bilforsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">BMW mc-märkesförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">MC försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Mopedförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Husbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Husvagnförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Lätt lastbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Släpvagnsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">ATV-försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Snöskoterförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Samlarfordonsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Placeholder</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Placeholder</a>
              </li>
            </ul>
          </li>
          <li class="if navigation-item">
            <button type="button" class="if navigation-action">Person</button>
            <ul class="if sub-navigation-list">
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Bilforsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">BMW mc-märkesförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">MC försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Mopedförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Husbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Husvagnförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Lätt lastbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Släpvagnsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">ATV-försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Snöskoterförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Samlarfordonsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Placeholder</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Placeholder</a>
              </li>
            </ul>
          </li>
          <li class="if navigation-item">
            <button type="button" class="if navigation-action">Resa</button>
            <ul class="if sub-navigation-list">
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Bilforsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">BMW mc-märkesförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">MC försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Mopedförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Husbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Husvagnförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Lätt lastbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Släpvagnsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">ATV-försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Snöskoterförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Samlarfordonsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Placeholder</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Placeholder</a>
              </li>
            </ul>
          </li>
          <li class="if navigation-item">
            <button type="button" class="if navigation-action">Djur</button>
            <ul class="if sub-navigation-list">
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Bilforsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">BMW mc-märkesförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">MC försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Mopedförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Husbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Husvagnförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Lätt lastbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Släpvagnsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">ATV-försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Snöskoterförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Samlarfordonsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Placeholder</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Placeholder</a>
              </li>
            </ul>
          </li>
          <li class="if navigation-item">
            <button type="button" class="if navigation-action">Båt</button>
            <ul class="if sub-navigation-list">
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Bilforsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">BMW mc-märkesförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">MC försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Mopedförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Husbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Husvagnförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Lätt lastbilsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Släpvagnsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">ATV-försäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Snöskoterförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Samlarfordonsförsäkring</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Placeholder</a>
              </li>
              <li class="if navigation-item">
                <a href="/asdasd" class="if navigation-link">Placeholder</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
    <div class="if transform blur">
      <div
        class="if image studio"
        style="background-image: url(https://design.if.eu/images/hug.png);background-size: cover;background-position: center top;"
      ></div>
    </div>
  </div>
</section>
const createInlineArrow = () => {
  const fragment = document.createDocumentFragment();
  const el = document.createElement('span');
  const wrapper = document.createElement('span');

  wrapper.classList.add('if');
  wrapper.classList.add('inline-nowrap');

  wrapper.innerHTML = '&#xfeff;';
  wrapper.appendChild(el);
  wrapper.setAttribute('aria-hidden', true);
  el.classList.add('if');
  el.classList.add('dropRight');

  fragment.appendChild(wrapper);

  return fragment;
};

var hero = document.querySelector('#demo-hero-navigation');
var ctaButton = hero.querySelector('.if.button.primary');
var backButton = hero.querySelector('.if.navigation.back');
var backButton2 = hero.querySelector('.if.navigation.back.step-2');

const navigationContainer = hero.querySelector('.if.navigation-container');
const primaryList = hero.querySelector('.if.navigation-container > .if.navigation-list');
const primaryActions = primaryList.querySelectorAll('.if.navigation-action');

Array.prototype.slice.call(primaryActions).forEach(function(action) {
  action.classList.add('hasno-after');
  action.appendChild(createInlineArrow());
});

var actions = hero
  .querySelector('.if.content.navigation')
  .querySelectorAll('a:not(.navigation-link), button:not(.navigation-link)');

Array.prototype.slice.call(actions).forEach(function(action) {
  action.setAttribute('tabindex', '-1');
});

var subActions = hero
  .querySelector('.if.content.navigation')
  .querySelectorAll('a.navigation-link, button.navigation-link');
Array.prototype.slice.call(subActions).forEach(function(action) {
  action.setAttribute('tabindex', '-1');
});
ctaButton.addEventListener('click', function(e) {
  e.preventDefault();
  hero.querySelector('.if.content:not(.navigation)').style.display = 'none';
  hero.querySelector('.if.content.navigation').classList.add('is-active');
  hero.querySelector('.if.content.navigation').classList.add('step-1');
  Array.prototype.slice.call(actions).forEach(function(action) {
    action.setAttribute('tabindex', '0');
  });

  var firstAction = hero.querySelector('.if.content.navigation .if.navigation-list .if.navigation-item');
  firstAction.focus();
  const list = hero.querySelector('.if.navigation-list');
  list.style.height = 'auto';
});

var activateStepTwo = function(el) {
  Array.prototype.slice.call(subActions).forEach(function(action) {
    action.setAttribute('tabindex', '-1');
  });
  Array.prototype.slice
    .call(hero.querySelectorAll('.if.navigation-list > li > button.is-active'))
    .forEach(function(el) {
      el.classList.remove('is-active');
      el.parentElement.querySelector('.if.sub-navigation-list').style.display = 'none';
      setTimeout(function() {
        el.parentElement.querySelector('.if.sub-navigation-list').style.display = 'flex';
      }, 1000);
    });
  Array.prototype.slice
    .call(el.parentElement.querySelectorAll('.if.sub-navigation-list .if.navigation-link'))
    .forEach(function(el) {
      el.setAttribute('tabindex', '0');
    });
  el.classList.add('is-active');
  hero.querySelector('.if.content.navigation').classList.remove('step-1');
  hero.querySelector('.if.content.navigation').classList.add('step-2');
  setTimeout(function() {
    const parentList = el.closest('.if.navigation-list');
    const subNav = el.parentElement.querySelector('.if.sub-navigation-list');
    const subRect = subNav.getBoundingClientRect();
    parentList.style.height = subRect.height + 'px';
  }, 100);
};

Array.prototype.slice.call(hero.querySelectorAll('.if.navigation-list > li > button')).forEach(function(el) {
  el.addEventListener('click', function(e) {
    e.preventDefault();
    activateStepTwo(el);
  });
});

backButton.addEventListener('click', function(e) {
  e.preventDefault();
  hero.querySelector('.if.content:not(.navigation)').style.display = 'block';
  hero.querySelector('.if.content.navigation').classList.remove('is-active');
  hero.querySelector('.if.content.navigation').classList.remove('step-1');
  hero.querySelector('.if.content.navigation').classList.remove('step-2');
  Array.prototype.slice.call(actions).forEach(function(action) {
    action.setAttribute('tabindex', '-1');
  });
  Array.prototype.slice.call(subAction).forEach(function(action) {
    action.setAttribute('tabindex', '-1');
  });
  const list = hero.querySelector('.if.navigation-list');
  list.style.height = 'auto';
});
backButton2.addEventListener('click', function(e) {
  e.preventDefault();
  hero.querySelector('.if.content.navigation').classList.remove('step-2');
  hero.querySelector('.if.content.navigation').classList.add('step-1');
  const list = hero.querySelector('.if.navigation-list');
  list.style.height = 'auto';
});
Edit this section, Opens in new window
Contact us, Opens in new window