响应式导航_检查响应式导航模式

响应式导航

随着网页设计师创建越来越多的响应式网站，我们处理全球导航的方式不断出现。这是专注于如何开发其中一些模式的系列文章中的第一篇。这篇文章将涵盖三种响应式导航模式；顶部导航，优先级和选择菜单。

几乎每个响应站点都必须处理的特定问题之一是如何使用全局导航。舒适地适合于宽屏的导航栏或菜单在小屏幕上容易变得狭窄。由于世界各地的网页设计师进行了实验，因此出现了一系列解决方案来解决此问题。

布拉德弗罗斯特（Brad Frost）收集了许多这些响应式导航模式，然后收集了一些更复杂的模式。这篇文章是一系列探讨这些模式的开始，特别是如何自己开发它们，而不是依靠复制粘贴方法。我们将研究三种类似的模式，并在以后的文章中考虑其他模式组。

模式

响应式导航的基本问题是空间之一。在宽屏上，我们有足够的水平空间可以使用，但是在智能手机和类似的小型设备上却并非如此。我们可以在这些小型设备上将水平空间转换为垂直空间，但这会将内容推到页面的下方。这些模式旨在在限制使用的垂直空间的同时保持导航可用。

我们在这篇文章中将看到的3种模式是：

顶部导航（不执行任何操作） -将菜单项保持在最低限度，并使用CSS调整导航。
优先级 —优先考虑菜单项以根据可用的屏幕宽度显示和隐藏其显示。
选择菜单 —将导航栏转换为可用空间有限的选择菜单。

这些模式中的每一个都试图以不同的方式解决空间问题。

该演示显示了所有三种模式，以及选择菜单模式的变体。在下面，我将逐一介绍，尽管我将代码限制在每个页面的标题内，以使事情更简单。

顶级导航（不执行任何操作）模式

顶部导航模式可能是最常用的方法。窄屏和宽屏之间的变化很小，因此绰号“什么也不做”。通常，所需要做的只是对CSS进行一些细微调整，以使此模式正常工作。

方法：该演示有一个非常简单的标题。它包括一个徽标和一些链接，这些链接构成了我们的全球导航。我们的挑战是，一旦有足够的可用空间，便要在位于徽标下方的导航与向右上移的导航之间过渡。

步骤1：HTML

标记非常简单。在html5标头元素中，我们有一个徽标和用于导航的无序链接列表。容器div是允许标头的背景从一个边缘延伸到另一个边缘，同时将内容保持在最大宽度居中的一种方法。它的工作原理与将整个代码包装在一个容器中相同，但在包含和不包含的内容方面具有更大的灵活性。

您可能想知道的一件事是在菜单标签中使用了不间断空格。当浏览器调整大小时，菜单项将希望在第一行和第二行之间跳转。不间断的空格确保完整的标签始终保持在一行上，避免了丑陋的自动换行。

<header>
<div class="container">
<img class="logo" src="data:images/logo.png" width="252" height="46" />
<nav>
<ul id="demo-nav">
<li><a href="">Back to Post</a></li>
<li class="current"><a href="">Top-Nav</a></li>
<li><a href="">Priority</a></li>
<li><a href="">Select&nbsp;Menu</a></li>
<li><a href="">Select&nbsp;Menu&nbsp;JS</a></li>
</ul>
</nav>
</div>
</header>

第2步：默认CSS

标头和徽标的默认CSS也很简单。标头本身具有一些颜色样式，底部具有一些填充。在小屏幕上，我们将在徽标下方找到导航，并将两者居中。我给徽标本身留了一定的余地，以便在上方和下方添加一些空间。

header {
color:#eee;
background: #2b2726;
padding-bottom: 1em;
text-align: center;
}
.logo {
margin: 1.25em 0;
width: 200px;
}

同样，导航的默认CSS非常简单。如果您曾经编码过导航栏，那么它应该看起来很熟悉。导航栏中经常包含但在此处缺少的一件事是链接上的浮动。由于默认情况下我们将所有内容居中，因此我们将保存浮点数，直到需要它为止。

#demo-nav {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
#demo-nav li {
display: inline;
}
#demo-nav a {
color:#fff;
padding: 0.75em;
text-decoration: none;
line-height: 2.5;
}
#demo-nav a:hover {
text-decoration: underline;
}

上面的关键是链接之间的间距。没有足够的空间，各个链接将很难被窃听。太多的空间，您的导航将下降到多余的一行，并占用更多的垂直空间。我所做的是寻求一种折衷方案，该方案允许在链接之间保持尽可能大的空间，同时将链接的行数最多保持两个。

使用上面的样式，导航应该看起来像您在下面看到的那样。屏幕截图是在我的浏览器打开为320px的情况下拍摄的。

步骤3：媒体查询

媒体查询的前几对是调整链接之间的空间。我们没有足够的空间来向上或向右移动导航，但是在空间允许的情况下，我们可以调整链接的填充。没有对与错的金额。我只是玩弄浏览器的宽度，并在各个点进行了调整。

在42.5em（680像素）处，有足够的空间容纳一行中的所有链接，因此我减少了左右填充以将它们全部容纳在一行中。

@media screen and (min-width: 30em) {
#demo-nav a {padding: 0.75em 1.75em;}
}
@media screen and (min-width: 42.5em) {
#demo-nav a {padding: 0.75em 1.1em;}
}

当屏幕达到52.5em（840px）左右时，便有足够的空间将导航栏向上移动到徽标的右侧。首先，我们将徽标浮动到左侧。标头底部不再需要填充，因此我们将其删除。

我们将导航栏向右浮动，并稍微减少链接的左右填充，然后导航会跳入到位。由于我们将其浮动，我在最后一个链接上删除了正确的填充。最后一项更改是将链接设置为显示为块级元素，以增加可点击区域的大小，因此，现在需要浮动链接。

@media screen and (min-width: 52.5em) {
.logo {float: left;}
header {padding-bottom: 0;}
#demo-nav {float: right;}
#demo-nav a {padding: 1.25em 0.75em; display: block; float: left}
#demo-nav  li:last-child a {padding-right: 0;}
}

最后的两个更改再次只是为了调整链接之间的间距，而这些更改更多地是根据我的眼睛而定。

@media screen and (min-width: 64em) {
#demo-nav a {padding: 1.5em;}
}
@media screen and (min-width: 75em) {
#demo-nav a {padding: 1em 2.25em; line-height: 3em}
}

提示

这是一个非常简单的模式，这就是为什么您看到它使用如此频繁的原因。根据您的设计，除了在这里和那里进行一些调整之外，您实际上可能不需要进行任何更改。

当菜单项的数量有限时，此模式最有效。我在这里用了五个。六个可能会工作。四个可能效果更好。

要注意的主要事情是确保在窄屏上的链接周围留有足够的空间，以便可以选择每个链接。请记住，您不会用精确的鼠标来选择手机。您将使用不那么精确的手指。

要记住的另一件事是，链接标签将希望在某些宽度处折断线。在这里，我使用了一个不间断的空间来防止这种情况发生，这不一定是理想的解决方案。

例子

下面的网站都使用top-nav模式

以诺的炸鱼和薯条
尘土飞扬的弹药筒
西耶洛
坚固

优先模式

当导航中只有几个链接时，顶部导航模式可以正常工作。有时您不能将菜单项的数量减少到四个或五个，并且模式会崩溃。最终，在最小的屏幕上需要太多的垂直空间。

但是，尽管您可能需要更多链接，但有些链接可能比其他链接更重要。这就是优先级模式的用处。其想法是通过菜单项上的类为链接指定优先级。

在最宽的屏幕上，显示所有链接。随着浏览器的变小，最低优先级的链接将隐藏在“更多”链接的后面。随着浏览器变得越来越小，链接的下一层被隐藏了。在最小的屏幕上，您使用最少的垂直空间，直到访客要求“更多”链接。

方法：演示再次具有一个简单的标题。这次它包含更多链接，因此我们将始终保持导航在标题下方。在将菜单从小屏幕转换为宽屏方面，我们面临两个单独的挑战。

默认显示和隐藏一些链接
根据要求显示和隐藏一些链接

步骤1：HTML

html类似于top-nav模式。区别在于附加链接以及我们将用于显示和隐藏其他链接的“更多”和“更少”链接。还包括为每个列表项提供的优先级类别（alpha，beta，gamma）以及显示更多和显示更少的类。

<header>
<div class="container">
<img class="logo" src="data:images/logo.png" width="252" height="46" />
<nav>
<ul id="demo-nav">
<li class="alpha"><a href="">Back to Post</a></li>
<li class="alpha"><a href="">Top-Nav</a></li>
<li class="current alpha"><a href="">Priority</a></li>
<li class="alpha"><a href="">Select Menu</a></li>
<li class="beta"><a href="">Select Menu JS</a></li>
<li class="beta"><a href="">Beta Link</a></li>
<li class="gamma"><a href="">Gamma Link</a></li>
<li class="gamma"><a href="">Gamma Link</a></li>
<li class="show-more"><a href="#more">More</a></li>
<li class="show-less"><a href="#">Less</a></li>
</ul>
</nav>
</div>
</header>

第2步：默认CSS

默认样式与上述top-nav模式的默认样式相同，因此在此不再赘述。例外是需要显示和隐藏链接。分为两个部分。

首先，我们只想在最小的屏幕上显示alpha链接和“更多”链接，因此我们将其他链接设置为display: none 。

#demo-nav li.beta,
#demo-nav li.gamma,
#demo-nav li.show-less
{display: none;}

其次，我们需要显示和隐藏其他优先级链接，并在单击其中任何一个时交换“更多”和“较少”链接。为此，我们将利用：target伪选择器。如果您不熟悉此选择器，则类似于命名锚的工作方式。

当URL中的哈希值和元素上的ID相同时，：target选择器匹配。换句话说，如果您具有URL domain.com＃more，则：target将匹配添加了id="more"任何元素。

您可能已经在上面的html中注意到，“更多”链接的href为#more。单击它将带我们进入添加了#more哈希的同一页面。我上面没有显示的是页面上的html元素。

<html lang="en" id="more">

单击更多将使我们可以使用：target伪选择器来定位html标签，因此可以使用html标签中包含的所有内容。我们可以使用以下内容显示隐藏的链接并隐藏“更多”链接。

:target #demo-nav li.beta,
:target #demo-nav li.gamma,
:target #demo-nav li.show-less
{display: inline;}
:target #demo-nav li.show-more {
display: none;
}

当有人单击“较少”链接时，我们将删除哈希，这些：target选择器将不再生效。

注意：在将id="more"到html标记时，DOM中的任何高级元素都可以使用。它只需要包含您最终要选择的所有元素。

步骤3：媒体查询

就像在上层导航示例中所做的那样，我设置了一些媒体查询，其中所有更改都是链接之间的填充。我还从将所有内容居中切换为将徽标和导航栏都浮动到左侧，尽管对于这种模式，我将导航保持在徽标下方。

尽管您可以在优先级模式演示页面上看到它，但我不会提供所有这些代码。相反，让我们着重于揭示较低优先级的链接，这很简单。我们需要做的就是显示链接的每个优先级，因为有足够的空间来显示它们可用。我们将首先显示beta链接，然后显示gamma。

@media screen and (min-width: 48em) {
#demo-nav li.beta {display: inline;}
}
@media screen and (min-width: 75em) {
#demo-nav li.gamma {display: inline;}
#demo-nav li.show-more,
:target #demo-nav li.show-less
{display: none;}
}

一旦可以显示所有3个优先级的链接，我们就不再需要显示“更少”或“更多”链接，因此我们将其完全关闭。

提示

在所有模式中，优先级模式是您可能最少使用的模式，但是在某些情况下它可能是一个很好的解决方案。它有一些缺点。对于一个：target伪选择器在IE8及以下版本中不起作用。 IE6和IE7很容易放弃，但是我认为我们实际上需要更长的时间来支持IE8。您可以使用JavaScript解决方案替换上面的：target方法，以显示和隐藏IE8的链接。

更大的问题是，越来越多的链接之间的切换可能会有些麻烦。在此示例中，我将这些链接放在最后，单击一个将另一个链接放置在其他位置。他们觉得应该就地交换，但他们不应该交换。

您可以通过以下方式进行补偿：将链接放在列表的第一位，或者使用多对链接，它们始终显示在优先级链接显示之后和默认情况下隐藏的链接之前，但都不是最优雅的解决方案。

例子

以下两个示例是演示，最后一个示例是在现场站点上使用的这种模式的示例。

“优先”方法（演示）
响应式Navbar演示
雷电游戏

选择菜单模式

选择菜单模式是解决小屏幕链接过多的另一种方法，但是可以通过将链接列表转换为选择框来解决。优点是选择框将占用较少的垂直空间。缺点是默认情况下隐藏全局导航链接。

另一个缺点是您需要在html中编码两种类型的导航，因为无法使选择看起来像列表，反之亦然。这意味着您需要维护2个菜单，如果您拥有多个链接，这将是一件很麻烦的事情。我将在某种程度上使用此模式的另一个版本，其中使用javascript创建菜单之一。

方法：我们将从两个html菜单开始，一个是用于top-nav模式的相同无序列表，另一个是select元素。如果空间允许，我们将在媒体查询中从一个过渡到另一个。我们还需要添加一些JavaScript，因此选择一个选项会将我们带到新页面。

步骤1：HTML

菜单的无序列表版本没有新内容。新功能是增加了选择框和相应的选项。 href属性的值将移动到option元素的value属性。

<div id="header">
<div class="container">
<img class="logo" src="data:images/logo.png" width="252" height="46" />
<nav>
<ul id="demo-nav">
<li><a href="">Back to Post</a></li>
<li><a href="top-nav.html">Top-Nav</a></li>
<li><a href="priority.html">Priority</a></li>
<li class="current"><a href="select.html">Select Menu</a></li>
<li><a href="select-js.html">Select Menu JS</a></li>
</ul>
</nav>
<select id="select-menu">
<option value="" selected="selected">Select</option>
<option value="">Back to Post</option>
<option value="top-nav.html">Top-Nav</option>
<option value="priority.html">Priority</option>
<option value="select.html">Select Menu</option>
<option value="select-js.html">Select Menu JS</option>
</select>
</div>
</div>

第2步：默认CSS

通用默认样式与上面显示的相同，因此在此不再赘述。对于最小的屏幕，我决定将选择菜单放在徽标下方，并使其居中。给它提供75％的宽度似乎就是所需要的。

#select-menu {
width: 75%;
}

步骤3：媒体查询

媒体查询中CSS再次非常简单。由于选择菜单不会占用很多水平空间，因此我们可以相对快速地将其向上移动到徽标的右侧。

@media screen and (min-width: 30em) {
.logo {float: left;}
#select-menu {
float: right;
clear: none;
width: 40%;
margin-top: 2.25em;
}
#header {padding-bottom: 0; text-align: left;}
}

主要的变化是隐藏选择菜单并显示无序列表菜单，我们可以通过两者的display属性轻松地做到这一点。在可访问性方面，这也是可取的，因为屏幕阅读器仅需要扫描一次导航。在显示无序列表的情况下，我们将其浮动到右侧并调整链接的填充。

@media screen and (min-width: 64em) {
#select-menu {display: none;}
#demo-nav {
display: block;
float: right;
}
#demo-nav a {padding: 1.25em 1.5em;}
#demo-nav li:last-child a {padding-right: 0;}
}

除上述内容外，我还进行了另一处更改，使链接在更宽的屏幕上具有更多填充。

步骤4：一点点Javascript

这种模式确实需要少量的javascript，以便选择菜单中的选项将带我们进入新页面。在这里，我使用了少量的jQuery（在文档的开头包含jQuery之后）。

$(function() {
$("div select").change(function() {
window.location = $(this).find("option:selected").val();
});
});

例子

以下站点均使用选择菜单模式。

橡子独立抵押
灯丝组的演示
维尔贾米·萨尔米宁（Viljami Salminen）
五个简单步骤

选择菜单JS

我在上面提到过，您可以使用javascript创建选择菜单，因此您不必维护两组相同的链接。我将再次使用jQuery从无序列表中创建选择菜单，并从Chris Coyier借来一些代码。

首先，我们创建select并将其附加到我们的nav元素。下一个块将创建“选择”选项，默认情况下将显示它。这不是真的需要。相反，您可能会显示第一个菜单项，或者可能会添加一些代码，因此无论您在哪个页面上，该选项都是默认选中的。

最后一个块从无序列表中获取每个链接，并将url和文本添加到option元素的适当部分。

$(function() {
// Create the dropdown base
$("<select id='select-menu'/>").appendTo("nav");
// Create default option "Select"
$("<option />", {
"selected"  :  "selected",
"value"        :  "",
"text"           :  "Select"
}).appendTo("nav select");
// Populate dropdown with menu items
$("nav a").each(function() {
var el = $(this);
$("<option />", {
"value"  :  el.attr("href"),
"text"     :  el.text()
}).appendTo("nav select");
});

最后，我们以与上述相同的jQuery结尾，以确保这些选项将访问者带到他们选择的页面。

$("nav select").change(function() {
window.location = $(this).find("option:selected").val();
});
});

摘要

这是用于处理响应式导航的三种常见模式。

当您只有几个链接并且除了您决定进行的任何样式更改之外不需要其他任何内容时，top-nav模式最有效。

当您有多个链接时，可以使用优先级模式。它根据可用空间隐藏不同级别的优先链接，并通过:target伪选择器切换链接的显示。

选择菜单模式将无序列表菜单转换为选择菜单，以免占用任何额外的垂直空间。

除了这些以外，还有更多的模式，我们将在本系列的后续文章中介绍它们。谢谢阅读！

翻译自: https://webdesign.tutsplus.com/tutorials/examining-responsive-navigation-patterns--webdesign-9543

响应式导航