An array of folder tabs can work as a navigational metaphor for some sites. Creation of the tabs is relatively straightforward: the basic HTML markup would be the navigational list I’ve used many times before:

I’ve added a tiny bit of text-shadow to separate the link text from the background; the transition is in place for the UI hover effect we will add in a moment.

I’ve set 2rem in padding to the bottom of the links to make them extra high; I'll hide the excess of this by setting overflow: hidden and a set height on the containing <nav> element:

nav#tab-navigation {

padding-top: 2rem; padding-left: 2rem;

overflow: hidden; height: 4rem;

width: max-content;

margin: 0 auto;

}

I’ve also used the woefully little-known width: max-width to set the <nav> element’s width from the collective dimensions of its child elements.

Next, we want to overlap the tabs. That’s easy: we’ll just apply a negative margin-left value to all of them except the first element:

nav#tab-navigation a:nth-child(n+1) {

margin-left: -1.2rem;

}

(Remember this selection pattern, as we’ll return to it later).

The overlapping tabs will stack in the order the links appear in the code. To indicate which page the user is on, we will push one tab to the foreground and upwards by using the forefront id. forefront will have position: relative (since we want to “nudge” the link without disturbing the others) and a z-index to visually push it to the foreground:

a#forefront {

position: relative;

top: -0.2rem;

z-index: 2;

}

Next, we want to animate the hover effect on the tabs. We’ll do so with a simple transform. I’ll also add an a:focus selector for touchscreen devices that are unable to detect :hover:

You’ll find one small issue: the first link will “pop” above the others during its transition, due to the assumptions of CSS animation. We can fix this by ensuring that the other links are always “higher” in the stack, returning to the selection pattern we used earlier:

nav#tab-navigation a:nth-child(n+1) {

margin-left: -1.2rem;

position: relative;

z-index: 2;

}

To make the navigation continue to work at smaller window sizes, I'll reduce some dimensions at an appropriate breakpoint, stacking them on top of each other at the low end:

@media screen and (max-width: 800px) {

nav#tab-navigation { height: 3rem; }

nav#tab-navigation a {

font-size: 1.1rem;

padding: 0.8rem 1.4rem 2rem;

}

}

@media screen and (max-width: 500px) {

nav#tab-navigation { height: auto; }

nav#tab-navigation a { display: block; margin-top: -1rem; }

}

The only remaining issue is one of efficiency: in order to change which tab is actively in the foreground to indicate which page we are on, we would need to move the id onto the appropriate tab on each page. While this is certainty achievable, it is time-consuming, especially if we add more pages. It also means that we could not use the navigation as a server-side include.