纯css导航下拉

The appearence of “tab” navigation is relatively easy to create, but making a tab bring up its own content without moving to a new page is more complex, especially if you want to activate it on click, rather than hover… particularly if you are determined to only use CSS. Thankfully, the :target selector can do much of the work for us.

“标签”导航的出现相对容易创建，但是要使标签在不移动到新页面的情况下显示其自身的内容则更为复杂，尤其是如果您想单击而不是将其悬停激活的话。确定仅使用CSS。 幸运的是， :target选择器可以为我们完成很多工作。

First, let’s create some basic markup. Let’s say we were going to create a series of slides about some of Saturn’s moons: Titan, Mimas, Enceladus and Iapetus. I’ll use markup similar to the simple CSS image gallery: the names of the moons are clickable definition terms, and the explanation of each is a definition declaration.

首先，让我们创建一些基本标记。 假设我们要制作一系列有关土星卫星的幻灯片：土卫六，Mimas，土卫二和Iapetus。 我将使用类似于简单CSS图像库的标记：卫星名称是可单击的定义术语，每个术语的解释都是定义声明。

<dl id="moons"><dt><a href="#titan">Titan</a><dd id="titan"><img src="titan.jpg" alt="Titan"><p>Saturn's largest moon is unique in several respects.</dd><dt><a href="#iapetus">Iapetus</a><dd id="iapetus"><img src="iapetus.jpg" alt="Iapetus"><p>Iapetus is the third largest moon of Saturn.</p></dd>
</dl>

Note the id value on each <dd>, and the href links within each <dt>. These go to anchor links, just as we have explored in the past. Next, the associated CSS to produce the basic appearance of the tabs: I've written this in Sass, but vanilla CSS would work too:

注意每个<dd>,上的id值<dd>,以及每个<dt>内的href链接。 正如我们过去所探讨的那样，这些链接用于锚定链接 。 接下来，使用关联CSS来生成选项卡的基本外观：我已经用Sass编写了此代码，但是普通CSS也可以使用：

$bgcolor: #222;
* {box-sizing: border-box;
}
body {margin: 3rem;background: $bgcolor;
}
dl#moons { line-height: 1.5;font-family: Avenir, sans-serif;position: relative;width: 50rem;dt { display: inline-block; margin-right: .5rem;position: relative;z-index: 5;a { text-decoration: none; padding: 1rem;border: 1px solid black;background: #555;display: block;min-width: 8rem;font-weight: 600;border-radius: 10px 10px 0 0;&:hover, &:focus { background: #222;}&:visited {background: #aaa;}}}

Then the <dd> elements and their content. I've added a border-top to the <dd> elements to provide the impression that the tabs are positioned above the <dd> tags; in reality, they both start at the same point. This is done to counteract the jump behavior associated with anchor links: without it, the page would scroll instantly to the position of the associated panels after a click, obscuring the tabs. As it is, activated tabs will always be forced to the very top of the page.

然后是<dd>元素及其内容。 我在<dd>元素上添加了一个border-top以使选项卡位于<dd>标记上方； 实际上，它们都是从同一点开始的。 这样做是为了抵消与锚链接相关联的跳转行为：没有它，页面将在单击后立即滚动到关联面板的位置，从而使选项卡模糊。 实际上，激活的选项卡将始终被强制到页面的顶部。

I've also provided the images with a circle wrap to make the best use of the limited space inside each info window.

我还为图像提供了一个圆圈包装，以充分利用每个信息窗口内的有限空间。

dd { position: absolute; left: 0; margin-left: 0;top: 0;padding: 2rem 1rem 1rem 1rem;border-top: 3.6rem solid $bgcolor;width: 100%;background: #000;color: white;opacity: 0;transition: .3s opacity;a { color: white;}img { max-width: 100%; float: right; margin: 1rem;shape-outside: circle();}}
}

target makes CSS aware of the relationship between elements with id attributes and links to those elements. One opportunity this affords us to change the state of the target when the associated link is clicked on: in this case, its z-index and opacity:

target使CSS知道具有id属性的元素之间以及与这些元素的链接之间的关系。 一个机会使我们可以在单击关联的链接时更改目标的状态：在这种情况下，它的z-index和opacity ：

dd#titan:target, dd#iapetus:target, dd#enceladus:target,dd#mimas:target { z-index: 4; opacity: 1;
}

We could make any of the information windows appear by default by sharing the appropriate anchor in a URL; for example: http://thenewcode.com/291/Pure-CSS-Tab-Navigation#iapetus

通过在URL中共享适当的锚点，我们可以使任何信息窗口默认显示。 例如： http : //thenewcode.com/291/Pure-CSS-Tab-Navigation#iapetus

Alternatively, we could use JavaScript to activate one of the tabs by default:

另外，我们可以默认使用JavaScript激活选项卡之一：

document.querySelector('a[href="#titan"]').click();

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

纯css导航下拉