England Football

Get Started Navigation 

<div class="get-started-navigation" data-behaviour="get-started-navigation">
    <ul role="tablist" class="get-started-navigation__tabs">
        <li>
            <a id=get-started-intro role="tab" tabindex="0" aria-selected="true">
                Intro video
            </a>
        </li>
        <li>
            <a id=get-started-become-coach role="tab" tabindex="0" aria-selected="false">
                Why become a caoch
            </a>
        </li>
        <li>
            <a id=get-started-courses role="tab" tabindex="0" aria-selected="false">
                Entry level courses
            </a>
        </li>
        <li>
            <a id=get-started-learning role="tab" tabindex="0" aria-selected="false">
                Learning support
            </a>
        </li>
        <li>
            <a id=get-started-faq role="tab" tabindex="0" aria-selected="false">
                FAQ
            </a>
        </li>
    </ul>
</div>

No notes defined.

{
  "tabs": [
    {
      "copy": "Intro video",
      "id": "get-started-intro",
      "selected": true
    },
    {
      "copy": "Why become a caoch",
      "id": "get-started-become-coach"
    },
    {
      "copy": "Entry level courses",
      "id": "get-started-courses"
    },
    {
      "copy": "Learning support",
      "id": "get-started-learning"
    },
    {
      "copy": "FAQ",
      "id": "get-started-faq"
    }
  ]
}
  • Content: 
    export default parentElement => {
  const offset = 114;
  const MOBILE_BREAKPOINT = 500;

  if (window.innerWidth > MOBILE_BREAKPOINT) {
    window.addEventListener('scroll', () => {
      // const scrollTop = document.documentElement.scrollTop;

      if (
        document.body.scrollTop > offset ||
        document.documentElement.scrollTop > offset
      ) {
        parentElement.classList.add('nav-sticky');
      } else {
        parentElement.classList.remove('nav-sticky');
      }
    });
  }
};
  • URL: /components/raw/get-started-navigation/get-started-navigation.js
  • Filesystem Path: src/library/components/get-started-navigation/get-started-navigation.js
  • Size: 507 Bytes
  • Content: 
    .get-started-navigation {
  position: fixed;
  width: 100%;
  height: 4.8rem;
  background: rgba(29, 29, 27, 1);
  opacity: 0.9;
  z-index: 8;
  transition: top 0.6s ease-in-out 0s;
  &.nav-sticky {
    position: fixed;
    z-index: 10;
    top: 0;
    transition: all 600ms linear;
  }

  &__tabs {
    display: flex;
    justify-content: center;
    overflow-x: auto;

    /* Hide scrollbar for IE, Edge and Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */

    /* Hide scrollbar for Chrome, Safari and Opera */
    &::-webkit-scrollbar {
      display: none;
    }

    li {
      position: relative;
      margin-right: 2.4rem;
      &.hidetab {
        display: none;
      }

      a {
        cursor: pointer;
        display: block;
        white-space: nowrap;
        font-family: $text-font-ef;
        font-weight: 400;
        font-size: 1.2rem;
        line-height: 1.6rem;
        letter-spacing: 0.01em;
        text-transform: uppercase;
        color: $white;
        padding: 1.6rem 0;
        height: 100%;

        &::after {
          content: '';
          display: block;
          position: absolute;
          width: 0;
          bottom: 0;
          height: auto;
          border-bottom: 0.3rem solid $red;
        }

        &[aria-selected='true'] {
          color: $light-blue;
        }

        &:hover,
        &[aria-selected='true'] {
          &::after {
            width: 100%;
            transition: width 600ms ease-in-out;
          }
        }
      }
    }
  }

  @media screen and (min-width: $mq-medium) {
    height: 6.4rem;
    max-width: unset;
    min-width: 82.3rem;

    li {
      &:not(:last-child) {
        margin-right: 8.8rem;
      }
      a {
        font-weight: 500;
        font-size: 1.6rem;
        line-height: 1.8rem;
        padding: 2.3rem 0;
      }
    }
  }

  @media screen and (max-width: $mq-medium) {
    &__tabs {
      justify-content: start;
      li {
        &:first-child {
          margin-left: 3.2rem;
        }
        &:last-child {
          margin-right: 3.2rem;
        }
      }
    }
  }
}
  • URL: /components/raw/get-started-navigation/get-started-navigation.scss
  • Filesystem Path: src/library/components/get-started-navigation/get-started-navigation.scss
  • Size: 2.2 KB 
<div class="get-started-navigation" data-behaviour="get-started-navigation">
    <ul role="tablist" class="get-started-navigation__tabs">
        {{#each tabs}}
        <li>
            <a id={{id}} role="tab" tabindex="0" {{#if selected}}aria-selected="true" {{else}}aria-selected="false"{{/if}}>
                {{copy}}
            </a>
        </li>
        {{/each}}
    </ul>
</div>