18868949445

牡丹江web制作:响应设计中下拉导航菜单的处理

日期:2020-04-17 阅读:149   作者:牡丹江网站设计开发公司

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

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

多层跌落

滑动板

隐藏菜单链接

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

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

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

多层跌落

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

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


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


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

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

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



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

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

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



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

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

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

滑动板

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


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

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


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


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

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


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


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

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

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



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

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

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

隐藏菜单链接

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


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


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

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


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


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

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

哪种款式最好?

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

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

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

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