What patterns could I use for a tree-type menu with up to six levels on mobile devices?
I'm working on the re-design of a web site that displays a large number of highly structured documents that are currently arranged according to a "classification plan" that goes at least six levels deep (I say at least six although I am fairly certain that there are no more). I have looked at quite a few questions on this site and although I have found some useful suggestions there don't seem to be any as complex as I am trying to handle.
Here are the constraints I'm working under:
I don't have the option of changing the classification. The documents displayed are legally binding and users are accustomed to the classification which corresponds to the documents' legal significance.
The classification is big: there are 22 items in the top level (with a total of six levels of indentation this gives you an idea of the total size).
The site must be able to display on mobile and touch screen devices (most typically I think an iPad in portrait mode, but we must also accommodate smaller (phone) screens).
Each menu item can be either a menu which opens another lower level, or a link to a document, or both - so I need to offer the user the distinction between selecting the menu or the document.
The tree structure on the existing web site is quite "classical" and works ok but the problem is that it won't work for touch screens because the links are much too small for the finger, and it takes up too much horizontal space for a tablet (not to mention a phone!).
One possible solution which I like is this slide-in menu, however I'm beginning to think that it will build up too many levels of vertical menu to work visually.