Academy of Natural Sciences

Anchor Links 

<div class="o-container c-anchor-links" data-bkg-theme="base">
    <h2 id="c-anchor-links-title" class="u-sr-only">Page Section Links</h2>
    <div class="c-anchor-links__desktop">
        <nav aria-labelledby="c-anchor-links__nav" class="c-anchor-links__nav f-text--cta f-upper">
            <p aria-hidden="true" class="c-anchor-links__title">Jump to</p>
            <ul aria-labelledby="c-anchor-links-title" class="c-anchor-links__items">

                <li class="c-anchor-links__item">
                    <a href="#" class="js-smooth-anchor">
                        <span class="u-hover-drawline--thin">Hours</span>
                    </a>
                </li>

                <li class="c-anchor-links__item">
                    <a href="#" class="js-smooth-anchor">
                        <span class="u-hover-drawline--thin">Health & Safety</span>
                    </a>
                </li>

                <li class="c-anchor-links__item">
                    <a href="#" class="js-smooth-anchor">
                        <span class="u-hover-drawline--thin">Admission</span>
                    </a>
                </li>

                <li class="c-anchor-links__item">
                    <a href="#" class="js-smooth-anchor">
                        <span class="u-hover-drawline--thin">Parking & Directions</span>
                    </a>
                </li>

                <li class="c-anchor-links__item">
                    <a href="#" class="js-smooth-anchor">
                        <span class="u-hover-drawline--thin">Visit Guide</span>
                    </a>
                </li>

                <li class="c-anchor-links__item">
                    <a href="#" class="js-smooth-anchor">
                        <span class="u-hover-drawline--thin">Amenities</span>
                    </a>
                </li>

            </ul>
        </nav>
    </div>

    <div class="c-anchor-links__mobile">
        <button class="c-anchor-links__mobile-button o-btn js-accordion-toggle" data-targetid="anchor-links-nav" data-closedelay="300">
            Jump to
            <span class="c-anchor-links__mobile-icon" aria-hidden="true">
                <svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11 1L6 6L1 1" class="u-ct-stroke" />
                </svg>

            </span>
        </button>
        <nav id="anchor-links-nav" aria-labelledby="c-anchor-links__nav" class="c-anchor-links__mobile-nav f-text--cta f-upper class js-accordion-panel o-accordion__panel" aria-hidden="" tabindex="-1">
            <p aria-hidden="true" class="u-sr-only">Page Sections</p>
            <ul aria-labelledby="c-anchor-links-title" class="c-anchor-links__mobile-items">

                <li class="c-anchor-links__mobile-item">
                    <a href="#" class="js-smooth-anchor">
                        Hours
                    </a>
                </li>

                <li class="c-anchor-links__mobile-item">
                    <a href="#" class="js-smooth-anchor">
                        Health & Safety
                    </a>
                </li>

                <li class="c-anchor-links__mobile-item">
                    <a href="#" class="js-smooth-anchor">
                        Admission
                    </a>
                </li>

                <li class="c-anchor-links__mobile-item">
                    <a href="#" class="js-smooth-anchor">
                        Parking & Directions
                    </a>
                </li>

                <li class="c-anchor-links__mobile-item">
                    <a href="#" class="js-smooth-anchor">
                        Visit Guide
                    </a>
                </li>

                <li class="c-anchor-links__mobile-item">
                    <a href="#" class="js-smooth-anchor">
                        Amenities
                    </a>
                </li>

            </ul>
        </nav>
    </div>

    <div class="c-anchor-links__sep"></div>
</div>
 
<div class="o-container c-anchor-links" data-bkg-theme="base">
	<h2 id="c-anchor-links-title" class="u-sr-only">Page Section Links</h2>
  <div class="c-anchor-links__desktop">
    <nav aria-labelledby="c-anchor-links__nav" class="c-anchor-links__nav f-text--cta f-upper">
      <p aria-hidden="true" class="c-anchor-links__title">Jump to</p>
      <ul aria-labelledby="c-anchor-links-title" class="c-anchor-links__items">
        {% for item in items %}
          <li class="c-anchor-links__item">
            <a href="#{{item.anchorId}}" class="js-smooth-anchor">
              <span class="u-hover-drawline--thin">{{item.title}}</span>
            </a>
          </li>
        {% endfor %}
      </ul>
    </nav>
  </div>

  <div class="c-anchor-links__mobile">
    <button class="c-anchor-links__mobile-button o-btn js-accordion-toggle" data-targetid="anchor-links-nav" data-closedelay="300">
      Jump to
      <span class="c-anchor-links__mobile-icon" aria-hidden="true">
        {% include "03-icons/down-carrat-small" %}
      </span>
    </button>
    <nav id="anchor-links-nav" aria-labelledby="c-anchor-links__nav" class="c-anchor-links__mobile-nav f-text--cta f-upper class js-accordion-panel o-accordion__panel" aria-hidden="{{ panelExpanded }}" tabindex="-1">
      <p aria-hidden="true" class="u-sr-only">Page Sections</p>
      <ul aria-labelledby="c-anchor-links-title" class="c-anchor-links__mobile-items">
        {% for item in items %}
          <li class="c-anchor-links__mobile-item">
            <a href="#{{item.anchorId}}" class="js-smooth-anchor">
              {{item.title}}
            </a>
          </li>
        {% endfor %}
      </ul>
    </nav>
  </div>

  <div class="c-anchor-links__sep"></div>
</div>
 
{
  "pageColorTheme": "teal",
  "items": [
    {
      "title": "Hours",
      "anchorId": ""
    },
    {
      "title": "Health & Safety",
      "anchorId": ""
    },
    {
      "title": "Admission",
      "anchorId": ""
    },
    {
      "title": "Parking & Directions",
      "anchorId": ""
    },
    {
      "title": "Visit Guide",
      "anchorId": ""
    },
    {
      "title": "Amenities",
      "anchorId": ""
    }
  ]
}
  • Content: 
    .c-anchor-links{
  margin-bottom: 2.5rem;
}

.c-anchor-links__title {
  font-weight: $f-light;
  flex-shrink: 0;
  margin-top: 1.2rem;
  font-size: 1.5rem;
}

.c-anchor-links__nav {
  display: flex;
  align-items: flex-start
}

.c-anchor-links__items {
  display: flex;
  align-items: flex-start;
  margin-top: 0.3rem;
}

.c-anchor-links__item {
  margin-left: 4.5rem;
  margin-top: 1.2rem;
  flex: 0 0 auto;
}

.c-anchor-links__sep {
  display: none;

  @include break($sm) {
    display: block;
    margin-top: 2.3rem;
    border-bottom: 0.1rem solid var(--ct-txt);
  }
}

.c-anchor-links__desktop {
  display: none;

  @include break($sm) {
    display: block;
  }
}

.c-anchor-links__mobile {
  position: relative;
  margin-top: 1.2rem;

  @include break($sm) {
    display: none;
  }
}

.c-anchor-links__mobile-button {
  @include filterStyles;
  // background: $c-white;
  // border: 0.1rem solid $c-black;
  position: relative;
}

.c-anchor-links__mobile-icon {
  position: absolute;
  top: 1.5rem;
  right: 2.4rem;
  transition: transform 0.24s ease-in-out;

  .is-open & {
    transform: rotate(180deg);
  }
}

.c-anchor-links__mobile-nav {
  position: absolute;
  top: 100%;
  top: calc(100% - 0.1rem);
  left: 0;
  width: 100%;
}

.c-anchor-links__mobile-items {
  @include filterWrapperStyles;

  .is-open.can-animate & {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.c-anchor-links__mobile-item {

  a {
    display: block;
    @include filterItemStyles;
  }
}
  • URL: /components/raw/anchor-links/anchor-links.scss
  • Filesystem Path: patterns\06-components\anchor-links\anchor-links.scss
  • Size: 1.6 KB

No notes defined.