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

时间：2021-08-31 14:28:46

I have an app that I am creating for a customer that at some points has 6 levels of navigation. Basically our user wants to select an item from a navigation. that will lead to another set of navigation, that will lead to another set of navigation and so on until you are 6 levels deep in on navigation property.

我有一个为客户开发的应用，有些时候有6个级别的导航。基本上我们的用户想要从导航中选择一个项目。这将导致另一组导航，这将导致另一组导航，等等，直到你进入导航属性的6层。

Some of the menu items do not go that far some in fact do not have sub menu's.

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

To make matters even more complicated some of the links are required to have descriptions of what report the link leads to. The caveat here is that some of the descriptions are 15 lines long, basically huge paragraphs of text.

为了使问题变得更加复杂，一些链接被要求对链接所导致的报告进行描述。这里需要注意的是，有些描述长达15行，基本上是大段的文字。

I have tried the on hover open the sub menu but when you get down to the sixth level if you move your mouse a hair too much your going back in and treeing them out again.

我尝试过打开鼠标悬停，打开子菜单但是当你到达第六层的时候如果你把鼠标移动得太厉害你就会回到里面，再把它们重新长出来。

I tried the accordion method from twitter bootstrap but that didn't work because on the 6 level menu's most of the navigation was pushed off the page.

我在推特上尝试了手写板方法，但那没有用，因为在6级菜单中，大部分导航都被推下了页面。

I tried using XML to populate drop-down lists where basically the user would click a link and the "sublinks" would appear in a partial view with a drop-down list. and that continued until you were at the lowest level. The problem is I run out of screen real estate with 6 drop down lists and a description.

我尝试使用XML填充下拉列表，用户在其中单击一个链接，“sublinks”将显示在带有下拉列表的部分视图中。这种情况一直持续到最低水平。问题是，我用了6个下拉列表和一个描述，就用完了屏幕上的地产。

Anyone have any suggestions on what else I can do with an app like this?

有人知道我还能对这样的应用做些什么吗?

1 个解决方案

#1

9  

Drill Down Menus - iPod Style

下钻菜单- iPod风格

A simple solution is never to display one or more nested at once using CSS styling, there is many menus that you can achieve this with and just an example of something I've used before in my designs that involved heavily nested menus is using a iPod style of menu. Take a look for yourself, displays as many nests as you like while keeps everything easy to use and looks pretty cool too.

一个简单的解决方案是，永远不要在使用CSS样式的时候显示一个或多个嵌套，有很多菜单可以实现这个，我在设计中使用过的一个例子就是使用一个iPod风格的菜单。看看你自己，尽可能多地展示你喜欢的巢穴，同时让所有东西都易于使用，看起来也很酷。

You can check the source and other demo online here: jQuery iPod style and flyout menus, if your using WordPress then this has already been ported here. Also its worth noting that you can have many menus on the page operating the same so while you look at demo yes you see one drop down effective but you can have many working in a 'menubar' along side each other which would be very fitting for this situation.

您可以在这里查看源代码和其他在线演示:jQuery iPod风格和弹出菜单，如果您使用WordPress，那么这已经被移植到这里了。同样值得注意的是，你可以在页面上有很多菜单操作相同，所以当你看demo的时候，你可以看到一个下拉效果很好，但是你可以让很多菜单栏同时工作，这很适合这种情况。

More Examples of Drill Down Menus

更多的下拉菜单示例

#1

9  

Drill Down Menus - iPod Style

下钻菜单- iPod风格

A simple solution is never to display one or more nested at once using CSS styling, there is many menus that you can achieve this with and just an example of something I've used before in my designs that involved heavily nested menus is using a iPod style of menu. Take a look for yourself, displays as many nests as you like while keeps everything easy to use and looks pretty cool too.

一个简单的解决方案是，永远不要在使用CSS样式的时候显示一个或多个嵌套，有很多菜单可以实现这个，我在设计中使用过的一个例子就是使用一个iPod风格的菜单。看看你自己，尽可能多地展示你喜欢的巢穴，同时让所有东西都易于使用，看起来也很酷。

You can check the source and other demo online here: jQuery iPod style and flyout menus, if your using WordPress then this has already been ported here. Also its worth noting that you can have many menus on the page operating the same so while you look at demo yes you see one drop down effective but you can have many working in a 'menubar' along side each other which would be very fitting for this situation.

您可以在这里查看源代码和其他在线演示:jQuery iPod风格和弹出菜单，如果您使用WordPress，那么这已经被移植到这里了。同样值得注意的是，你可以在页面上有很多菜单操作相同，所以当你看demo的时候，你可以看到一个下拉效果很好，但是你可以让很多菜单栏同时工作，这很适合这种情况。

More Examples of Drill Down Menus

更多的下拉菜单示例

标签：

相关文章