检查响应式导航模式_极简慕枫

随着网页设计师创建越来越多的响应式网站，我们处理全球导航的方式不断涌现。这是一系列关于如何开发其中一些模式的帖子中的第一篇。这篇文章将介绍三种响应式导航模式; top-nav，priority和select菜单。

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

杭州高端网站建设收集了许多这些响应式导航模式，然后收集了一些更复杂的模式。这篇文章是探索一系列这些模式的系列的开始，特别是如何自己开发它们，而不是依赖于复制粘贴方法。我们将看看三种类似的模式，并在未来的帖子中考虑其他模式组。

模式

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

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

• Top-Nav（无所事事） - 将菜单项保持在最低限度并使用css来调整导航。

• 优先级 - 根据可用的屏幕宽度优先显示菜单项以显示和隐藏其显示。

• 选择菜单 - 将导航栏转换为可用空间有限的选择菜单。

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

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

Top-Nav（无所事事）模式

top-nav模式可能是最常用的方法。窄屏和宽屏之间的变化很小，因此绰号“什么都不做”。通常所有必要的是对你的CSS进行一些小调整以使这种模式起作用。

方法：该演示有一个非常简单的标题。它包括一个徽标和几个构成我们全球导航的链接。我们的挑战是在标志下方的导航之间进行过渡，并在有足够空间后将其向右移动。

第1步：HTML

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

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

第2步：默认CSS

标题和徽标的默认css也非常简单。标题本身会获得一些颜色样式和底部的一些填充。在小屏幕上，我们将在徽标下方导航，我们将两者都集中在一起。我给了徽标本身一些余地，以便在上方和下方添加一点空间。

再次，导航的默认css非常简单。如果你曾经编写过一个导航栏，它应该看起来很熟悉。导航栏中经常包含的一件事，但在这里丢失，是链接上的浮动。由于我们默认将所有内容都集中在一起，因此我们将保存浮动，直到我们需要它为止。

上面的关键是链接之间的间距。没有足够的空间，单个链接将难以点击。太多的空间，您的导航将下降到额外的线，并占用更多的垂直空间。我所做的就是寻求妥协，允许尽可能多的链接空间，同时保持链接行最多为两个。

使用上面的样式，导航应如下所示。屏幕截图是在我的浏览器打开320px时拍摄的。

第3步：媒体查询

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

在42.5em（680px）处有足够的空间来容纳一条线上的所有链接，因此我减少了左右填充以使它们全部适合一行。

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

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

这最后两个变化再次仅仅是为了调整链接之间的间距，并且这些变化更多地取决于我的眼睛而不是其他任何东西。

提示

这是一个相当简单的模式，这就是为什么你经常使用它的原因。根据您的设计，您可能真的不需要改变任何东西，除了一些调整之外。

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

需要注意的主要事项是确保在窄屏幕上的链接周围留出足够的空间，以便每个都可以选择。请记住，手机不会使用精确的鼠标进行选择。你将使用不那么精确的手指。

另外要记住的是链接标签要在某些宽度上突破线条。在这里，我使用了一个不间断的空间来防止这种情况，这不一定是理想的解决方案。

例子

以下网站都使用了top-nav模式

• 以诺的鱼和薯条

• 尘土飞扬的弹药筒

• Siyelo

• Stury

优先模式

如果导航中只有少量链接，则导航模式可以正常工作。有时您无法将菜单项数减少到四或五，并且模式会中断。最终在最小的屏幕上需要太多的垂直空间。

但是，虽然您可能需要更多链接，但有些链接可能比其他链接更重要。这就是优先模式的用武之地。我们的想法是通过菜单项上的类指定链接的优先级。

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

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

• 默认情况下显示和隐藏一些链接

• 请求时显示和隐藏一些链接

第1步：HTML

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

第2步：默认CSS

默认样式与上面的导航模式的默认样式相同，所以我在此不再重复。例外是需要显示和隐藏链接。这样做有两个部分。

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

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

：目标选择器匹配url中的哈希值和元素上的id相同。换句话说，如果你有url domain.com #more，那么：target将匹配任何已id="more"添加的元素。

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

单击更多将允许我们使用：target伪选择器以及html标记中包含的任何内容来定位html标记。我们可以显示隐藏的链接并隐藏“更多”链接以及以下内容。

当有人点击“less”链接时，我们删除了哈希，这些：目标选择器不再生效。

注意：当我添加id="more"到html标记时，DOM中的任何高级元素都可以工作。它只需要包含您最终想要选择的所有元素。

第3步：媒体查询

正如我在top-nav示例中所做的那样，我设置了一些媒体查询，其中所有更改都是链接之间的填充。我也从中心切换到左侧的徽标和导航栏，但是对于这种模式，我将导航保留在徽标下方。

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

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

提示

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

更大的问题是越来越少的链接之间的切换可能有点刺耳。在这个例子中，我将这些链接放在最后，点击一个链接将另一个链接放在不同的位置。他们觉得他们应该只是换位，但他们不会。

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

例子

以下两个示例是演示，最后一个是在实际站点上使用的此模式的示例。

• “优先”方法（演示）

• 响应式Navbar演示

• 霹雳游戏

选择菜单模式

在选择菜单模式是另一种方式来解决了小屏幕环节过多的问题，但它通过你的链接列表转换成一个选择框这样做。优点是选择框将占用较少的垂直空间。缺点是默认情况下隐藏了全局导航链接。

另一个缺点是您需要在html中对两种类型的导航进行编码，因为无法使选择看起来像列表，反之亦然。这意味着您需要维护2个菜单，如果您有多个链接，这可能会很痛苦。我将使用javascript来创建其中一个菜单。

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

第1步：HTML

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

第2步：默认CSS

一般默认样式与我上面显示的相同，所以我在此不再重复。对于最小的屏幕，我决定放下徽标下方的选择菜单并将其置于中心位置。给它75％的宽度似乎是所需要的。

第3步：媒体查询

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

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

除了上述内容之外，我还做了一个额外的更改，以便在更宽的屏幕上为链接提供更多填充。

第4步：一个小Javascript

这种模式确实需要少量的javascript，因此选择菜单中的选项会将我们带到新页面。在这里，我使用了一小部分jQuery（在文档的头部包含jQuery之后）。

$（function（）{
  $（“div select”）。change（function（）{
    window.location = $（this）.find（“option：selected”）。val（）;
  }）;}）;

选择菜单JS

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

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

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

$（function（）{
  //创建下拉基础
  $（“<select id ='select-menu'/>”）。appendTo（“nav”）;
	
  //创建默认选项“选择”
  $（“<option />”，{
    “已选中”：“已选中”，
    “价值”：“”，
    “text”：“选择”
  }）。appendTo（“nav select”）;
	
  //使用菜单项填充下拉列表
  $（“nav a”）。each（function（）{
    var el = $（this）;
    $（“<option />”，{
    “价值”：el.attr（“href”），
    “text”：el.text（）
  }）。appendTo（“nav select”）;}）;

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

$（“nav select”）。change（function（）{
  window.location = $（this）.find（“option：selected”）。val（）;
  }）;}）;

摘要

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

当你只有几个链接时，top-nav模式效果最好，除了你决定做出的任何风格变化之外，它不需要太多。

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

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

杭州高端网站建设除此之外还有更多模式，我们将在本系列的后续文章中介绍它们。谢谢阅读！