Sticky side navigation

Sticky side navigation

This sticky component helps users keep track of where they are on some of the longer pages of the site. As the user scrolls, the name of the active section changes to bold, and if it includes subsections, those expand into view.

In the Explore section, this component includes an icon-sized US map, where the state or offshore-region page being viewed is highlighted. These function as buttons that link back to the Explore data landing page.

(explain how to use the front matter of .html files to create the structure; i’m not schooled in this)

<!-- <thing class="item-"></thing> -->

<!-- new: sticky_nav -->
<div class="container-right-3 sticky sticky_nav sticky_nav-padded">
    <nav>
        <ul>
            <a href="#" class="sticky_nav-nav_item" data-nav-item="title" data-active="false">Top</a>
            <a href="#production" class="sticky_nav-nav_item" data-nav-item="in-page-link-a" data-active="true">In-page link A</a>
            <ul>
                <a href="#" class="sticky_nav-nav_item sticky_nav-nav_item-sub" data-nav-item="all-production" data-active="false">Sub-item a</a>
                <a href="#" class="sticky_nav-nav_item sticky_nav-nav_item-sub" data-nav-item="federal-production" data-active="false">Sub-item b</a>
            </ul>
            <a href="#" class="sticky_nav-nav_item" data-nav-item="in-page-link-b" data-active="false">In-page link B</a>
            <a href="#" class="sticky_nav-nav_item" data-nav-item="in-page-link-c" data-active="false">In-page link C</a>
            <a href="#" class="sticky_nav-nav_item" data-nav-item="in-page-link-d" data-active="false">In-page link D</a>
        </ul>
    </nav>
</div>

<!-- new: sticky_nav-titled -->
<div class="container-right-3 sticky sticky_nav sticky_nav-padded">
    <h3 class="state-page-nav-title container">
        <div class="nav-title">Page title</div>
    </h3>
    <nav>
        <ul>
            <a href="#" class="sticky_nav-nav_item" data-nav-item="title" data-active="false">Top</a>
            <a href="#production" class="sticky_nav-nav_item" data-nav-item="in-page-link-a" data-active="true">In-page link A</a>
            <ul>
                <a href="#" class="sticky_nav-nav_item sticky_nav-nav_item-sub" data-nav-item="all-production" data-active="false">Sub-item a</a>
                <a href="#" class="sticky_nav-nav_item sticky_nav-nav_item-sub" data-nav-item="federal-production" data-active="false">Sub-item b</a>
            </ul>
            <a href="#" class="sticky_nav-nav_item" data-nav-item="in-page-link-b" data-active="false">In-page link B</a>
            <a href="#" class="sticky_nav-nav_item" data-nav-item="in-page-link-c" data-active="false">In-page link C</a>
            <a href="#" class="sticky_nav-nav_item" data-nav-item="in-page-link-d" data-active="false">In-page link D</a>
        </ul>
    </nav>
</div>

<!-- new: sticky_nav-titled-map, can't get map to show -->
<!-- new: sticky_nav-titled -->
<div class="container-right-3 sticky sticky_nav sticky_nav-padded">
    <h3 class="state-page-nav-title container">
        <div class="nav-title">Page title (add icon map)</div>
    </h3>
    <nav>
        <ul>
            <a href="#" class="sticky_nav-nav_item" data-nav-item="title" data-active="false">Top</a>
            <a href="#production" class="sticky_nav-nav_item" data-nav-item="in-page-link-a" data-active="true">In-page link A</a>
            <ul>
                <a href="#" class="sticky_nav-nav_item sticky_nav-nav_item-sub" data-nav-item="all-production" data-active="false">Sub-item a</a>
                <a href="#" class="sticky_nav-nav_item sticky_nav-nav_item-sub" data-nav-item="federal-production" data-active="false">Sub-item b</a>
            </ul>
            <a href="#" class="sticky_nav-nav_item" data-nav-item="in-page-link-b" data-active="false">In-page link B</a>
            <a href="#" class="sticky_nav-nav_item" data-nav-item="in-page-link-c" data-active="false">In-page link C</a>
            <a href="#" class="sticky_nav-nav_item" data-nav-item="in-page-link-d" data-active="false">In-page link D</a>
        </ul>
    </nav>
</div>
<!-- <thing class="item-{{ className }}">{{ text }}</thing> -->

<!-- new: sticky_nav -->
<div class="container-right-3 sticky sticky_nav sticky_nav-padded">
  <nav>
    <ul>
      <a href="#" class="sticky_nav-nav_item" data-nav-item="title" data-active="false">Top</a>
      <a href="#production" class="sticky_nav-nav_item" data-nav-item="in-page-link-a" data-active="true">In-page link A</a>
      <ul>
          <a href="#" class="sticky_nav-nav_item sticky_nav-nav_item-sub" data-nav-item="all-production" data-active="false">Sub-item a</a>
          <a href="#" class="sticky_nav-nav_item sticky_nav-nav_item-sub" data-nav-item="federal-production" data-active="false">Sub-item b</a>
      </ul>
      <a href="#" class="sticky_nav-nav_item" data-nav-item="in-page-link-b" data-active="false">In-page link B</a>
      <a href="#" class="sticky_nav-nav_item" data-nav-item="in-page-link-c" data-active="false">In-page link C</a>
      <a href="#" class="sticky_nav-nav_item" data-nav-item="in-page-link-d" data-active="false">In-page link D</a>
    </ul>
  </nav>
</div>

<!-- new: sticky_nav-titled -->
<div class="container-right-3 sticky sticky_nav sticky_nav-padded">
  <h3 class="state-page-nav-title container">
    <div class="nav-title">Page title</div>
  </h3>
  <nav>
    <ul>
      <a href="#" class="sticky_nav-nav_item" data-nav-item="title" data-active="false">Top</a>
      <a href="#production" class="sticky_nav-nav_item" data-nav-item="in-page-link-a" data-active="true">In-page link A</a>
      <ul>
          <a href="#" class="sticky_nav-nav_item sticky_nav-nav_item-sub" data-nav-item="all-production" data-active="false">Sub-item a</a>
          <a href="#" class="sticky_nav-nav_item sticky_nav-nav_item-sub" data-nav-item="federal-production" data-active="false">Sub-item b</a>
      </ul>
      <a href="#" class="sticky_nav-nav_item" data-nav-item="in-page-link-b" data-active="false">In-page link B</a>
      <a href="#" class="sticky_nav-nav_item" data-nav-item="in-page-link-c" data-active="false">In-page link C</a>
      <a href="#" class="sticky_nav-nav_item" data-nav-item="in-page-link-d" data-active="false">In-page link D</a>
    </ul>
  </nav>
</div>

<!-- new: sticky_nav-titled-map, can't get map to show -->
<!-- new: sticky_nav-titled -->
<div class="container-right-3 sticky sticky_nav sticky_nav-padded">
  <h3 class="state-page-nav-title container">
    <div class="nav-title">Page title (add icon map)</div>
  </h3>
  <nav>
    <ul>
      <a href="#" class="sticky_nav-nav_item" data-nav-item="title" data-active="false">Top</a>
      <a href="#production" class="sticky_nav-nav_item" data-nav-item="in-page-link-a" data-active="true">In-page link A</a>
      <ul>
          <a href="#" class="sticky_nav-nav_item sticky_nav-nav_item-sub" data-nav-item="all-production" data-active="false">Sub-item a</a>
          <a href="#" class="sticky_nav-nav_item sticky_nav-nav_item-sub" data-nav-item="federal-production" data-active="false">Sub-item b</a>
      </ul>
      <a href="#" class="sticky_nav-nav_item" data-nav-item="in-page-link-b" data-active="false">In-page link B</a>
      <a href="#" class="sticky_nav-nav_item" data-nav-item="in-page-link-c" data-active="false">In-page link C</a>
      <a href="#" class="sticky_nav-nav_item" data-nav-item="in-page-link-d" data-active="false">In-page link D</a>
    </ul>
  </nav>
</div>
/* No context defined for this component. */
  • Handle: @side-navigation
  • Preview:
  • Filesystem Path: components/components/side-navigation/side-navigation.hbs