如何在响应设计中使用下拉导航菜单？

没有一个正确的答案，但我想分享一些建议，并看几个例子来帮助您思考可能的解决方案，例如：

多层跌落

滑动板

隐藏菜单链接

无可否认，现代网站需要响应。这只是时代的标志，也证明了互联网上的变化是多么的迅速。

在过去，我们曾报道过响应性航行趋势但还没有详细介绍下拉导航。

这也被称为分层导航，其中一个链接有一个下拉到子链接.这些在桌面上是有意义的，鼠标可以在菜单之间悬停和移动，但是你应该如何处理移动设备上的多层下拉菜单呢？

多层跌落

第一个解决方案是保持您的分层下拉，但只是重组他们的响应菜单。

由于大多数较小的屏幕都是垂直的，所以通常有三条线。汉堡包菜单代替简单的导航块。但是，“滑出”菜单可以使用下拉链接，这些链接也可以向下滑动。例如，喜剧中心网站使用向下箭头指示下拉链接。

但是由于移动屏幕没有足够的空间，这些下拉菜单只会延长菜单的高度。

子链接是从左边推入的，它们也有稍微小一些的文本。这使得在快速浏览时很容易识别哪些链接是分层的。

但是这些小的向下箭头是一种通用的视觉指示器，可以方便地浏览一眼。

另一个例子可以在TutsPlus站点使用正负图标。

正负图标是大多数人都认识到的另一个普遍现象。它仍然代表相同的活动，但它是一个独立的链接，从主导航文本。

伟大的航行也是创造性导航因此，超越规范的限制是没有错的。

计算机世界实际上，将其下拉列表隐藏在较小的屏幕上，迫使用户浏览顶级类别。

这可能不是规范，甚至不是最容易获得的解决办法。但是，这些较小的菜单链接真的有必要吗？

如果你的网站像博客一样工作，那么你就可以通过隐藏下拉链接来逃避。

尝试不同的想法，看看什么是最好的。每个网站是不同的，所以你必须衡量每一个项目本身。

滑动板

所有响应菜单通常都有“滑动”动画。但是当我说滑动面板的时候，我说的是分层导航菜单滑进框架。

这是一个我个人不喜欢的技术，但它可以有效地与真正的大菜单。

看一下PC Mag在您的手机或调整大小的浏览器窗口菜单。菜单从顶部滑落，看起来像是页面链接。但如果你点击任何，你会得到一个滑动菜单从侧面与内部链接。

这将创建一个分层系统，您在任何给定时间都只能访问某些链接。屏幕完全被一个菜单接管，内部菜单在顶部有一个小的“后退”按钮。

我不喜欢的是在菜单之间来回来回的点击次数。

但我喜欢这有多简单。它只是起作用，任何人都不应该有任何困难，通过这个菜单。

这个OARS网站是带有箭头图标的菜单链接的另一个很好的例子；箭头显示哪些链接有子菜单。后退按钮出现在左上角，你可以关闭菜单从任何屏幕的X图标在右上角。

这看起来好像没什么，但是那些小小的临时演员给我们带来了很大的不同。可用性.

为用户考虑一些小的调整和问题点。他们似乎不可能解决，但网页设计师是伟大的提出UI黑客。

看一下PlayStation站点，它使用在主菜单顶部分层的滑动菜单。

每当你点击一个链接，子链接就会从右边出现，覆盖菜单的大部分内容。但是你仍然可以访问图标，这样你就可以用一个点击在主菜单链接之间切换。

此外，蓝色幻灯片菜单是可拖动的，因此移动用户可以留出额外的屏幕空间，以便在需要时读取标签。

这需要很多额外的工作，但可用性的好处是惊人的。

隐藏菜单链接

最后一个也是最简单的选项是隐藏所有的子菜单链接。我在前面的ComputerWorld中简要地提到了这一点，因为他们有一个很好的例子，这个站点总是显示一个滑动菜单。

但是对于其他博客，比如玛莎可，您可能有下拉菜单在一个完整的显示器上隐藏在手机上。

牡丹江web制作只要内部联系没有多大关系，这个策略就没什么问题。我不会保证每个博客都有这样的策略；但是，如果你试图将一堆链接挤进标题中，这确实是有意义的。

当你离开博客，进入公司/商业网站时，事情会变得更加棘手。

主办公司数字海洋对每个菜单链接使用一组下拉列表。但在他们的移动响应布局，他们只是有一个滑动导航下降内部链接。

隐藏这些其他资源限制了对站点的访问。但它也使浏览变得更容易和更直接。

在为较小的页面设计时，您总是会找到折衷的方法，所以您必须用拳头来处理。如果你的下拉链接真的没有必要，那么你可以隐藏内部链接。

哪种款式最好？

最终，没有“最好的”风格作为一个整体。你需要衡量每个网页项目，并决定哪一个响应导航最适合。

看一看本研究并试图遵循他们推荐的15条准则。它们并不适用于每个导航，但它们是导致UI成功的概括。

牡丹江web制作选择一个多层次的导航设计也可以归结为个人的喜好。如果你个人喜欢一种导航方式而不是另一种导航方式，那么你就会一直走这条路线。

做任何对每个项目最有效的事情，并愿意检查。交替下降因为你永远不知道在现实世界中你会发现什么样的技术。