如何处理深度嵌套的导航菜单?

4
我正在为一位客户创建一个应用程序,其中有时需要6个层级的导航。基本上,我们的用户希望从导航中选择一个项目。这会引导您进入另一组导航,然后再进入另一组导航,以此类推,直到您在一个导航属性中深入了6个层级。
有些菜单项不会走得那么远,实际上没有子菜单。
更复杂的是,有些链接需要说明链接所指向的报告内容。问题在于,其中一些描述有15行之长,基本上是大段文字。
我尝试了鼠标悬停打开子菜单的方法,但当到达第六级时,如果您的鼠标稍微移动一下,就会重新返回并再次展开它们。
我尝试了Twitter Bootstrap的手风琴方法,但在6级菜单中,大多数导航都被推到了页面外面。
我尝试使用XML来填充下拉列表,基本上,用户会单击链接,"子链接"将在部分视图中显示为下拉列表。一直持续到最低层。问题在于,当有6个下拉列表和一个描述时,屏幕空间不足。
有人对这种应用程序还有其他建议吗?

哇...我真的建议你退后一步,审视主要目标并完成应用程序摘要和开发。6个层级的导航只会损害你的利润,我无法想象你给最终用户带来的压力。你做了什么需要这么多层级呢? - DᴀʀᴛʜVᴀᴅᴇʀ
我其实并不是建议这样做的人。我们的最终用户希望网站以那种方式布局。如果由我决定,我会有一个类似谷歌的搜索框,用户可以在其中搜索他们想要的任何报告。 - Robert
这可能更适合于http://ux.stackexchange.com/吗? - MrWhite
1个回答

9

下钻菜单 - iPod风格

一种简单的解决方案是使用CSS样式,永远不要同时显示一个或多个嵌套层次,这样你可以通过许多菜单来实现,以下是我在设计中用过的一个例子,涉及到大量嵌套菜单,即使用iPod风格的菜单,可以像这样展示任意数量的嵌套层次,易于使用,并且看起来很酷。

您可以在此处检查源代码和其他演示,如果您使用WordPress,则此已被移植到这里。另外值得注意的是,您可以在页面上有多个菜单同时运行,因此,虽然您看到单个下拉菜单效果的演示,但是可以在相互并排的“menubar”中有多个工作,非常适合此情况。

更多下钻菜单示例:


没问题,我刚刚添加了另外几个链接供您参考,祝您使用愉快。 - Simon Hayter
有没有关于在网页上添加下钻菜单的好教程?我看到了很多很棒的例子,但是没有真正的HTML代码,除非我检查元素。 - Robert
如果您购买高级版本,您可以期望获得文档。对于其他链接提供的内容,您需要下载源代码并在下载文件中查看HTML(很可能是一个index.html文件)。 - Simon Hayter
好的,谢谢。EireMedia - Drill Down插件顶部有一个链接可以查看整个插件,但它是不同的菜单,这似乎很奇怪。 - Robert

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接