Eiche fam

When my browser of choice got updated, it announced the new search engine it’s using: Ecosia. As I was reading up on what they’re all about, I came across their about page, which features this nifty dot navigation on the side.

It’s not the first time I’ve seen this; Google Play Music’s redesign did it, and Codyhouse wrote an article about it.

My first thought was that’s neat, followed closely by I should build that.

It’s not the first time I’ve been inspired by something else on the web. I built the Hero Gallery component for Aesop Story Engine based on a (now nonexistent) landing page on apple.com.

It wouldn’t make sense to add the functionality for vertical navigation directly to Cover2; that’s plugin territory. Fortunately, there’s already a plugin I use for enhancing content: the aforementioned Aesop Story Engine.

ASE has a component called Timeline which I felt would be a perfect fit. It already has support for providing jump links, so most of my work would be in regard to presentation. (ASE also provides jump links in their Chapters component, but I’m already doing something else with that functionality.)

The default appearance of ASE’s Timeline component is horizontal, placed at the bottom of the page, as seen on their Developers page:

I can override the styles, but the plugin doesn’t let me provide markup of my own. As a result, I had to approach things a little differently. This is an example of markup that I would write, if I had total control:

<ul class="timeline">
  <li class="timeline__item">
    <a href="..." class="timeline__link">
      <span class="timeline__tooltip">
        Timeline point
      </span>
      <span class="timeline__bullet">
        <img src="...">
      </span>
    </a>
  </li>
</ul>

I would provide a wrapper for each element, so I wouldn’t have to resort to using pseudo-elements, and I would probably use a graphic for the bullet point (probably in the form of an SVG) instead of making a CSS shape. (Note the BEM class syntax, of which I am a huge fan.)

This, on the other hand, is an example of the markup that ASE provides:

<div class="aesop-timeline">
  <nav class="scroll-nav" role="navigation">
    <div class="scroll-nav__wrapper">
      <ol class="scroll-nav__list">
        <li class="scroll-nav__item">
          <a href="#scrollNav-1" class="scroll-nav__link">
            Timeline point
          </a>
        </li>
      </ol>
    </div>
  </nav>
</div>

We have plenty of wrappers, but not much to work with on the link itself, especially since I wanted two elements: the bullet point, which is always visible; and the text, which is presented as a tooltip when the bullet point is hovered over.

I ended up using a pseudo-element to make .scroll-nav__item (the list item) appear as a bullet point, with scroll-nav__link (the actual link) serving as the tooltip. (Another pseudo-element on the link serves as the tooltip’s little bubble arrow.) A little extra JavaScript passes the click event on the list element to the link, allowing for a larger click area, and now we have vertical navigation using ASE’s Timeline component.