【问题标题】:How to deal with deep nested navigation menus?如何处理深度嵌套的导航菜单?
【发布时间】:2013-03-14 18:07:47
【问题描述】:

我有一个为客户创建的应用程序,该应用程序在某些时候有 6 个导航级别。基本上我们的用户想要从导航中选择一个项目。这将导致另一组导航,这将导致另一组导航,依此类推,直到您深入到导航属性的 6 级。

有些菜单项没有那么远,有些实际上没有子菜单。

为了使事情变得更加复杂,一些链接需要描述链接所指向的报告。这里需要注意的是,有些描述长达 15 行,基本上是巨大的文本段落。

我已经尝试过悬停打开子菜单,但是当你下降到第六级时,如果你将鼠标移动得太多,你会重新进入并再次将它们树出。

我尝试了 twitter bootstrap 中的手风琴方法,但这不起作用,因为在 6 级菜单上,大部分导航都被推离了页面。

我尝试使用 XML 填充下拉列表,基本上用户将单击链接,“子链接”将出现在带有下拉列表的部分视图中。这种情况一直持续到你处于最低水平。问题是我用完 6 个下拉列表和描述的屏幕空间。

有人对我还能用这样的应用做什么有什么建议吗?

【问题讨论】:

  • 哇...我真的会退后一步,解决主要目标并进行完整的应用程序总结和开发。 6 级导航只会损害您的利润,我无法想象您给最终用户带来的压力。你在做什么需要这么多?
  • 我实际上不是建议这个的人。我们的最终用户希望网站以这种方式布局。如果由我决定,我会有一个类似谷歌的搜索框,用户可以在其中搜索他们正在寻找的任何报告
  • 这可能更适合ux.stackexchange.com

标签: html css jquery navigation


【解决方案1】:

向下钻取菜单 - iPod 风格

一个简单的解决方案是永远不要使用 CSS 样式一次显示一个或多个嵌套,您可以使用许多菜单来实现这一点,而我之前在涉及大量嵌套菜单的设计中使用的示例是使用 iPod 风格的菜单。以look for yourself 为例,它可以显示任意数量的巢穴,同时保持一切易于使用,而且看起来也很酷。

您可以在此处在线查看源代码和其他演示:jQuery iPod style and flyout menus,如果您使用 WordPress,那么这已经被移植了here。另外值得注意的是,您可以在页面上使用相同的许多菜单,因此当您查看演示时,是的,您会看到一个有效的下拉菜单,但是您可以在“菜单栏”中同时使用许多菜单,这非常适合这个情况。

下钻菜单的更多示例

【讨论】:

  • 没问题,只是添加了另外几个链接考虑,享受。
  • 在向网页添加向下钻取菜单方面是否有任何好的演练。我看到了很好的例子,但没有真正的 HTML,除非我检查元素
  • 高级版,您可以在购买时使用其他链接获得文档,前提是您需要下载源代码并查看下载文件中的 HTML(很可能是 index.html 文件)
  • 好的,谢谢,EireMedia - Drill Down 在顶部有一个链接可以查看整个插件及其不同的菜单,这似乎很奇怪
猜你喜欢
  • 1970-01-01
  • 2018-10-18
  • 1970-01-01
  • 2021-09-03
  • 2013-03-23
  • 1970-01-01
  • 2017-07-01
  • 2019-02-17
  • 2014-06-10
相关资源
最近更新 更多