显示/隐藏导航

当网页空间非常宝贵时，例如为移动设备设计的场景，您可能希望隐藏某些内容，例如导航区域，只在访问者选择查看时才显示它们。

本文将探讨两种实现此目的的方法：使用 JavaScript，以及利用 CSS :target 伪类。作为额外的附加功能，它包含由 CSS 渐变而非图像制成的“显示”和“隐藏”图标。

这些技术展示了一种简单而有效的方法来提高页面的可用性，并且它们考虑到了可访问性，这些可访问性无论是否进行显示/隐藏操作都很有用。

标记

我们将从一个典型的页面结构开始


<body id="body">

<p><a href="#main_nav" id="access_nav" class="access_aid">Skip to navigation</a></p>

<article>
    <!-- main content here -->
</article>

<nav id="main_nav">
    <ul>
        <li><a href="">This</a></li>
        <li><a href="">That</a></li>
        <li><a href="">The other</a></li>
        <!-- etc. -->
    </ul>
    <p><a href="#body" id="access_top" class="access_aid">Skip to top</a></p>
</nav>

</body>

请注意，我们考虑了“跳至导航”链接和“跳至顶部”链接的可访问性。这对使用非视觉浏览器（如屏幕阅读器）或无法使用指针设备（例如可能使用类似键盘的标签系统）的用户很有益。然而，这些链接在我们显示/隐藏技术中将证明额外有用。

显示和隐藏

直奔主题，暂时保持简单，我们将使页面从可见内容区域和隐藏的导航开始。因此，我们可以从以下 CSS 开始：


#main_nav {
    display: none;
}

很可能您实际上并不希望您的主网站一开始就显示成这样——您通常希望导航对所有人可见。然而，您可以使用媒体查询来特别针对较小屏幕上的隐藏导航。这样，当您为移动设备调整设计时，这种方法就会很好地发挥作用。

JavaScript

切换导航显示和隐藏的最明显方法是使用 **JavaScript**。当单击“跳至导航”链接时，可以使用以下示例将“with_nav”类添加到 body 元素（或从中移除）。


var nav = document.getElementById('access_nav'),
    body = document.body;

nav.addEventListener('click', function(e) {
    body.className = body.className? '' : 'with_nav';
    e.preventDefault();
});

简而言之，这将：

等待 ID 为“access_nav”的元素被单击
将“with_nav”类添加到 body（如果已存在，则移除）
阻止链接的实际目标被访问

然后可以适当地为页面设置样式，基本包括：


.with_nav #main_nav {
    display: block;
}

:target

或者，我们可以完全避免使用 JavaScript。:target 伪类可用于设置页面中 **目标元素** 的样式，即具有 ID（如“blancmange”）并被链接到的 HTML 元素（通过类似“raspberry.html#blancmange”的内容）。在这种情况下，我们的目标元素是 ID 为“main_nav”的元素——我们的主导航区域。因此，当有人选择“跳至导航”链接时，页面将跳转到“main_nav”，然后我们可以以不同的方式设置该框的样式。


#main_nav:target {
    display: block;
}

现在，当选择“跳至导航”时，页面不仅会跳转到突然出现的导航区域，当随后选择“跳至顶部”时，导航将再次消失。这是因为“main_nav”将不再是目标锚点。

样式

您可以通过许多方式利用这一基本概念，但让我们解决一个明显的问题：我们不希望页面跳转到下方，而希望导航在触发链接附近优雅地出现。一个明显的解决方案是简单地将导航定位在页面顶部。


#main_nav {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
}

渐变按钮

我们可以通过多种方式对其进行美化——颜色、留白、阴影、过渡等——但还有最后一项基本问题尚未解决：当提及“显示”和“隐藏”时，可访问性链接“跳至…”的文本意义不大。我们不想更改链接的文本，因为它们对于其原始的可访问性目的来说措辞很好。但是，我们可以用适合我们任务的图标替换它们。因此，为了讲究，我们将通过使用由线性渐变制成的图标来设置我们的显示/隐藏按钮的样式，而不是使用背景图像。

不过，让我们先处理一些基本问题。我们可以使链接更像按钮，并将它们放置在更好的位置。


.access_aid {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 0;
    padding-top: 40px;
    overflow: hidden;
    border: 1px solid #ccc;
}

这将把我们的链接框推到其父框的右上角，将它们变成正方形，将文本移开，并在它们周围添加一个细边框。

现在来创建这些图标。我们将使用一系列水平线来表示“显示”（这是建议“导航”的常见约定），以及一个叉号来表示“隐藏”（这是“关闭”更普遍存在的符号）。


.access_aid {
    /* In addition to the existing declarations... */
    background: white 10px 10px / 20px 20px no-repeat;
}

#access_nav {
    background-image: -webkit-repeating-linear-gradient(#ccc, #ccc 2px, #fff 2px, #fff 4px);
    background-image: repeating-linear-gradient(#ccc, #ccc 2px, #fff 2px, #fff 4px);
}

#access_top {
    background-image: linear-gradient(45deg, transparent 13px, #ccc 13px, #ccc 15px, transparent 0), linear-gradient(-45deg, white 13px, #ccc 13px, #ccc 15px, white 0);
}

分解一下，代码：

将背景位置设置为单个实例，距离左侧 10 像素，距离顶部 10 像素，大小为 20 像素 x 20 像素。
为“显示”按钮添加重复的灰色和白色线性渐变。
为“隐藏”添加两个对角线渐变，分别构成叉号的两条线。

搞定。简单。

实时！

请查看 JavaScript 示例和 target 示例，看看它们是如何协同工作的。其中有一些额外的润饰，但这些示例的目的，与本网站上的所有示例一样，是展示一个精简的概念证明。尽情尝试。