Transformer Tabs

Tabs are a simple design pattern in which a row of links are obviously clickable navigation and when a link is clicked, new content is shown.
There are loads of variations of course, but it’s one of the most ubiquitous navigation design patterns out there.
When arranged in a horizontal row, it is also one of the least small-screen-friendly design patterns out there.

The Tabbed View CSS

There is a set of specific CSS for the tabs in each “state” (tabs or dropdown).
You can start “mobile first” by styling the dropdown then using min-width media query to re-arrange to look tabbed or you can start “desktop first” by styling the tabs first then using a max-width media query to re-arrange into a dropdown.
They are so different I don’t see any big advantage either way, but I’d match what you are doing elsewhere on the site.
Desktop first and SCSS for this demo.
.transformer-tabs {
ul {
list-style: none;
padding: 0;
margin: 0;
border-bottom: 3px solid white;
}
li {
display: inline-block;
padding: 0;
vertical-align: bottom;
}
a {
display: inline-block;
color: white;
text-decoration: none;
padding: 0.5rem;
&.active {
border-bottom: 3px solid black;
position: relative;
bottom: -3px;
}
}
}
Handling Tab Clicksc

We’ll use standard event delegation here just to be efficient. Any “click” (which works fine for taps), assuming it’s not the already-active tab and it’s a #hash link, will just pass along that hash to the the changeTab function.
// Delegation
$(document)
.on(“click”, “.transformer-tabs a[href^=’#’]:not(‘.active’)”, function(event) {
Tabs.changeTab(this.hash);
event.preventDefault();
})