CSS标签导航

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:

文件夹选项卡数组可以用作某些站点的导航隐喻。 标签的创建相对简单：基本的HTML标记将是我之前使用过的导航列表 ：

<nav id="tabbed-navigation">
	<a href="#">Home</a>
	<a href="#">About Us</a>
	<a href="#" id="forefront">Products</a>
	<a href="#">Contact</a>
	<a href="#">Your Privacy</a>
</ul>

We’ll set the links side by side with a slight curve on the top corners using border-radius, and supply a linear-gradient and box-shadow, as each tab will eventually overlap slightly:

我们将使用border-radius在顶部的角上并排设置一条带有轻微曲线的链接，并提供linear-gradient和box-shadow ，因为每个选项卡最终都会稍微重叠：

nav#tab-navigation a {
	font-family: Avenir, Helvetica, sans-serif;
	display: inline-block;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	padding: 0.8rem 2.6rem 2rem 2.6rem;
	border: 1px solid #777;
	border-radius: 5px 5px 0 0;
	background: linear-gradient(#dfc891, #776c51);
	box-shadow: 0 0 15px rgba(0,0,0,0.5);
	letter-spacing: .15rem;
	text-shadow: 0 1px 0 #000;
	font-size: 1.4rem;
	transition: 0.2s transform linear;
}

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.

我添加了一点text-shadow来将链接文本与背景分开； 我们将在稍后添加UI悬停效果的transition 。

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:

我在链接的底部设置了2rem的padding ，以使它们特别高； 我将通过设置overflow: hidden和包含的<nav>元素的设置height来隐藏多余的内容：

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-content to set the <nav> element’s width from the collective dimensions of its child elements.

我还使用了鲜为人知的可悲width: max-content从子元素的集合尺寸中设置<nav>元素的宽度。

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:

接下来，我们要重叠选项卡。 这很简单：我们将对所有元素(第一个元素除外)应用负的margin-left值：

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:

重叠的标签将按照链接在代码中出现的顺序进行堆叠。 为了指示用户所在的页面，我们将使用最前列 ID将一个选项卡推到前台并向上推。 最前端将具有以下position: relative (因为我们要“微调”链接而不干扰其他链接)和z-index以可视方式将其推到前景：

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:

接下来，我们要对选项卡上的悬停效果进行动画处理。 我们将通过一个简单的转换来做到这一点。 我还将为无法检测到:hover触摸屏设备添加a:focus选择器：

nav#tab-navigation a:hover, nav#tab-navigation a:focus { 
		transform: translateY(-.4rem);
	}

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:

您会发现一个小问题：由于CSS动画的假设，第一个链接在过渡期间将“弹出”在其他链接之上。 我们可以通过确保其他链接在堆栈中始终“较高”来解决此问题，并返回到我们之前使用的选择模式：

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.

唯一剩下的问题就是效率：为了更改前台哪个标签积极地指示我们所在的页面，我们需要将id移到每个页面上的相应标签上。 尽管可以确定，但是这很耗时，尤其是当我们添加更多页面时。 这也意味着我们不能将导航用作服务器端include 。

In past articles I have shown how to get around this issue by using PHP to create “self-aware pages”; as a different solution, I also show the same idea implemented in a more elegant fashion with JavaScript.

在过去的文章中，我已经展示了如何通过使用PHP创建“自我感知页面”来解决这个问题。 作为不同的解决方案，我还展示了使用JavaScript以更优雅的方式实现的相同想法 。

翻译自: https://thenewcode.com/463/CSS-Tab-Navigation