A Simple Animated Subnav

Front-end development is as an opportunity to bring design details to life. I love working on subtle interface animations and transitions for sites I’m designing, testing to see how well they scale across viewport widths, while doing my best to write simple markup.

Bison Trails Subnav Interaction

I recently added this subnav to the Bison Trails marketing site. We needed an easy way to navigate to individual network pages from the main nav. It’s just scss and basic css animations—no javascript. Here’s the gist of the html:

<div class="nav-item ">
  <a href="/networks" title="Networks">Networks</a>
  <div class="nav-submenu">
    <h2><img src="/icons/checkmark.svg" alt="checkmark">Live</h2>
    <a href="/algorand"><img src="/network/algorand.png" />Algorand</a>
    <a href="/cosmos"><img src="/network/cosmos.png" />Cosmos</a>
    <a href="/decred"><img src="/network/decred.png" />Decred</a>
    <a href="/livepeer"><img src="/network/livepeer.png" />Livepeer</a>
    <a href="/tezos"><img src="/network/tezos.png" />Tezos</a>
    <a href="/networks" class="nav-submenu-view-all">View All</a>

The trick is to reveal the nav-submenu div on hover of the parent nav-item div. If nav-item is relateively positioned, then the subnav can be positioned absolutely within it. The same code can be reused to add a submenu within each nav-item in the main nav.

The network icons slide in with css animations. The position of the icon image, and the padding on the containing link, have two states.

  • The default state sets the icon’s left margin to be -20px. The overflow:hidden; line in the .nav-submenu class means these icons won’t be visible.

  • The hover state for links within the submenu, moves the icon to a position where it is visible and adjusts the padding of the text in the link accordingly, so the whole row looks like it’s sliding together to the right as the icon appears.

I also added opacity as a pararmeter that changes, to enhance the animated transition. The same idea and scss approach is applied to the last “view all” link, but a pseudo element is added to contain the → character that appears on hover.