使用CSS的高级导航：水平反向对焦

While searching the web for inspirational navigation ideas to share with my classes, I came across this example at 3point7designs. While it is labeled as an "advanced CSS navigation bar", the reality is that the tutorial uses images and a well-established technique (CSS Sprites) to provide an effect. Looking at it, I realized that the menu bar could be created entirely in CSS, with no images required:

在网上搜索鼓舞人心的导航想法与我的班级分享时，我在3point7designs遇到了这个示例 。 虽然它被标记为“高级CSS导航栏”，但实际情况是，该教程使用图像和一种完善的技术( CSS Sprites )来提供效果。 看着它，我意识到菜单栏可以完全用CSS创建，不需要图像：

From a UI perspective, the navigational construct is interesting: rather than highlighting the user's selection, it blurs out options that are not chosen, leaving the selection in focus. Implemented poorly, this would be the definition of "mystery meat" navigation, but the UI rescued by the fact that the entire navigation bar is in focus when the user's mouse is outside its immediate vicinity, allowing the user to clearly see all the navigational options.

从UI的角度来看，导航结构很有趣：与其突出显示用户的选择，不如将未选择的选项模糊掉，使选择集中。 实施不当，这将是“神秘的肉”导航的定义，但是当用户的鼠标不在其紧邻范围内时，整个导航栏都处于焦点位置，这使UI得以拯救，从而使用户可以清楚地看到所有导航选项。

标记 (Markup)

First, let's establish the basic HTML, which is much the same as our previous examples:

首先，让我们建立基本的HTML ，它与前面的示例非常相似：

<nav id="fuzzy-nav-example">
	<a href="#">Home
		<span>Start Here</span>
	</a>
	<a href="#">About Us
		<span>Our Story</span>
	</a>
	<a href="#">Graphic Design
		<span>Where We Started</span>
	</a>
	<a href="#">Web Design
		<span>Our Passion</span>
	</a>
</nav>

基本CSS (Basic CSS)

#fuzzy-nav-example { 
	background-color: #666;
	padding: 2rem .5rem;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); 
	transition: .3s text-shadow linear;
	font-weight: 400;
	font-family: Avenir, Helvetica, sans-serif;
}
#fuzzy-nav-example a {
	color: #fff;
	text-decoration: none;
	font-size: 1.8rem; padding:.5em;
	border-bottom: none;
	position: relative;
}
#fuzzy-nav-example a:hover { 
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
	opacity: 1;
}

The markup is complicated by the fact that there are sub-headings above each navigational element. The sub-headings require extra markup to be wrapped around them in order to be treated separately via CSS. Then we need to treat the text inside the <span> with CSS:

由于每个导航元素上方都有子标题，因此标记变得很复杂。 子标题需要额外的标记来包裹它们，以便通过CSS进行单独处理。 然后，我们需要使用CSS处理<span>的文本：

#fuzzy-nav-example a span { 
	font-size: 1rem;
	font-weight: 400;
	color: #999;
	display: block;
	text-transform: uppercase;
	position: absolute;
	top: 2rem; 
	left: 5rem;
	width: 10rem;
	line-height: 1.3;
 }

The technique that allows the "reverse-focus" effect to work in the original 3point7design article is the same for this example. Traditionally, most developers think of :hover as a pseudo-class that can only be applied to <a> elements; in reality, :hover can be applied to any element at all.

在原始3point7design文章中，允许“反向聚焦”效果起作用的技术与此示例相同。 传统上，大多数开发人员将:hover视为只能应用于<a>元素的伪类； 实际上， :hover完全可以应用于任何元素。

First, we need to "blur out" all the text in the navigation bar when the user's mouse is anywhere near it:

首先，当用户的鼠标靠近导航栏时，我们需要“模糊化”导航栏中的所有文本：

#fuzzy-nav-example:hover a {
	text-shadow: 0 0 6px #fff;
	opacity: 0.8;
}

The selector for this declaration could be phrased as "when the mouse is over a <nav> element with a role of navigation, do what follows to the <li> elements inside it".

对于此声明选择器可以被表述为“当鼠标在<nav>用元件role的navigation ，做如下的<li>它里面的元件”。

The declaration replaces the text-shadow on <li> content with a white shadow that is not displaced horizontally or vertically, but has a significant amount of blur. At the same time, the opacity of the <li> element is reduced by 20%.

该声明将<li>内容上的text-shadow替换为白色阴影，该阴影不会水平或垂直移动，但是会产生大量的模糊。 同时， <li>元素的不透明度降低了20％。

This same technique can be used to created "glow" effects around text. Please don't do this.

可以使用相同的技术在文本周围创建“发光”效果。 请不要这样做。

Now we have to reverse the blur effect for the specific list item that the user's mouse happens to be over:

现在，我们必须反转用户鼠标碰巧结束的特定列表项的模糊效果：

#fuzzy-nav-example a:hover {
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
	opacity: 1;
}

That's all you need: six condensed lines of CSS, that could probably reduced to five with a little work.

这就是您所需要的：六行CSS压缩行，只需做一些工作就可以减少到五行。

翻译自: https://thenewcode.com/100/Advanced-Navigation-With-CSS-Horizontal-Reverse-Focus