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

有没有一个正确的答案，但我想分享一些技巧，看看几个例子来帮助你考虑可能的解决方案，如：

• 多层次的下拉菜单

• 滑动板

• 隐藏菜单的链接

不可否认，现代网站需要作出反应。这只是那个时代的一个标志，证明了如何在互联网上迅速改变。

在过去，我们已经覆盖响应式导航的发展趋势但还没有更详细的关于下拉式导航。

这也被称为分层导航，在哪一个环节有一个下拉菜单的子链接。这些道理在桌面，鼠标悬停菜单之间移动，但你应该如何处理多层下拉菜单的移动设备？

多层次的下拉菜单

第一个解决方案是让你的层次的下拉菜单，但只是调整为响应菜单。

由于大多数小屏幕是垂直的，你经常会有一三条汉堡菜单在一个简单的导航块的地方。但滑出菜单可以使用下拉列表的链接，也滑下来。例如，在喜剧中心的网站使用向下箭头指示下拉链接。

但由于手机屏幕没有太多的房间，这些下拉菜单只加长菜单的高度。

子链接推从左到右，也有较小的文本。这使得它很容易辨认的链接浏览时快速分层。

但小向下箭头是通用的视觉指标，便于浏览一目了然。

另一个例子可以发现在tutsplus网站使用加号和减号图标

加/减图标是另一个普遍的大多数人承认。它仍然是相同的活动，但它是从主导航文本的一个单独的链接。

大航海也创新导航，所以有推限制超出规范没有错。

计算机世界其实隐藏他们的下拉菜单在小屏幕上，强迫用户浏览顶层类。

这可能是不规范甚至是方便的解决方法。但这些小菜单链接真的有必要吗？

如果你的网站是一个博客，那么你可能会侥幸隐藏下拉链接。

尝试不同的想法和看到什么是好的。每个站点都是不同的，所以你要衡量每个项目本身。

• 滑动板

所有响应菜单通常有“滑动”的动画。但当我说滑动板，我说的分层导航菜单滑入框。

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

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

这将创建一个分层的系统，你只能访问特定的链接在任何给定的时间。屏幕上是完全接管了一个菜单，菜单和内部都有接近顶部的一个小的“返回”按钮。

我不喜欢的是它需要往返菜单多少水龙头。

但我这样做是多么简单。它只是工作，任何人都不应该有任何的工作通过这个菜单的麻烦。

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

它可能看起来像什么，但那些小演员使一个很大的区别可用性

想想小的调整和问题点的用户。他们似乎不可能解决的，但网页设计师擅长想出界面黑客。

看一看PlayStation网站，采用滑动菜单层顶部的主菜单。

当你点击一个链接，链接出现在右子和覆盖大部分的菜单。但你仍然可以访问的图标，所以你可以翻转主菜单链接之间的一个水龙头。

再加上蓝色的滑动菜单可拖动，使移动用户可以带来额外的屏幕空间如果需要阅读标签。

这将很多额外的工作，但好处是出色的可用性。

• 隐藏菜单的链接

后，简单的选择是把所有的子菜单的链接。我简要地谈到这个早些时候与计算机世界，因为他们有一个网站，总是显示一个滑动菜单有一个很好的例子。

但像其他的博客Mashable你可能会在一个完整的监测，得到隐藏在手机的下拉菜单。

有这一策略，只要内部链接不重要，没有错。我不保证这一战略的每一个博客；然而，它如果你想挤一堆链接到标题的意义。

事情变得棘手时，你离开博客和进入企业/商业网站。

托管公司数字海洋用一束下拉菜单每个菜单的链接。但在他们的移动响应式布局，他们只是有一个滑动导航，液滴内部链接。

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:http://www.dengtar.com/10627.html