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

时间:2013-03-14 18:07:48

标签: html css jquery navigation

我有一个应用程序,我正在为一个客户创建,在某些点有6个级别的导航。基本上我们的用户想要从导航中选择一个项目。这将导致另一组导航,这将导致另一组导航等等,直到你在导航属性深入6级。

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

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

我已经尝试过将鼠标悬停在子菜单上,但是如果你将鼠标移动到第六级,你可以将头发移回过去,然后重新将它们重新打开。

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

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

任何人都对我可以用这样的应用程序做些什么有任何建议吗?

1 个答案:

答案 0 :(得分:9)

向下钻取菜单 - iPod风格

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

您可以在此处在线查看来源和其他演示:jQuery iPod style and flyout menus,如果您使用的是WordPress,则已将其移植到here。此外值得注意的是,您可以在页面上运行相同的菜单,因此当您查看演示时,您会看到一个下拉有效,但您可以让许多人在彼此相邻的“菜单栏”中工作,这非常适合这个情况。

更多深入菜单示例

相关问题