HashTabber

HashTabber is a simple JavaScript plugin for tabbed navigation with hash-driven links.

The plugin was featured i.a. on:

In some free time I built a simple logo based on the shapes of “#” and “T” characters and the tabbed interface itself. Visually, I dressed it in jade green and some warmer grays.

logo

palette

Modus operandi of the script is more precise and technically-wise described on the website of the project, but in short it can be described by the following diagram:

  1. You activate the tab (a simple hash link)
  2. Ther browser’s address changes
  3. The script waits for change of the address, from where it gets the name of the new tab
  4. The script pairs the tab with its content
  5. The script turns off the old tab with content and turns on the new one

This may sound banal, but thanks to the hash links, the page doesn’t reload and you can change tabs from the outside. And the whole functionality is minimalistic, slick and ready for use with very low requirements.

diagram

The page didn’t need practically nothing but some smooth typography – I used Source Sans Pro from Paul Hunt, a slim modular scale and a few clever media queries for mobile devices.

website-1

website-2

website-3

website-4

In addition, the entire script is availabe in the Public Domain, i.e. for free.