5

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?

Improve this question
1
  • 1
    This 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
    – DA01
    Mar 10, 2014 at 16:14

3 Answers 3

Reset to default
3

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')

enter image description here

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.

enter image description here

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:

enter image description here

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.

Improve this answer
3

I would search for slide menu or sliding menu. A sample js demo.

Improve this answer
1
  • +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.
    – Brian
    Jun 11, 2013 at 14:52
1

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.