I'm looking for a name of iOS-style nested <ul>
's. I'm simply talking about the extremely common navigation where you tap a list item (usually with an arrow next to it) and then the screen swipes left to reveal the next tier of the list. I need to mimic this in javascript and am looking for a quick demo but I don't know the "proper" name for this UI pattern. Does anyone know?
-
1This is a valid UX question. It's asking about a common term for a UI interaction. "Miller Columns" is likely the proper term, though a more column term is perhaps "Column View" more info: en.wikipedia.org/wiki/Miller_Columns– DA01Mar 10, 2014 at 16:14
3 Answers
I believe you are referring to a variation of Miller Columns
A set of miller columns is akin to a nested tree structure, but spread out horizontally rather than vertically. Each node opens to the right of the one selected rather than the one below.
Your typical computer user today would have first been introduced to these with Apple's switch over to OSX (where it was labeled 'Column View')
NeXT Step, the OS that OSX was based on, had used them since the inception of that operating system.
In the context of an iPhone, however, you typically only see one column. Naturally, this is due to the size of the device. You are then essentially 'panning' a virtual set of Miller Columns. The very first iPod had a menu system that was entirely based on this.
It then has made it's way back to larger screens but still in one-column view. You see it fairly often in iPad apps:
That's not to say Apple invented this--they didn't. But they have leveraged this one UI pattern quite a bit across all their devices.
I would search for slide menu or sliding menu. A sample js demo.
-
+1 for finding a demo, better than I could do. I'm going to see if anyone else has an idea of a more specific term for the UI pattern.– BrianJun 11, 2013 at 14:52
In the Kendo UI framework it's called a ListView. jQuery Mobile is talking about ListViews as well but have a different navigation system called Ajax Navigations:
jQuery Mobile includes a navigation system to load pages into the DOM via AJAX, enhance the new content, then display pages with a rich set of animated transitions.
Maybe on of this frameworks are already matching your search.